Advanced React Native FlatList animations with Animated API

hey guys welcome back to my channel in this video we will create some advanced react native animations i was inspired by wettery i hope that the name i pronounced it correctly and he built this amazing carousel animation and i'll show you my way of doing it in react native by using the flat list and animated api as you can see there are multiple types of animations going on the screen we have this ticker from top left corner we have the parallax effect applied for each slide text we have a pagination with an indicator that's also moving we have a circle in the background that's also scaling in and out based on the active slide so lots of animations are going on the screen before jumping into vs code i would like to thank you all for supporting this channel for subscribing to it liking my videos and sharing it with friends on social media and to piotr and thomas for buying me a coffee and supporting me and by the way if you'd like to support this channel and you like my work the link to buy me a coffee is down in the description so thank you all once again and now we can play the intro and jump straight into vs code and start coding these beautiful carousel animations alrighty guys so i'm here in vs code i already created a project using expo and i have some some components here render on on the screen let me start with with the data so let me go to the data itself and we have a collection of items each one will have a type image uri heading description key and color so this is the data that we'll be working with and inside the app js in the main render method i have a flat list plus the logo so the flitlist here plus the logo and the pagination here and for the flat list i'm using the data that i've presented earlier i'm rendering an item this component and the item it's it's a basically a view containing an image and another view that contain the heading and the description this one here from the bottom plus the image and for the pagination component i have a view and i'm iterating over the data to get the item key and i'm applying some styles plus the color that was defined in the data and some minimal styling here if you're wondering what this does is basically modifying the transform origin of the of the container for for this logo here because i would like to rotate it from this point down below here and not from the center i'm shifting with minus and then i'm i'm going back to the center what i would like to do now is to start with the slider itself so the slider it's it's it has pagination enabled and we have this effect straight out of the box because the item has with 100 uh like the width of the item is 100 so the width of the screen and i'm i'm applying the horizontal movement here so now that we we went through the what we have uh on initially what we had initially what we need to do now is to create here a constant for the animation so i'll call it scroll x and it's gonna be a react use ref and the new animated value starting from zero get the current value and here in the flat list i would like to modify the scroll x x base based on the position right so i'm adding an event listener so on scroll this is gonna be an animated event and this animated event i'm i'll get from native event the content of set i'll get the x and assign it to the scroll x scroll x and i'll use the native driver for it and now this is uh this is showing me an error because i'm using an animated event but this flat list is not an animated component so i'll do animated dot and to get the scroll event at 60 fps we need to apply a scroll event throttle of 16 here and now in the item let me pass the index and also the scroll x that we've just mapped to the we just mapped the scroll event here and inside the item i like to start with scaling the the image so let me create the input range here so input range it's gonna be first let me grab the index and also the scroll x we need the index because we would create a different input range based on for each slide basically so this will have an index minus one multiplied with index multiplied with and index plus one multiplied with with so previous slide current slide and next slide and this input range will be created for each particular item and we would like to scale it so let's create the scale and we'll interpolate scroll x and we'll have the input range defined here in the output range it's going to be 0 1 and 0. so only when the current index is visible we would like to have a scale of one otherwise it's zero and let me convert the image into an animated image so an emitted image and for these styles let me apply a transform scale and now when we move the mouse use when we move these slides we we got this this effect applied to the image and now let's let's create the parallax effect for the text and for that we would like to slow down uh slow down the heading text basically the slowing down i'll just show you here so i'll do translate x heading it's a scroll x interpolate and the input range is going to be the same but the output range is going to be with multiplier 0.2 and then i'll say zero and then minus with multiplied in 0.2 and let me apply it to the to the heading so convert both of them because we'll use them anyhow so convert them into an animated view and here in the styles let me apply a transform and translate x it's gonna be the heading so now because the initial the initial movement will be this item will be moved by a width i'm actually slowing down the movement so it's gonna be instead of width is going to be only 20 of the width and now if i move if i'm um if i'm um if i'm moving the these slides you see that those are moving differently compared to the initial one so if i'm if i'm also applying a different uh a different transform translate to to the to the description here but instead of 0.2 i'm moving it 0.6 and [Music] description here so the description will have a transform translate x of the one defined here you'll see that this will move even faster so not to create any confusion but this one the the right hand side it's actually when you're moving to the left and the left hand side is when you're moving to the right it's kind of vice versa because this because of this scrolling mechanism i would say so right hand side it's when you when you go like this right when you display the next item and so on and i would also like to apply uh an opacity here when we move it so right about here i would like to have it zero so in this case we cannot move with the index minus one so we will need to create a different input range so input range opacity and instead of one i would say 0.5 maybe 0.3 let's say and with this input range i'll create an opacity and i'll still interpolate the scrollex interpolate and input range it's going to be input range opacity and the output range is going to be 0 1 and 0. and if i'm i'll apply it to the text so here i'll have opacity and down here i'll have opacity and now this instead of interpolating it from a full width i'm saying uh when you are in the middle of the animation you need to be opacity or maybe 0.3 so a 30 movement i would like to have opacity zero so this will speed up the opacity so this will create this this pretty effect okay now let's let's move on and and create the thicker the thicker component and i'll start here above the item and before going i'll i'll start with the ticker and the ticker will also receive this scroll x and here we'll return a view and apply a style of thicker container and inside this i would like to have another view so basically i'm trying to create a view which will have a specified height a fixed height with overflow hidden and decide it i'll have a larger item right and i'll move it i'll i'll apply a different offset or translate y based on the active slide so here i'll need another view and this view will be animated within the overflow hidden view which has a fixed height and here inside i'll iterate over the datum so i'll have here something so the i'll have the type and the index let me take another look at the data so oops data we would like to display this type for each item right so it's the type it's correct and then i'll return a text inside it i'll render the type i'll also need to apply a key so keep it equal to index and style thicker text all right and let me hit save nothing is visible now because i didn't rendered it in in the application here so let me move to the pagination and apply the ticker so scroll x we'll do the pagination afterwards so don't worry about it i would just like to to create those types of animations that i was referring in the first place so scroll x and now those appears appear here and let me position them absolute here and apply some height and do the styling so let me remove the flat list and here i'll say thicker height this is a fixed height so 40 pixels for 40 points and i'll have the thicker container and thicker text right and let me start with the thicker text because you'll see in a minute actually let me position it absolute position absolute and i'll say 40 and left 20. so they'll be here on top right and for the thicker text i'll apply a font size of ticker height i'll apply also line height of thicker height and let me transform it so tricks transform uppercase and some maybe letter spacing 2 and a font weight of 800. that looks that looks okay to me all right and now the the tricky part is how we display one item for for each slide right and to do that this sticker container should also have a fixed height of the ticker height but before doing it i'll show you what i mean by that so let me apply a background color of red here so everything is red and also apply an overflow actually yes overflow hidden comment also this one and you'll see this this is the container that we're working with right and then let's apply the animation and then uh go back to the styles and apply the overflow hidden and see the effect so let me go to the thicker where is the thicker so thicker it's here i like to say i would like to create the animation and because we are outside of the flat list we need to uh calculate it manually so the input range is gonna be minus with zero and with right so previous current and next slide and for for this one i would like to translate why the whole the this container from inside for uh increment it by a ticker height right so the translate x is going to be scroll x and i'll interpolate it and input range and then the output range it's going to be [Music] thicker height so going up if i'm if i'm going like this right remember and now zero and then minus sticker height so if i'm converting this view now into an animated view and apply this style here so style it's going to be transform translate y and hit save now we would like to only uh show the homeland p for example and when we move you see this this this view it's also moving along with the active slide and this is creating this this sort of effect but the only missing piece from it is to have this container with overflow hidden and a fixed height like the font size of the item so if i'm applying the height and overflow hidden you'll not be able to see the rest of the list but the inner view is animated and this is creating this this thicker effect i'll say so if i'm removing the background now it's more visible and i think that we can get rid of the letter spacing here it's useless okay and another another animation that's happening on the screen is the dot or the circle from from the background which is scaling in and out with an opacity so if i'm going up here let's let's do it here let me create a component called circle also receive the scroll x event here and i'll return a view and a style with circle styles circle container and inside it i would like to map over the data so data map but this time i would like to to take the color right so color and then the index because i'll apply the same color as we have for the pagination here to the circle itself and just render a view and apply some styles but also don't forget about the key so key it's index and style i'll apply the style circle and also background color of the color from here okay and this this circle container is going to be absolute position so let me use the style sheet absolute fill object so it's it's absolute uh positioned and each each circle inside is also going to be absolute position so they'll be stacking on top of each other right and let me render this first and let's go to the app here and this time i would like to render it above the flat list in the tree that's because i would like to have it rendered beneath the the flatly store to be here but under under the head headphone right so i'm uh scroll like so basically this will have a lower set index compared to the flat list itself so that's why i need to move it above the deflate list okay so this circle uh let me go here down in the circle container and then we'll have also the circle right and for the circle i would like to let me first actually do the width let me create a constant here and i'll do circle size it's equal to width multiplied 0.6 so 60 percent of the width height it's the same and for the radius it's half of this one hit save and you'll see those are like rendered here and i would like to align them to the center and justify the content of the center as well and for the circle i like to position it absolute so everything will be here in the middle of the screen hit save everything will be here on the middle of the screen and circle will overlap which with the other ones and let me move move it maybe 50 percent yes it's it's looking good so far and and now let's go to the animation so we would like to apply a different animation right to the circle and and for for example this one is a purple we would like to display the purple circle so to the component circle here we cannot do the interpolation here right so above because we also need to have the index of the we would like to create the same effect that we have for the flat list so each item each render item has its own input range and we would like to apply the same thing for the circle and here inside the data where we map through the data we would like to create the input range so input range or interplay scroll x right so input range is going to be again index index minus one multiply it with the width index multiply it with and index plus one multiply it with the width and we would like to first do the scale so let's let's create a scale interpolation here we'll interpolate using this input range and the output range it's going to be 0 1 and 0. hit save convert this view into an animated view and here in the styles create transform and use the scale that we've just created and now this this should shrink this will create this this effect right but notice that after a while so right now for example so we are we are starting from the green one and that's because the green one if we are taking a look at the the scroll the green one is the last one but because we didn't clamp the uh the interpolation what will happen is right now based on this this input this output range it's gonna continue to uh to to map like the the array because uh this is this is actually saying let me do like this so we have zero one zero but then we'll have minus one minus two minus three and also on this on on this side as well on this side and scale minus 2 for example it's rotating it and increasing the size again so basically scale minus 3 is equal to scale 2 and so on and so forth so that's why on the initial screen this circle is actually scale too because here this is actually scale minus two i think or minus three and in order to avoid this this type of extrapolation i'll say we need to clamp it so we need to apply extra plate clamp which is basically saying hey stop here do not go beyond this disarray and we have this this type of animation happening here and notice that uh we don't wanna have both circle one one string down and one right we would like to uh maybe start the other circle animation right here and to do that we need to decrease this index here so i would say one maybe 55 so this this will this will start the you see now it's almost almost in the middle and now it's gonna grow the circle and this is the expected behavior that we would like to apply and along with it we also wanted to have an opacity applied to it so the same input range and opacity in our case is 0 1 and zero and if i'm copy pasting this let me apply it here it's output range you see those things are happening so i'm now it's gonna grow so it's it's creating this nice effect and i i can see that the circle opacity is to be too too too high so i'll just decrease it to 0.2 and it's looking much better and the the missing part is the uh pagination indicator so let's let's create it we have this uh pagination so let me go to pagination we we are doing the same thing right we have a view inside we iterate over the data we show view and another view and the reason for that is for example we have this small circle but the actual let me go to the background container this one has has uh 40 pixels so it's bigger so it's creating this fake space that we are also taking advantage of uh when we have the circle movement but let me apply here a background of red so you will see it also border radius radius of dot size divided by two so you see how how this is actually looking and we will have another circle which is a sibling of this list and we will animate it based on the active slide so let me remove this and if i'm going to the pagination again here inside the view we will have the the item list right but i would like to have an animated view here which is the sibling right we would like to animate it right so we'll have a style let me see if i have the style here so not really so let me create it so styles dot pagination indicator right and let me get the scroll x here so scroll x and see if i'm using it no i don't have it so copy copy paste it and in pagination here i like to interpolate it differently right because we need to calculate exactly how much to move but this is simple right because we did it already so input range it's minus with zero and then with right and we will have a translate x which is a scroll x interpolate and we'll use the input range and the output range for this time it's going to be let me see what is the dot size okay stud size this is the problem with uh not having uh the script on on your on your window here i have only the so uh i like to go so it's it's actually minus those size right both sides and zero and apply this to the animated view and we'll have here transform and then translate and let's see the pagination indicator we need to pagination so here let me create it so we have the same style as we have for the dot itself but we'll use the four waves so dot size height dot size and border radius of dot size divided by two right and this time i would like to have a border width of two and a border color or ccc it's too hard ddd yeah that that that's working right and now because if i'm going back to the pagination i'm i'm i'm interpolating from previous current slide the next slide i'm saying hey you should move uh a minus or a plus dot size so because this is a sibling so without without this translation let me comment it out and say a background color red right initially it's gonna be it's gonna be outside and because i'm i'm saying hey you should you should move based on on the scroll x position immediately it knows where to position itself because it's a sibling of of those items and it's it has the same width and height basically so if i'm applying this if i'm applying this you'll see that [Music] this is this is not let me see okay so this is offsetted with uh with one so i will need to do so let me see if this will work so left it's gonna be zero and let me see the pagination let me debug it why not background color red okay so this this one you see the problem was that i i didn't actually apply the position absolute so if i'm i thought that i was i added it but it seems that not so i'm not playing a position absolute and it's gonna start from left zero which is the default one i don't need it actually so it's it's gonna it's gonna align with the first item because it has the same width and height and and now when i'm moving it it should it should properly display the the imagination yes so this is this is how we can also play around with for example the description here so if you'd like to be more like this one can be like 0.1 and we will have one even more animation going on here and also this can be 0.7 and we'll have even more more movement on the screen that was it guys i think thank you so much for staying with me so long i hope that this wasn't a long tutorial for you and it was pretty easy to follow if you have any comments or any any issues with it please please leave one down down here in the comment section i'll i'll be more than pleased to to help you out thank you so much uh don't forget to subscribe smash the like button see you in the next video thank you so much guys

Channel: Catalin Miron

Views: 39,127

Keywords: react native advanced animation, react native flatlist animation, react native animation, react native carousel animation, react native animation tutorial, react native flatlist, React native flatlist horizontal scroll, React native beginner to advanced, react native animation interpolate, cool react native animations, react native tutorial, react native tutorial for beginners, react native flatlist pagination, react native, react native parallax scroll, awesome react native

Id: cGTD4yYgEHc

Length: 36min 34sec (2194 seconds)

Published: Fri Jul 24 2020