Flawless Sticky Scroll Interactions in Webflow

one of the hardest parts of creating sticky scroll interactions in web flow is getting the interaction to finish before the sticky track starts leaving view we could try to eyeball sort of an offset here of exactly where we want it in based on a percent of the track height and that could mostly work but it usually falls apart whenever we go to responsiveness so in this lesson we're going to learn how to build a Flawless sticky scroll interaction in web flow where the track starts and ends at exactly the right place so let's add a div and give it the class of sticky wrap inside that we'll add another div and give it the class of sticky trigger while we're scrolling past this our interaction will play we can give it any height we'd like I'll set 300 VH of scroll distance in this case and I'll also just throw on a border for now to the trigger so we can see where it starts and ends now we want our animation to start playing when the top of our trigger element here reaches the top of the screen and we want it to end playing whenever the bottom of the trigger element reaches bottom of screen but this bottom of trigger bottom of screen isn't a trigger point we have access to with webflow interactions our only endpoint is when this trigger goes completely out of view so to fix that we can grab our sticky wrap and we can give it some bottom padding of 100 VH the full screen height so that we can make our interaction start when the top of this trigger hits top of screen and ends when the trigger goes completely out of view but we'll still have this wrap here in view so inside the trigger let's drop another div and we'll give this the class of sticky track and we want to set the track to a position of absolute to cover the full width and height of its parent so it goes all the way to the bottom of the wrap that means our wrap here will need a position of relative and that way this track goes all the way to the very bottom ignoring the trigger essentially and inside the track we can finally have our sticky element and we'll give this a position of sticky and it'll be zero pixels off the top so it's stays with us while we scroll and let's give it a height of 100 VH so it fills the screen height inside that we can have any elements we'd like I'll add in an image in this case and we can set up our interaction so with the trigger selected let's head to interactions create an element trigger of while scrolling and view we'll affect the class and we'll start an animation here we'll create a new animation and we'll call this scrolling we can select any elements we like to animate like this image here I'll just throw on a scale we'll animate it from a scale of 0.5 down to a scale of one so if we were to save this now notice how our interaction starting while the trigger is coming in view we want it to wait till the trigger is fully visible so we'll just save this and change our start point to when trigger is fully visible our end point is going to be when trigger is fully invisible to start exiting here uh this first point would be whenever this top of this trigger starts to go out past the top of the screen so that's not quite what we want there we'll leave it set to fully invisible so let's preview this and see how it works our trigger comes into view our scroll interactions playing as soon as our trigger's fully out of view our interaction's finished and we're able to scroll in to the next section

Channel: Timothy Ricks

Views: 16,753

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive

Id: ZsnqiVqk0sU

Length: 3min 15sec (195 seconds)

Published: Fri Jan 05 2024