Staggered Animations in React with Framer Motion in 5 Minutes

hey it's lee halliday and today we are going to be using framer motion to animate these tiles but we're going to stagger the animation so that they sort of fade in and fade and slide down in one after another so here's what we're working with here this react component where we've got a few articles six of them here that are showing up on the left and we're just mapping over them and outputting them as a div so that's what they show up as and if we want to animate them we want to convert this div into one we can control with frame or motion so all we do is we import motion from frame or motion and then we change this div to motion.div now this is a div we can animate and we're going to be working with two props we're going to be setting the initial properties and then where we want to animate them to so why don't we just start by fading them in so we can say initial opacity is zero and eventually we want an opacity of one so i refresh this and they sort of fade in really quickly so if we want a bit more control over how long that animation takes for example we can set the transition so we can say here we want a duration of half a second so refresh now they take a little bit longer we could up that to 1.5 and now they'll fade in pretty slowly so that's how you change how long that animation should take but we want to do more than just fade them in we wanted them to slide in as well so for that we can set the translate x and let's say we started off 50 pixels to the left so negative 50 and we want to get them to to zero to where they should be so we can say translate x zero so now they're all sort of fading in and sliding from the left just like that and if we wanted to come down sort of from an angle to the left we could do the translate y as well we'll set that to minus 50 and translate y should end up at zero so now they're sliding down from the top but i wanted to stagger them that was sort of the whole point of using framer motion because up until this point we could we could just do this with css animations for the most part because there's nothing sort of special happening we're just sort of changing a property having it fade in but we want to stagger them so we're going to be using this articles that we're mapping and it gives us an i so which is it is it the zeroth or the first one one two three four and we'll basically use this number to set the delay of each of these that we're showing so we can say here and we're gonna set the delay to be equal to i times let's say we want to delay them just a little bit so 0.1 seconds so 100 milliseconds so now you can see that they're not all doing it once but they sort of all come in so if you set it to the same value as your duration you'll sort of have one finish then the other one begin like that or if you set it to like oops that's not a number like that they'll come in really quickly sort of a little bit staggered but almost all at the same time and obviously you could then do like a 0.5 so that finish and they come in really slowly so that's how you can use the i the second argument or param you're receiving when you're mapping which number it is in the array to change the delay and have it show up like that so why don't we stick with point two just like that and you could all also play sort of where they're coming from using this i as well and let's say we want even ones to come in from the top left odd ones to come in from the the top right it may end up looking ugly but let's give it a go anyways and what we're going to do is we're going to say i modulus 2 so if that is equal to 0 it will be minus 50 otherwise it will be plus 50. so we can sort of play with this i to and modulos to get them to come in so now they're like sliding in like that so anyways that's all i wanted to cover today how can you really easily use framer motion to stagger your animation in using the second param that you're receiving as you're mapping over or iterating over a collection like an array or something like that so we can say where is it going to start initially where do we want it to animate to and how do we control that transition by setting the duration and the delay and the delay is where you really get control over staggering them in hope you enjoyed the video take care bye

Channel: Leigh Halliday

Views: 2,901

Rating: 5 out of 5

Keywords: react, framer motion, react animations

Id: u_95SPKE6vg

Length: 5min 28sec (328 seconds)

Published: Sun Aug 29 2021