hansondodge

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

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!