Impossible FLIP Layout Animations With Svelte And GSAP

hey friends today I have something really special for you and that is doing impossible animations with swelt so what do I mean by that let's take a look at this example here we have the same Circle in one parent and we want to animate it going from the left parent to the right parent and this is impossible using CSS right but you can use JavaScript but even JavaScript is computationally expensive if you do something like this on every frame but thanks to the flip animation technique you can get buttery smooth 60 frames per second animations so look what happens when I click on the page how beautiful is these friends I'm going to show you a basic implementation of the flip animation technique so you understand how it works and then we're going to use the GSAT flip plugin to make things even easier you're going to look at some incredible examples like this example with the circles how beautiful is this friends and then we can look at how we can animate something like CSS grid so we can go from one image to the other and everything beautifully transitions and then we're going to look at some of which probably most people are excited about which is using the flip animation technique for page transitions so if I press on a movie poster for details is going to animate including the cover and the title and how beautiful is this friends so you don't even need the view transitions API and this works in every browser alright so I hope you're excited let's get started alright friends so as you can see here I have some basic containers which are bound the value of the circle element but you can even use Query selector if you want to but this is nothing special and this is what I want to emphasize before we start because the flip animation technique isn't something that you have to change your code around you can just write code regularly as you want you just do some change in your Dom applying a class and Etc and then you use the flip animation technique so as you can see here is something that you would probably do by default here you're going to switch the container first last but let's first talk about the flip animation technique the flip animation technique is something that was coined by Paul Lewis in this blog post flip your animations and flip basically stands for first last invert play and let me show you how this works in this example so how do we achieve this basically what is an illusion so we're going to take the measurement of the first element using get bound client track so we know the position of that element and then we make some change to the Dom we're going to measure the second element and then we're going to do some basic math to find the difference so we're going to take first dot left and we're going to subtract it from less dot left and basically this is going to just create an illusion because we're going to use a transform to place this element in the place of the first element like this and then we're going to play the animation which is going to create the illusion like it's animating from this parent and that's how the flip animation technique works and why it's all performant and in the blog post you even have some code you can work with so as you can see here it's really simple so we're going to get the first position then we're going to do some change then we're going to get the second position we're going to do some basic math and then you're going to use the web animations API to animate it all right so let's see how that looks in sweld so we're going to go to this example so remember we're going to get the first position I'm going to say const first and since we have a reference we can say Circle element get bounding client tract then remember we do any change and then after we do this change we want to measure the Dom again or the same element right so we can say cons last which is going to be Circle element get Bound in client tracked and this is a really useful and often used function so you can measure the position of the element in the viewport so now you only have to do some basic math so we can say invert and then you can say hey first left minus last left that's basically it so now we can use the web animations API which really is an awesome way to use JavaScript to write CSS animations so you can pass it some keyframes and options and that's it and I can say const animation and now we're going to reference the circle element we just have to say animate that's it and now you can paste it an array of keyframes so first we're going to do translate so now we have to do the trickery or the illusion I'm going to say back ticks and then we're going to use the invert value so this is going to start the second element as it was in the first position right and then we're going to animate it you're going to say Translate to 0 pixels and this is just shortcut for transform translate X or Translate Y and I'm even going to spice it up and animate the background so I want it to be yellow and then we're going to give it some options click and paste it an object and then we can say duration two seconds and then we can also say fill forward so it's going to keep the changes after the animation for the background color and we can even specify uneasing alright so we can save this and if I click it's not going to work and why is that well this is another interesting thing how swelt works because swelt bashes the updates to the Dom we somehow need to wait for this change to happen first when the element changes right and then we have to take this measurements because right now everything is going to get batched and we're not going to see the changes so there's two things you can do you can use request animation frame which is going to request the next frame and it's going to happen on the next stick so after an update or you can use the built-in lifecycle function tick from swelt which is intended for these sort of things alright so first I want to show you request animation frame so the only thing you have to do is request animation frame you're going to pass it a callback so now let's just complete everything here is our animation stops I'm going to save everything and now let's see oh how beautiful is this friend it's like magic right it basically just so you're not confused if you only know about request animation frame for doing infinite Loops this isn't an infinite Loop request animation frame is just a function that's going to request the next frame right so this is going to happen on the next stick in the browser alright but let's use the tick from swelt so I'm going to remove request animation frame and I'm just going to say await tick and if I press enter this should Auto Import let's check at the top it Imports a tick from Salt and we also need to make this function async and this is going to have the same result all right so I'm going to save it and let's try it now how beautiful is this friends and that's the basic implementation of the flip animation technique and of course you can also account for the y-axis here for rotation and scaling I don't know about you but I don't want to maintain a flip animation library and think about the math and edge cases but thankfully I have a good news you don't have to because the GSAT flip plugin already takes care of everything for you moving forwards you're going to use gsap for all of our animations alright friends so for this animation we're going to use the GSAT plugin which is really awesome you can go to this link and read more about it they have an awesome video on this and they also have some cool examples so they show you how the flip animation technique Works which is really awesome they have some highlights and examples this is really awesome animating flexbox here we have an advanced example using this Gallery which is super easy to do with flip and yeah there's a lot of documentation and a lot of things you can do here there are some caveats and tricks when it comes to using a tweets felkit because they're using a JavaScript framework but that's what I'm going to show you so here to show you how to flip between two different elements which is also awesome but yeah you can spend your entire day reading this if you want but let's look at this example that we have and again I want to emphasize that you don't build your uis around flip you just do what you regularly would so in this case here have these circles which I have them in this state I have two states stack and grid currently I set it to stack and then I'm going to use the flip but you can name is whatever you want like change layout I just named this flip and then we're going to compare hey this layout is equal to grid then we're going to change the layout to a stack or opposite and then this just happens and again we're really not thinking about Flip or changing how we do things we just have two separate states and we want to animate between them and I also want to show you how cool it is when you don't using booleans but using explicit State like a string here because you can do something really awesome let me show you so you can go here you can give it a data attribute you can say data layout and you can pass it the current layout which gives you incredible power using CSS so here in CSS for example I have this attribute that I'm targeting data layout stack in this case hey just use flexbox and if it's in the stack layout then we can specify styles for the circle so this is how I'm styling this I'm giving it a negative margin and then you can say hey data layout if this is a grid then you can use it to display a grid and then we can change the styles for the circle and we can change the Border radius and you can also do flip animations in swell but swelt is limiting in this regard when you have things like border radius rotations which are incredibly cursed but if you have simple animations as well you can use the built-in animation directive flip and Crossfade and you can watch my other video if you're interested in how that works yeah but let's flip some animations so first thing you have to do if you haven't already I'm just going to stop the terminal so you can just use npm or pnpm to pnpmi install gsap and if you want you can also install the types for gsap and that's basically it the plugins com is part of gstap so that's all you need we're going to start the development server again and let me just close it and that's basically it so now we need to import gsap and you can say import gsap from gsap so now we're going to import the flick plugin we can say flip from gstap flip and then you have to register the plugin and of course these instructions are available in the documentation for G7 so we have to say register plugin flip and that's basically it so we're going to see that this works the same way how we implemented our own flip animation technique so first we get the first position so we can say column State and now we use the flip plugin flip get State and now we need to give it a selector which is going to be circled and you can also pass it props you want to animate between so you can say props and what we want to navigate or change we can say border radius but this can be anything right so again we get the first position and don't forget we also need tick so we can say await tick which we can import from Salt so let me put this at the top and don't forget to make your function async and you can find all of these examples in the post and I even have a link to the GitHub all right now I'm going to show you how simple this is using gsap so we can say flip from we have to pass it the state and gstap is going to do everything for us and now we can just paste the option for the animation so I can say duration 0.6 seconds we can give it a position of absolute so we can say true so this is going to reduce Jank during the animation if we want it to be more performant you could use true you don't want to use scale if you have something animating like text because it's going to cause Jank as it's going to scale the image instead of animating the width and height so that really depends on the type of Animation you're doing we can even give it a stagger so we have a delay we can give it the negative one I just want a small amount and we can also for font say spin and this is going to spin it an entire rotation so 360 degrees and then we can specify ease and G sub is really simple to use all right so now we can save this well and I need to fix the Imports because it's not just G step you have to do this you have to do g-sep dist gsap for whatever reason and then you have to say this flip so now let's save this and now circuit isn't going to complain so let's see if it works how beautiful is this friends so you can see the Stagger how it works so if we give it a positive stagger is going to start from the first one and if you give it a negative stagger it's going to start from the last one and how simple and beautiful is this I just really want to emphasize that you don't have to change how you work etc you just make your Transitions and then you flip them and also you can pass whatever you want here you can pass a reference to the element if you want so you can use this in swell to pass it but in this case we can just use this and g-sep is going to use Query selector or whatever and then we also learn that we can pass props to animate other things which would be a problem in swelt using Crossfade so if you pay attention the Border radius is also animating and the rotation Works beautifully how beautiful is this friends alright friends so in this awesome example we're going to animate CSS grid and if you've been paying attention then you know that we're not really animating CSS grid we're just using the flip animation technique to animate the transition from one state to another and even though in modern CSS you can animate some values of CSS grid it has some limitations but you don't have any limitations with the flip animation technique and here I don't have anything special in the template I just have a grid here I'm looping over eight items then I'm using variables inside each Loop so I don't have to create a special component so I know which detail is active if I compare the selected to the active ID which I'm doing right here so when I click on another image it's just going to change it to be the active one and I'm doing this because I have the same class name details so let's see what happens when you have that class as you can see it's nothing special here I have a detailed slicer and this has the details class is going to span the rows and columns by two so if you go here in the developer tools I can just go here enable grid so you can see what's going on so this spans two rows and two columns unlike the other images so that's the only thing we're doing which has nothing to do with flip right alright but let's flip the animation so I can go up here in our function so again we're going to get the first state we can say flip get state so what we want to Target the grid item that's basically it so now you can go here you can use a way to take just as before and now we can say flip from pass it the state and give it the options and now I can give it a duration 0.6 seconds let's give it a stagger I'm going to give it a tiny amount let's say absolute true and I'm not going to use scale here because I have some text which would look weird so again as I said it depends on the type of Animation you're doing and then I can save this and basically that's it let's see how it works and how beautiful is this friends now let me see if it's visible if I use scale it's basically not going to work here because you can see how the text is weird because it squishes the text when you change the image but yeah that's it so I'm going to remove scale and another thing I want to do I want to use gsep to animate this text going outside when we're transitioning and then going inside when the image is active so the flip animation technique returns a timeline or actually the flip plugin and we can use this timeline to animate the element so you can even go here you can just say two so you can chain it or you can just go here and say tl2 and now we can say hey details the title so it's going to Target that and then we can say animate opacity one zero y and then we can say duration 0.3 seconds but if I save this it's not really going to work because first we need to clean up the animation at the text right so what we can do we can pass it a callback function we can say on start basically the Callback and now we can also use a gsap animation here so what we want to do with the old title we want to say gsap2 so when it doesn't have a details right and then we can just say hey opacity zero Y is going to be 100 so it's going to go off screen and then the duration is going to be 0.3 seconds and let's see how that looks like so we have it here and now you can see how it disappeared but it appears right now when you go to another image and it's going to appear like magic and how beautiful is that friends and of course you only have to use GSAT for these animations you can use swelt but you have access to these callbacks and other things you can read from the gsub documentation I also want to show you how you can make this more reusable so here I'm not using cell directly to change the image but I'm using this felt action so on this item I'm saying use flip which you can reuse on any item if you have something like this or maybe you could make a more General flip function so here I have this flip function which takes in the container so I'm going to query all the great items which is some curse in order listing we have to turn into an array so we Loop over each item then we add a click event listener we check if it contains details then we return it so we don't change it then we get the first state using flip then you check for details on the class and remove it and then we change the state so we show details and then we do the same thing here using flip it's a lot more cold but this is something interesting if you want to do it so you can make it more reusable but if you want to look at that example all the links are included in the post all right friends so in the last example we're going to learn how we can use the flip animation technique for page transitions as you can see here I have a boring movie site when I click on a movie it's going to take me to the details which is fine but it's really not exciting and we can make it more exciting by flipping it and if you're curious how this works here have a plus layout TS which I'm going to use to return the data for the pages some returning data from a Json file so I can go here to the movies and I'm just looping over them nothing to do with flip right I didn't do anything special since I have this data available to every child so for the ID here I can have movies so I can say data movies find movie and I can filter it based on the movie ID alright so you might be asking yourself how do we flip this and the biggest problem we have is these are two different elements so how does flip know that it should animate this and where do we even put the flip animation right if we put it in movies it's not going to work then this isn't going to know about what's going on but we can go to the plus layout cell file and here we can put the flip animation so here I have imported gsap and the flip plugin but now there's another problem we have to think about okay how do we know when we transition a page to get the before and after State and thankfully spelling has some useful navigation functions so we can import them we can say import after navigate and we can say before navigate from the app navigation store and that's how simple this is so now we can go here we have our plugin everything looks great right and now you can say hey before navigate so remember we need to get the first state and then we can specify a variable aside because we need to keep track of the states is we're going to use two functions so we can say State and if you're using typescript this is of type flip dot flip state so it doesn't complain about that and now we can reassign it before a navigation occurs circuit is going to be kind enough and it's going to say hey something is happening before the navigation maybe you should do something and I'm going to say okay don't mind if I do we can just say flip get State again what do you want to get the state of we can say cover and we can do something else we can specify more than one thing so here I want to animate not only the cover but maybe the text is related and that might look good or not depending on your opinion but I just want to show you that you can have more than one element selected so I can say cover and we can also Select Title and that's basically it for this and now we can say hey after it's done navigating then we're going to measure it again so let's give it a call back and we can say flip from we can pass its state and now we can pass it some interesting things so we can say duration 0.3 seconds we can say scale true to avoid Jank and you can also give it the knees all right so let's save this and now when we try it it's not really going to work it's not going to do anything and why is that well because how JavaScript Frameworks work first this isn't the same element right and then we're doing this sort of thing we're deleting the all elements and bringing in new elements so you're using the flip animation technique with gsap you have to specify another property so that gsep knows to query those elements again after you recreated them or destroy them so you can say targets and again you can pass one target so you can say cover but I have another one right title and then I'm going to save this and now this should work in theory but it's not going to work here if I try this and why is that because again since we're creating and deleting the elements we need to help gcap out more so we need to specify a special data flip attributes on the element you want to animate and this is really easy so for example we can go to the movie and here we have discover because again just ask yourself what do I want to animate what is the same and then you can say data flip id so we can give it a unique ID which can be anything so you can do it like this I can say cover and then the special idea I'm going to use is going to be the movie title and I'm going to do the same for the title so I'm going to say data flip id and I'm going to name it title just so they're different another thing that's really interesting about this is also how you're going to use the view transitions API when that's available in browsers it's very similar how we do this and look at this this is only a couple of lines of code if you ignore the Imports how awesome is this all right so now we need to match this let me just save this and it's not going to work automatically right because let me just copy this over we need to go to the individual movie so we need to find the corresponding Element image class hover okay so now we can go here so I'm just going to create the new line paste it here let's save it and I'm also going to go back and always copy the data flip for the title go here find the title again here it is so here is what you want to animate all right and now the moment of truth let's see if this works how beautiful is this friends look at this this is Magic to me I could do this for hours and it just works all right friends that's it as you can see this is only a couple of lines of code if we ignore the import and it's really not that more difficult than using the view transitions API all the examples and links are going to be in the post if you like what you've seen don't forget to like And subscribe and you can support me by becoming a patron and you can also join the Discord server thank you for watching and catch you in the next one peace [Music] all right [Music]

Channel: Joy of Code

Views: 11,655

Keywords: svelte, sveltekit, gsap, flip

Id: ecP8RwpkiQw

Length: 22min 54sec (1374 seconds)

Published: Fri Jun 16 2023