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?