Scrollmagic Scenes on top of Pinned Scene

[hansondodge 2 Likes (Newbie)]

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

[hansondodge 2 Likes (Newbie)]

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();

 

[PointC 8,599 Likes (Superhero)]

Thanks for sharing your solution hansondodge.

 

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

 

Happy tweening.