Reveal elements on scroll — Webflow interactions and animations tutorial

here's a page as we scroll down the page we can see that as the top of each element is scrolled into view an animation is triggered they animate in and become fully visible you can do this on any element you can do this on headings you can do this on sections but today we're going to build this example and we'll do it in three steps will create the trigger so the animations triggered on scroll will create the animation which we can reuse so we're not building over and over and over and over and we'll apply that animation to the other elements if we have time we'll do a sentence diagram on this heading and count the verb noun pairings let's start with the trigger and we'll click this first piece here and go down to make sure we have the project link selected but really all we're selecting is the element that's becoming a trigger the element that we want triggering the animation over in interactions all we have to do on the element we have selected we'll choose our trigger scroll into view we want the animation to occur when the element Scrolls into view alright that's the trigger let's keep moving and do the animation now we can always do multiple animations here one when the trigger is scrolled into view and another one it's scrolled out of you but in this case we're going to click in and start an animation only when the element is scrolled into view will create a timed animation we can name it something like move up on scroll hit enter we can start by adding a move transform we want the element to start 50 pixels down from where we see it now so we can just type in 50 pixels and move it down the y-axis if we hit play now it'll actually animate down so of course we want to set this position 50 pixels down as the initial state where it's starting keep in mind that the animation we're building is only applying to the element that's selected let's do the same thing with opacity we'll go in and adjust the opacity we want it to start at 0% same thing here let's make sure we set this as our initial State okay so we've set two things up for our initial state it's going to start 50 pixels down and it'll start at 0% opacity now all we have to do is add the second half of our animation let's add a move and we'll specify that we want our Y position to go back to zero pixels back to the origin will see that position change on the canvas we can even go in and change the easing from linear to maybe a more dramatic ease out curve maybe increase the duration to a full second up from 0.5 let's add one more this time for opacity and we'll want to ensure this is cranked up to 100% same thing here with easing let's choose ease out Quint and of course let's match the duration we set a moment ago on move to a full second something to note here we can hold down command or control and select multiple actions multiple keyframes at the same time and we can affect things like duration and easing without having to edit one by one and another thing since we'll be reusing this and since we might want to build other parts of our animation let's make sure we're affecting all elements with this class applied the same one we're using on our link block and let's also make sure that triggering or scrolling into view only affects the children of the trigger that way we're not triggering random stuff on other parts of the page if we go in and preview our project and scroll down even a tiny bit it functions just as we'd expect that's creating the animation now let's quickly apply that animation to the other link blocks let's close out of our animation and simply apply this to all elements with the same class that's it really go to preview mode let's try scrolling and it works beautifully now maybe these seem to be triggering a bit soon or we're missing the animation because it starts when the link blocks are off the screen we can go over and create an offset we add some offset here it means this trigger the link block will trigger the animation when it's scrolled up 10% from the bottom of the viewport so we set our trigger we built the animation then we applied that animation to other elements that's creating an interaction between these triggers and each of their animations which reveal the content

Channel: Webflow

Views: 159,544

Keywords: web design, webflow, responsive web design, graphic design, web development, cms, content management system

Id: aoGMFbWJ2aU

Length: 3min 58sec (238 seconds)

Published: Wed May 16 2018