7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 36 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 Scrollable GSAP Animations

In this lesson, you will learn how to create a simple GSAP animation and control its playback with the scrollbar using the ScrollMagic library.

Related Links

1.Introduction
1 lesson, 00:40

1.1
Introduction
00:40

2.Scrollmagic Setup
2 lessons, 07:18

2.1
Using ScrollMagic
03:35

2.2
Controllers and Scenes
03:43

3.Scroll Events with Scrollmagic
3 lessons, 26:59

3.1
Pinning an Element
09:38

3.2
Pinning a Menu
07:03

3.3
Scrollable GSAP Animations
10:18

4.Conclusion
1 lesson, 00:36

4.1
Final Thoughts
00:36


3.3 Scrollable GSAP Animations

Hello and welcome back. In this lesson we're going to add some animation to our ScrollMagic website. And we're gonna do so using the GreenSock animation platform which we've already discussed before. Now if you've never used GreenSock before, you can check out some of my other GreenSock tutorials on tutsplus.com. I have a couple of courses that I've created specifically for animating with the GreenSock platform. So if you want to get an idea of the types of animations you can create using GSAP, you can check out those courses. But in this lesson we're just gonna do a very simple animation. And we're going to pin that animation to the second slide. So what we see here in our browser window is very similar to what we've seen before, we have three different slides. If we scroll down to our second slide, you'll notice that our second slide is pinned in place and it's been in place for quite a while. You can see the scroll bar moving up and down over here on the right. And once it gets close to the bottom, it moves on to the third slide. So let's take a look at the code that we've added so far for our JavaScript. We've created a controller using ScrollMagic. And then after that controller we've created a new scene, in that scene one thing you'll see missing that we used before was the option inside this setPin to push the followers down to make any of the content that shows up after that slide pushed down below it, so that it doesn't automatically scroll up on top of it. So, that's gone now and that's why our third slide is not scrolling in on top of the second slide. Instead our second slide is just staying in place for a while. And then once we get to the end of this duration here of 2000 pixels, then our third slide is gonna animate on or scroll on as our second slide scrolls off. So now what I wanna do is within this duration here, I want to create an animation. Now to make this work, we need to make sure that we have an extra file. Let's go to our settings here, and we've looked at this briefly before, but if we go to our JavaScript tab, it's this last file here, this animation.gsap.min.js. This is not the TweenMax or GreenSock plug in, that's this one up here. This is the GreenSock library up here, in under TweenMax. Down here at the bottom, this is actually a plug in for scroll magic. This allows us to use the GreenSock animation platform within the ScrollMagic. It allows us to tie a TweenMax animation to a scene that we create using ScrollMagic. So now that we've got all of those there, you can find the the URL for this particular opening pin in your course notes for this lesson. And once you open that up, go ahead and click on Fork to create a new copy of it. And we'll add all of our changes to this new copy. So, again, it's very similar to what we've seen before, except now our second slide is just pinned in place for a while. And then towards the end, our third one comes into play. So what I wanna do now is to create a tween. And I'm gonna go ahead and create that tween above our controller. So I'm just gonna nudge everything down a little bit, and all of what we're about to do is going to affect our second slide here. So if we jump into our HTML, we can see our second slide has a class of slide02. And what I actually want to animate is the title or the text inside this slide, which has an id of slide02-title. So that's what we're gonna be animating. So let's jump back into our JavaScript and the first thing I wanna do is I want to set our starting position for this animation. And we could do this in jQuery by just changing some CSS properties, but instead I'm gonna use TweenMax to do this which is part of the GreenStock animation platform. And I'm gonna do a TweenMax.set method. The set method allows us to set a few properties in place without actually animating them. So the first thing we need inside the parentheses for this set method is a CSS selector for the item we want to set values for, which is going to be our second slide title which has an id. So we're gonna use the pound character, has an id of #slide02-title. So that's the item we're gonna set a couple of properties for. And then we need to create a JavaScript objects. So I wanna say comma space, and then opening and closing curly brackets to create that object and, as always, I'm going to nudge that closing curly bracket down a couple of lines. And I'm going to add a scale to our item, and I'm gonna set it to a scale of 3. Scale is just one of the many properties that you can change in TweenMax or in GreenSock. And if we scroll down, we can see that our text is now a lot larger. So we're gonna set scale to 3 by typing scale: 3 and then I'm also gonna make it invisible by default. So I'm gonna type comma space and then we're gonna set opacity equal to 0. And then we should see that text to disappear, whenever our page reloads. So now when our second slide comes into play, we can't see it at all. So what we're gonna do now is we're gonna create an animation, so that once we slide or scroll down, and then continue scrolling with our second slide pinned into place, we'll see that our scroll bar will be tied to this animation we're gonna create. And we're going to create this animation of our text fading in and and shrinking back down to its normal size. So we're gonna do this using a two animation, we're going to animate from a certain value to a certain value. And the from value is simply where it is right now, from a scale of 3 to an opacity of 0. So let's add a semi-colon to the end of that TweenMax.set method. Then let's skip a couple of lines and create the actual animation. So I'm going to create a variable for this, and we're going to call it animation. And we're going to set this equal to a new TweenMax. So we just have the word TweenMax.to, and then inside parentheses, this is gonna look somewhat similar to our TweenMax.set. First of all, we need the item that we're going to animate which is gonna be the same item, so #slide02-title. And then before we get to our JavaScript object, the next thing we need here is a number representing the duration of the animation. Now, in this case, the duration of the animation doesn't really matter because we're going to tie this animation to the scroll bar. So I'm just gonna put an arbitrary value of 1 here to say that this animation would, by default, just last one second. So we'll type comma space, and then we need a JavaScript object. So I'm gonna type a set of opening and closing curly brackets and will nudge that closing curly bracket down a couple of lines. And then we're gonna enter in all the values that we want to animate. Well, we want to animate this scale, we're gonna animate it back to a value of 1, that will set it back to its original value. Then we're going to animate the opacity as well at the same time and we're going to set it back to a value of 1, so that it's fully opaque again, so that we can see it again. So let's put a semi-colon at the end of that statement. And right now, this doesn't really do anything for us, if we were to save this, and then reload the frame, and scroll down a little bit. We can see that it has already animated into place. If we would have refreshed it quicker, and scroll down quick enough, we can see that that animation is in fact occurring, but it's occurring automatically as soon as the page loads. That's now what we want, we want that animation to be tied to our scrolling so that once this animates on or once this second slide scrolls into place, then our animation will start occurring over the course of the duration of the rest of the scroll before we get to the point where it moves on away from that scene. So doing this is actually very, very easy it just requires a little bit more on the end of our scene which we've created down here. So we've said scene.setPin and so we've pinned it in place over the course of this duration of 2000 pixels of scrolling. And then after setPin but before that closing semi-colon there, I'm gonna say .setTween, and then inside parentheses here we're gonna type in the name of the animation that we're going to tie to this particular scene, and the animation simply has a name of animation, that's what we called our variable up here. So now we've attached this animation to our scroll magic scene and if we scroll down now we'll see that that animation has not occurred yet because we do not see our text to there. So if we grab our scroll bar and start scrolling, then once our second slide reaches the top of the stage and we keep scrolling, we'll see that animation occurring. And it occurs over the course of 2000 pixels of scrolling and then once we reach 2000 pixels it just moves on to the next slide. So let's make that just a little bit more interesting, right now it's just kind of slowly fading on, let's just make it bounce a little bit. So we'll go back into our animation properties here, after opacity equals 1, will type comma space and we're gonna call on the ease property. So we will type ease colon space and then I'm gonna use a TweenMax easing equation called Bounce.easeOut. So now when we scroll down, let me grab this scroll bar, we can see that it's actually bouncing into place instead of just slowly fading in, and we can make it all happen backwards just by scrolling back up. So, every frame of that animation is tied to our scrollbars, we can move our scroll bar up and down to move backwards and forwards throughout that animation. And that is kind of the nuts and bolts of how the ScrollMagic framework works. So thank you so much for watching. Let's save our work and we'll move on with the next video.

Back to the top