The Ultimate Flutter Web Scroll Animations

this website's scrolling effects are awesome so awesome in fact that we'll have to recreate some of it in particular I like this intro sequence as the text Scrolls the image zooms out when the text is out of the view the image Zoom stops and a new section pushes the image away this gives us some implementation guidance we know it's divided into three sections each section fills the entire screen Section 1 and 2 is overlaid and section 3 only starts to scroll when section 2 is scrolled out completely I created the basic UI so we don't have to waste any time on that I recommend you watch to the end and when we are done clone the starting project and do it yourself right now we have a basic list what we actually need is a list that allows you to modify the child's drawing position based on the scroll position this sounds like a job for the scroll transform view which you can find in the responsive Builder package let's install that quickly swap the list View to a scroll transform view then wrap each of the children in a scroll transform item firstly we need to move the text section so it's overlaid on the image we can achieve this by Shifting the second section up by the height of the screen in code we Supply an offset Boulder to the second section where we return an offset with zero in the X Direction and minus screen size dot height in the y direction now the text is in the right place but the image Scrolls away with it to fix that we Supply an offset Builder to the image that makes it sticky to make something sticky what we do is we offset in the y direction by an amount equal to the distance that the view has scrolled this keeps the image on screen all the time in code we Supply an offset Boulder we return the offset where x equals zero and for y we'll set it equal to the scroll offset this is looking better now for the scaling when we scroll from the beginning of the first section to the end of the first section we want the image to be 50 of its width and 80 percent of its height that means we can use the offset and the screen height to calculate a value between 0 and 1. we should probably cap it at 1 to ensure we only go from 0 to 1. let's check if our numbers are correct first we'll subtract fifty percent of the width and 20 of the height from the image and that looks good but it's not changing as we scroll so let's multiply the value of off-screen percentage with the amount that we are subtracting from the size nice that looks better but the image is shrinking to the top this one shrinks to the center instead of keeping the offset fixed at the top we should move it down as the height changes we know how much it's shrinking by so we can use it to calculate our transform let's update the offset Boulder and use the shrinkage amount for the height in there we'll copy the percentage of screen and we'll also create a new value called height shrinkage amount and use that same formula now we want to offset the image down down by half of the shrinkage amount perfect is that everything let's see text Scrolls image shrinks image moves okay so the section shouldn't cover the image it should push it away once the first section is out of view let's create a new value that tells us when to start moving the image we know that this is when the scroll offset is bigger or equal to the screen height let's also store the current on-screen offset value now since we know the offset here is exactly equal to the screen height we can simply move the image by the real scroll offset minus screen size height to apply this the Y value will change to check if we haven't started moving return the on-screen offset and if we have started moving we return the on-screen offset minus the scroll offset minus the screen height okay so now this works but it starts to push away the image a bit too late let's make our point to start moving the image 80 of the screen height instead which then also means that we need to deduct 80 of the screen height from the scroll offset let's see if that works okay perfect so how did I do in your opinion the original compared to the recreation let me know down in the comments below thank you for watching and I'll see you in the next one [Music]

Channel: FilledStacks

Views: 15,485

Keywords: flutter, hyperplexed, filledstacks animation, flutter animation, fireship flutter

Id: neRnM_SiTfA

Length: 4min 25sec (265 seconds)

Published: Fri Jan 20 2023