Transition / Animation system

[lbineau]

Is your feature request related to a problem? Please describe. I did not find any documentation about a transition / animation system (CSS or JS).

Describe the solution you'd like I think LWC should have a built-in transition / animation system like any other modern frontend framework.

• https://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components
• https://fr.reactjs.org/docs/animation.html
• https://angular.io/guide/transition-and-triggers
• https://svelte.dev/docs#transition_fn

Additional context I believe transitions and animations are an essential part of any modern UI library and imo it should be good to have such component in LWC.

[caridy]

@Gr8Gatsby can you add this to the things to be discussed at some point?

[git2gus[bot]]

This issue has been linked to a new work item: W-7165847

[git2gus[bot]]

This issue has been linked to a new work item: W-7165847

[git2gus[bot]]

This issue has been linked to a new work item: W-7165847

[lbineau]

Any news regarding this work item?

[caridy]

@Gr8Gatsby

[dakotalim54]

would be great to see this

[lukethacoder]

Are there any 3rd party packages (three.js, anime.js, gsap, popmotion etc.) that work well with LWC (and get past locker service)?

[chrisureza]

Did you find a way to use GSAP with LWC?

[lukethacoder]

@chrisureza I did manage to get GSAP working within LWC awhile back. Had to poke around in the minified js output. Not too sure if the same still holds up but the below works as of gsap v3.5.1.

should be able to just drop the window = window and instead return self.

// before
;(function(global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined'
    ? factory(exports)
    : typeof define === 'function' && define.amd
    ? define(['exports'], factory)
    : ((global = global || self), factory(window = window || {})) // THIS LINE
})(this, function(exports) {
...

// after
;(function(global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined'
    ? factory(exports)
    : typeof define === 'function' && define.amd
    ? define(['exports'], factory)
    : ((global = global || self), factory(self)) // THIS LINE
})(this, function(exports) {
...

[tom5491]

Animation libraries also don't seem to work when having LWS enabled...

[nolanlawson]

@tom5491 Do you have an example of an animation library that fails with LWS? Do you have a reproducible test? (See LWS Console.)