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 Kit

17 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 ↓
  5. Gray

    I appreciate so much this detailed tutorial. It helped me in building a ScrollMagic website for the first time, which you can see at http://moda.studiok40.com. I’m having trouble with the site “jittering” on tablets and wondering if that’s why it seems you turned off the scrollmagic all together for viewing the site on mobile devices, via a simple “if (!Modernizr.touch) {” conditional at main.js on line 77.

    When I download your src files, and make the ScrollMagic timeline available on touch devices as well, I experience the same jitteriness.

    I’d love to have the power of touch available. Any ideas on how to get around this issue?

    Many thanks

    Reply ↓
  6. Faiz Rizvi

    Hi Petr,

    Thanks for awesome article on scrollmagic. With the help of this article I am trying to develop website by referring this website https://www.urbanvillageproject.com/, I have almost done except two thing,

    1. How can I calculate content length for each section because in mobile, content height will increase, So how can I calculate content height?

    2. How can I trigger on anchor link, like in the reference website.

    Thanks in advance.

    Reply ↓
        1. Petr Tichy Post author

          Hi Faiz, you can calculate a height of DOM element using JavaScript – https://www.w3schools.com/jsref/prop_element_offsetheight.asp.

          And the page simply scrolls down to a specific point to reveal the card so I am not sure how to help with that, but I hope you understand that I am not able to help everyone with their own project.

          Hope you found the article useful.

          Reply ↓
  7. fleague

    Hi Petr,

    May I know why this demo didn’t work on mobile?
    Is there any chance to make it work on mobile?
    Pls advise.

    Reply ↓
  8. Dominique

    Dear Petr,

    I found your demo really exciting. However I was not able to join an online course (ScrollMagic 101) and the script in the main.js file is minified, so barely unreadable. Would you have another version ?

    I know you now recommend using ScrollTrigger but it’s a whole new world and I couldn’t find a nice tuto starting from scratch, especially for my use case (pictures scrolling to a certain point, then pinned, then scrolling again).

    Thanks a lot

    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.