apply ease effect to each single scroll animation

[oliver1999]

Hi, I'm trying  to use ScrollMagic and GSAP to rotate a specific element and everything is fine until I add an ease animation with the following code :

    tl.fromTo(rotateGSAP.current.rotation , 

      {

        y:0,

      },

      {

        y:40,

        duration:400,

        ease:'Power3.easeInOut'

      }

    );

the problem is that the effect applies to the whole scrolling process while I want with each single scroll I do the animation goes with an ease effect.

my code in React:

  useEffect(() => {

    ScrollMagicPluginGsap(ScrollMagic, gsap);

    const tl = new TimelineMax();

    TimelineMax.defaultOverwrite = false

    var controller = new ScrollMagic.Controller({ refreshInterval: 1 });

    

    tl.fromTo(rotateGSAP.current.rotation , 

      {

        y:0,

      },

      {

        y:40,

        duration:400,

        ease:'Power3.easeInOut'

      }

    );

 

    const scene = new ScrollMagic.Scene({

      triggerElement: ".startBottle",

      triggerHook: "onLeave",

      duration: 5930,

    })

    .setTween(tl)

    .addTo(controller)

    .reverse(true)

 

  })

 

[OSUblake]

Hi oliver,

 

ScrollMagic isn't a GSAP product and we don't really support it on this forum. We have our own version, ScrollTrigger, which can do everything ScrollMagic can, plus a whole lot more.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

It also looks like you're using an older syntax of GSAP. It would be best to update to the latest syntax. Please check out our Migration Guide.

 

If you need any more help, please provide a minimal demo. Here's a starter pen for React that you can fork.

 

See the Pen OJmQvLZ by GreenSock (@GreenSock) on CodePen

 

 

[oliver1999]

5 hours ago, OSUblake said:

Hi oliver,

 

ScrollMagic isn't a GSAP product and we don't really support it on this forum. We have our own version, ScrollTrigger, which can do everything ScrollMagic can, plus a whole lot more.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

It also looks like you're using an older syntax of GSAP. It would be best to update to the latest syntax. Please check out our Migration Guide.

 

If you need any more help, please provide a minimal demo. Here's a starter pen for React that you can fork.

 

 

I used ScrollTrigger but it had a problem

It didn't work except when I changed the code and saved it and went back to the browser (I think it needed an update)
my code to ScrollTrigger:

gsap.registerPlugin(ScrollTrigger)

 

  useEffect(() => {

    

    gsap.to(".bottleModel", {

      x: 499  ,

      duration:1,

      scrollTrigger: {

        trigger: ".s2",

        start:"top top",       

      } 

    });

  }, [])

 

 

[OSUblake]

ScrollTrigger works with CSS and HTML, so it's nearly impossible to tell what your code snippet is supposed to be doing.  Can you please make a minimal demo showing the issue? You can fork the demo I posted above it you need to use React.