Scroll Trigger Tutorial - 4 - Scrub

hey there this is greg fine the code creative back for another scroll trigger video this one the fourth in the series on scroll trigger is going to focus on the scrub property now if you haven't seen the other videos in the series i would highly recommend checking those out first but either way this one should be pretty concise because the scrub property is pretty simple but i would like to show a few practical examples of how scrubbing can be used in an effective way so what do we mean by scrubbing well let's start out by seeing what we had previously to draw contrast so previously we defined this narrow range where we have our scroller start and our scroller end and if we come and scroll down and our trigger passes the scroller start even if we let go that animation continues to play but what scrubbing is going to do it's going to allow us to lock the animation to the scroll bar position so let's set it up and give it a try so coming from the code that i had previously in app.js i'm first going to do some cleanup i'm going to get rid of these comments on lines 11 and 12. i'm also going to simplify the toggle actions keywords i'm just going to use restart and i'll set the others all to a value of none and then i'm going to increase the range between the start and the end properties i'll set the start to top and 80 percent and i'll set the end to top and 30 then i'm going to save and let's take a look at our markers now in the browser so now with those new percentages set you can see that we have a wider range between the scroller start and the scroller end and i did this so we'd have more room to play around with the scrubbing now in the code in the scroll trigger object enabling scrub is super simple all we have to do is simply give a scrub property and we can give a boolean value so if we want scrubbing to occur we can set this to true and now i'm going to save and let's go to the browser and play around with this for a second so now i'm going to start scrolling once again and notice how when the trigger passes the scroller start the animation does start but if i let go of the scroll bar it stops and then if i continue scrolling the animation continues and let's see what happens if i go in reverse if i scroll up watch that animation go back in reverse so you can see here that the animation's progress is directly tied to the scroll trigger's progress now there's one more thing that we can do in setting the scrubs value and that is we can give it a number duration a number in seconds which is going to allow us to smooth out the scrubbing let's try it out and see how it works so for the scrub properties value instead of simply giving it a boolean value of true let's give it a numeric value let's try something maybe a little extreme we'll do four so this will be four seconds four seconds of smoothing now back in the browser if i give it a try we should see that the scrubbing feels a lot smoother not quite as stiff as it did before and you might have to give that a try on your own to see how it feels and now for some real world examples i'm on this site called takeboost.com and check out what they're doing here with this scrub scrolling check out that vitamin bottle as i scroll down and how it turns in lock with the scroll bar so i can go back and go down again and so here they're using scrubbing with the scroll bar to allow the user to really look at the bottle and see the details of it see the supplement facts and so on and here's another example this one for the google pixel 5. there's a lot of scrub scrolling here you'll see it first of all right as you start scrolling down the site you can see if i go down and then i go up again kind of lends a playfulness to the user interaction and then if i continue scrolling down finally here you get to this view of the phone and you can see depending on where my scroll position is it's scrubbing this zoom effect in and out so it really gives the user this feeling of playing around with the phone and zooming in on this movie and then as a third example here's a site called bubbledigital.com and this is a very playful one notice how the scroll bar is used to scrub the animation of this bubble so as i scroll down the page there's that bubble again you can see that the bubble follows the scroll bar if i scroll back up it goes back in reverse and so on and so forth down the page and go down go back up so it's a really cool effect as we follow this bubble down through the page and then finally get down here where it says breakthrough and you can see that bubble pushing through all those other bubbles so that's just a fun playful example of scrubbing so thanks for checking out this video on scrubbing with scroll trigger if you enjoyed the video if you feel like you got some value out of it please give the video a like and subscribe to the channel and i'll see you next time

Channel: The Code Creative

Views: 3,296

Rating: 5 out of 5

Keywords: gsap scrolltrigger, gap scroll trigger, scrolltrigger, scroll trigger, greensock scrolltrigger, greensock scroll trigger, animate on scroll, scroll animation, scrollmagic, scroll magic, scrollmagic tutorial, scroll magic tutorial, greensock, scroll trigger tutorial, scrolltrigger tutorial, scrub, scrub animation, scrolling scrubbing, scroll scrub, scroller scrub, scrub on scroll, the code creative, gregg fine, web development, web development tutorial, coding tutorial

Id: SCfZBtedicw

Length: 5min 23sec (323 seconds)

Published: Sat Nov 07 2020