Tween not easing with ScrollMagic in React

[jaacked]

Hi everyone!

 

I'm trying to ease a progress bar filling animation but when it gets triggered it jumps straight to 100%. I want the animation to be triggered only once. I'm using react-scrollmagic and react-gsap. Progress bar is from Bulma framework.

This is my code:

<Controller>
<Scene
    pin={false}
    reverse={false}
    indicators={true}
    triggerElement= "#trigger1"
    duration={0}
>
        <Tween staggerFrom={{ value: 0, ease: 'Expo.easeOut' }} staggerTo={{ value: 100, ease: 'Expo.easeOut' }} stagger={0.15}>
            <div id="trigger1"></div>
            <progress className="progress is-primary" value="0" max="100"></progress>
        </Tween>
        </Scene>
</Controller>

The same tween without the scrollmagic scene instead works perfectly.

 

Any ideas how to fix this?

[ZachSaucier]

Hey @jaacked and welcome to the forums. 

 

Based on the "smurf me example" I think you need to have a positive duration on the scene. Maybe this post can help as well.

 

Otherwise, I would recommend recreating your situation in something like StackBlitz so that we can play around with what's going wrong.

[jaacked]

Thanks for the answer @ZachSaucier i recreated my situation in StackBlitz: https://stackblitz.com/edit/react-unpcon .

 

I tried the solution in the post you linked and, without setting duration, the animation eases but starts immediately when the page loads.

[ZachSaucier]

Like I said, you should just add a positive duration to the scene: https://react-mufgv1.stackblitz.io