Jump to content
GreenSock

hansondodge

Scrollmagic Scenes on top of Pinned Scene

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone,

Thanks in advance for your help. I've gotten pretty familiar with GSAP/Scroll Magic over the past year or so and have used it on many projects. This is the first time I've been unable to get things working via troubleshooting/docs... so hopefully it's even possible. 

I'm trying to create an interactive timeline that will trigger new slides whenever you reach the next "period/year". However, the timeline has to remain pinned as you scroll. The functionality isn't quite there yet, but I've added indicators to show the issue I am having. Whenever you scroll it pushes the individual scenes down. Is there anyway around this? 

What I've tried so far: 
• Adding two controllers, one for the pinned scene, and another for the individual period scenes. No luck.
• Using the "pushFollowers: true" setting on the pinned scene. No luck. 
• Using start and progress callbacks combined with bloated math programming - but it felt hacky and ultimately will be too hacky for a live production site. 

Thanks again! 

See the Pen OWoLRY by hunterruth (@hunterruth) on CodePen

Link to comment
Share on other sites

I solved my issue by creating a fake duplicate markers below the timeline. Basically it wasn't working because the individual scenes weren't moving so they were never being activated. Now for every marker I created a div that is the height of the window, and made sure the pinned timeline doesn't push them forward. 

 

function setupAnimations() {

        var progress = $('.fill-bar'),
                show = new TimelineMax()
                .set(progress, {scaleY: 0, transformOrigin: "center top", ease: Power0.easeNone})
                .to(progress, 1, { scaleY: 1, transformOrigin: "center top", ease: Power0.easeNone});

        var timeline = new ScrollMagic.Scene({
                    triggerElement: "#timeline",
                    duration: $(window).height() * $('.period').length,
                    triggerHook: 0
                })
                .setPin("#timeline", {pushFollowers: false})
                .setTween(show)
                .addTo(controller);

        thing.each(function(index, elem) {

            new ScrollMagic.Scene({
                triggerElement: elem,
                triggerHook: "onLeave",
                offset: $(window).height() * -1
            })
            .addTo(controller)
            .addIndicators({name: "period marker"});
        });

}
setupAnimations();

 

  • Like 2
Link to comment
Share on other sites

Thanks for sharing your solution hansondodge.

 

... and thank you for being a Club GreenSock member. It's greatly appreciated.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×