Jump to content
GreenSock

DD77

GSAP and scrollmagic horizontal scroll

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

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 7 months later...
@Visual-Q   
When the page has loaded we have such an attribute in the parent.
transform: matrix(1, 0, 0, 1, 0, 0);
When we start scrolling, the attribute changes to this.
transform: translate(-1.86449%, 0%) translate3d(0px, 0px, 0px);
Content is jumping.  How to solve this bug?
Link to comment
Share on other sites

@Dicom It seems that whatever is setting the initial state is not GSAP (it may be hand coded or set in the CSS). We recommend that you use GSAP to set all transforms, even the ones for starting out, for elements that you're animating. Besides that, a minimal demo of your setup would help us help you.

  • Like 1
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.
×