A Simple ScrollMagic Template With Pinned Sections

A Simple ScrollMagic Template With Pinned Sections

Have you ever wanted to pin a section and be in full control of the animation inside?

Today we’ll create a template with two pinned sections and simple timeline for both of them.

What you will learn from this template?

5. A Simple ScrollMagic Template With Pinned Sections

How to pin a section with ScrollMagic?

VIEW DEMO DOWNLOAD FILES

HTML and CSS

We will be updating the text of our h1 and p inside of the first and second .slide as the user scrolls down the page and for that we will need the GreenSock TextPlugin.

We include the reference right after the TweenMax at the bottom of our html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/TextPlugin.min.js"></script>

The rest of the HTML can stay the same as in the previous ScrollMagic template.

How to pin a ScrollMagic section?

A Simple ScrollMagic Template With Pinned Sections

The first section is pinned when the top of it reaches the top of the viewport.

// SCENE 6 - pin the first section
// and update text

var pinScene01Tl = new TimelineMax();

pinScene01Tl
    .to($('#slide01 h1'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, 1.5)
    .to($('#slide01 section'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, 1.5)
    .set($('#slide01 h1'), {text: "Rock Climbing"})
    .set($('#slide01 p'), {text: "Remember that time spent on a rock climb isnt subtracted from your life span."})
    .fromTo($('#slide01 h1'), 0.7, {y: '+=20'}, {y: 0, autoAlpha: 1, ease:Power1.easeOut}, '+=0.4')
    .fromTo($('#slide01 section'), 0.6, {y: '+=20'}, {y: 0, autoAlpha: 1, ease:Power1.easeOut}, '-=0.6')
    .set($('#slide01 h1'), {autoAlpha: 1}, '+=2');

var pinScene01 = new ScrollMagic.Scene({
    triggerElement: '#slide01', 
    triggerHook: 0,
    duration: "250%"
})
.setPin("#slide01")
.setTween(pinScene01Tl)
.addTo(controller);

#slide01 is the triggerElement and the triggerHook is set to the top of the screen.

pinScene01Tl is the timeline containing our timeline sequence.

Firstly we are hiding the original text, changing it to a new text and then fading the new copy in.

Pretty simple, huh?

How to set up durations and delays within the timeline?

Create a GreenSock timeline for ScrollMagic scene.

You might be wondering how did we come up with the duration of the tweens.

And do they really matter? Good question.

My suggested approach:

  1. Create the timeline first (without assigning it to the controller).
  2. Work out the times and offsets at a realtime speed.
  3. Once you are happy with it, attach it to the scene and play with the scene duration to make it feel good while scrolling.
  4. The “duration” values of the individual tweens will be fractions relative to the ScrollMagic scene duration.

Hope that makes sense.

How to control the duration of the pin?

The second section has a slightly longer duration, but the overall approach is the same.

// SCENE 7 - pin the second section
// and update text

var pinScene02Tl = new TimelineMax();

pinScene02Tl
    .to($('#slide02 h1'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, 1.5)
    .to($('#slide02 section'), 0.2, {autoAlpha: 0, ease:Power1.easeNone}, 1.5)
    .set($('#slide02 h1'), {text: "The Memories"})
    .set($('#slide02 p'), {text: "You never climb the same mountain twice, not even in memory. Memory rebuilds the mountain, changes the weather, retells the jokes, remakes all the moves."})
    .to($('#slide02 .bcg'), 0.6, {scale: 1.2, transformOrigin: '0% 0%', ease:Power0.easeNone})
    .fromTo($('#slide02 h1'), 0.7, {y: '+=20'}, {y: 0, autoAlpha: 1, ease:Power1.easeOut}, '+=0.4')
    .fromTo($('#slide02 section'), 0.6, {y: '+=20'}, {y: 0, autoAlpha: 1, ease:Power1.easeOut}, '-=0.6')
    .set($('#slide02 h1'), {autoAlpha: 1}, '+=2.5');

var pinScene02 = new ScrollMagic.Scene({
    triggerElement: '#slide02', 
    triggerHook: 0,
    duration: "300%"
})
.setPin("#slide02")
.setTween(pinScene02Tl)
.addTo(controller);

This time the durations is set to 300%, that is 3x the viewport height.

To start the fading out of the original text slightly later, I have added the first two tweens to an absolute position of 1.5s, that means that the timeline has 1.5 seconds at the start without any movements.

It’s a little trick on how to delay the start of these tween, but we could achieve a similar result by adding delay: 1.5 to the whole timeline.

How to control the duration of the ScrollMagic Scene?

Read more about positioning tweens on a GreenSock timeline.

Conclusion

And that’s it. This wraps up our 5 days with ScrollMagic.

I hope you’ve learned something new about ScrollMagic and GreenSock.

Just remember, these are only templates.

Creating a template that would work with YOUR images, content, idea and story is impossible, mastering ScrollMagic is the key.

Take these templates apart, explore the code and use the knowledge to create your own awesome project from scratch.

I cannot wait to see what you come up with.

And if you have any questions or feedback please get in touch in the comments.

Other ScrollMagic and GreenSock Tutorials

Download Free Toolkit

All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.

100% Privacy. Guaranteed! Powered by ConvertKit

9 thoughts on “A Simple ScrollMagic Template With Pinned Sections

  1. Norman Dubois

    Hi Petr,

    this demo is amazing!!!
    I love the way you’re working with this nice background images 🙂
    Thanks so much for sharing your knowledge with us and your work!!
    I’m loving it! 🙂
    You’re amazing!

    Reply
    1. Petr Tichy Post author

      Thanks Norman, if you come across any creative use of scrolling animations on the web, let me know.

      I’ll try to break them down in my future tutorials.

      And thabks for your support Norman, it means a lot!

      Reply
      1. Norman Dubois

        You’re welcome Petr!
        I’ll let you know when I see some nice pages using it! 🙂

        It’s a matter of course to support you!
        Your posts & videos always makes my day! I really enjoy watching/reading them! 🙂

        Reply
  2. Cat

    I love your tutorials! Very easy to follow. I like deconstructing the main js file but the ones for this series are gulped (or minimized), and it’s harder to follow. Do you have the js files for these “ungulped”?

    Reply
  3. Jason Black

    Any reason you used css animation for the intro photo zoom…

    I have been pulling my hair trying to get gsap to work smoothly on something similar. I thought I had it working a while back but seemed something changed. Not sure if a gsap update changed something or I changed something. But seems SlowMo should be perfect for an image zoom, but sadly nothing I have tried works well. The css is just so much smoother.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.