Motion and Transitions Q&A

[00:00:00]
>> Does anyone have any questions about transitions? Marc.
>> I've noticed you've developed route three.js wrapper for Svelte. My question is where do you draw the line that you need to use a third party library to do animations. Obviously in three.js, it's to get 3D animations but in so now it's scenario like maybe wanting to use GSAP as Svelte provide all the required APIs to do animations that GSAP can or what's the limitation of Svelte generated?

[00:00:35]
>> That's a good question. So Svelte doesn't have like a whole lot of animation stuff built in, if you're doing complex sequence of animations for example, then transitions probably aren't the tool that you would reach for in that situation. And you could definitely use GSAP or any other animation library.

[00:00:52]
What's really hard to do with an external library is controlling when elements are unmounted from the DOM. This is a recurring theme with frameworks like you wanna be able to understand when an element is being removed so that you can transition it out gracefully. Whereas normally what happens is it's just taken out of the DOM.

[00:01:11]
So it's really easy to add a CSS animation that applies when an element is created, but there's no equivalent for when it's removed. And so at that point, the framework kind of has to have its own built in support for that concept, and that's what transitions are. It's a way of of making state transitions happen over time in a way that a third party library just wouldn't be able to hook into.

[00:01:39]
But beyond that, if you're changing the opacity of an element but you're not removing it from the DOM or something like that then you can go nuts with third party animation libraries particularly if you're doing something complex. And thrill is a little bit of a special case, I did not make thrill, it's a community driven project that I use myself in my own projects but I haven't actually contributed to it.

[00:02:05]
In thrill you're not dealing with DOM elements at all you're dealing with three JS objects. And so at that point, Svelte doesn't really have any ability to kind of hook into that and control how those elements are removed. So at that point, you are dependent on the third party libraries.

[00:02:21]
I hope that answers the question. Okay.
>> Then you're talking about the merits of CSS versus declaring this stuff in JavaScript in it perhaps adding your own classes and then just adding and removing the classes with Svelte to specific elements but I don't know what your thought is on that.

[00:02:48]
>> Yeah, it depends on what you're doing that is certainly an option but if you're actually removing things from the DOM altogether or if you're unmounting components, then it can be quite hard to coordinate all of that activity. And so that's where transitions become quite handy.
>> I'll just read this comment quick.

[00:03:10]
A situation I ran into was wanting to use Svelte transitions, but I wanted them to apply when the element was hidden and unhidden in CSS and not removed, added from the DOM. I wanted everything in the DOM, but just hidden.
>> Yeah, so that transitions aren't designed for that scenario at that point, you probably would need to use CSS classes.

[00:03:37]
But that's an interesting use case. I wonder if there's some way that we could add the ability to control the CSS animations that you would add with a class through Svelte. Maybe we'll add a new feature, open an issue on GitHub.