[Tween not easing with ScrollMagic in React]

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.

[Tween not easing with ScrollMagic in React]

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?