GSAP and scrollmagic horizontal scroll

[DD77 8 Likes (Newbie)]

I have this integrated GSAP and scrollmagic  scroll animation that is causing me once again headache.

I think the best way to animate the slides horizontally is by using Gsap rather then the scrollmagic Option "vertical: false".

Now, I'd like to find a way to trigger like scrollmagic does the slides and adding a class for each slide is-active.

 

I tried the below but doesn't really work.
 

 var headers = ["#section01", "#section02", "#section03", "#section04", "#section05"];

headers.forEach(function (index) {
              
  // number for highlighting scenes
var num = index+1;

  // make scene
  var headerScene = new ScrollMagic.Scene({
      triggerElement: index, // trigger CSS animation when header is in the middle of the viewport 
      offset: -95
  })
  .setClassToggle('#section0'+num, 'is-active')// set class to active slide
   .addTo(controller);
});

Would anyone help me to achieve that please? 

Thanks,

D

See the Pen JQOGJe?editors=1010 by davide77 (@davide77) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Unfortunately, ScrollMagic isn't a GreenSock product and we don't support it here. We really try to keep these forums focused on GSAP-specific questions. It looks like the ScrollMagic author does offer paid support which you can learn about at https://support.scrollmagic.io/. 

 

If you have any GSAP-specific questions, we'd love to help. Good luck with your project!

[Visual-Q 586 Likes (Leader)]

A solution without additional scrollMagic

 

It's not very elegant looking with the verbose  callbacks but here is a gsap solution that appears to work. 

 

It uses callbacks that pass the desired slide index and a function that loops through and adds or removes class. You could also use the function to trigger secondary animations using the index that is passed to it.

 

See the Pen ZdaxXQ?editors=1010 by Visual-Q (@Visual-Q) on CodePen