I'm using react-gsap and react-scrollmagic and am trying to fire a function when the animation completes. It works well when I scroll down, however, when I scroll up the function doesn't fire. I couldn't find any reference to this problem in react-gsap documentation. Is there any solution to this?
<Controller>
<Scene triggerHook={0} duration={duration} pin={{ pushFollowers: false }}>
{(progress) => (
<Timeline totalProgress={progress} target={<p>wohoo</p>}>
<Tween
from={{ opacity: "0" }}
to={{ opacity: "1" }}
onStart={() => console.log("Complete!")} // Works only when scrolling down
onComplete={() => console.log("Complete!")} // Works only when scrolling down
/>
</Timeline>
)}
</Scene>
</Controller>
After hours of digging I found that I can use onReverseComplete callback function like so:
<Tween
from={{ opacity: "0" }}
to={{ opacity: "1" }}
onComplete={() => console.log("Complete!")} // Works when scrolling down
onReverseComplete={()=>console.log("Complete!")} // Works when scrolling up
/>