ScrollTrigger auto play in Storybook with React

[Droxic]

Hello!

 

We have a React project and we use Storybook to document our react components. We use ScrollTrigger to animate some parts of one of our components. However we faced a strange issue with it in the context of Storybook. Let me try to describe the issue step by step:

- I select the ScrollTrigger component in Storybook - it works fine. I scroll a bit;

- I select another component that doesn't use ScrollTrigger;

- I go back to the same ScrollTrigger component - it scrolls automatically to the position where I left it before.

 

What is also interesting is that if I scroll to another position then it doesn't 'remember' the new position. Every time I visit the ScrollTrigger component it always plays to the position where I left it for the first time.

 

I am sorry but it will be very difficult for me to create a pen. So here is some parts of my code that are related to the issue:

This is the initialisation:

const tl = gsap.timeline({
  scrollTrigger: {
    id: 'newsHeroScrollTrigger',
    trigger: mainContainer.current as Element,
    pin: mainContainer.current as Element,
    start: "top top",
    end: "+=1700",
    scrub: 1.25,
    invalidateOnRefresh: true
  }
});

I also use matchMedia:

ScrollTrigger.matchMedia({
    'min-width: 600': () => initialiseScrollTrigger(false),
    'max-width: 600': () => initialiseScrollTrigger(true)
});

And here is the useLayoutEffect where I initialise the animations and the clean on unmount:

useLayoutEffect(() => {
    defineAnimations(animationRefs, themeContext, animationUpdateFunction);
    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
      ScrollTrigger.clearMatchMedia();
    }
  }, []);

defineAnimations function calls ScrollTrigger.matchMedia. The actual initialisation is inside initialiseScrollTrigger function.

 

Thank you in advance!

[Droxic]

I found what was the issue - I need to also kill the Timeline instance. I expected that ScrollTrigger.kill() will also kill the timeline but it seems it doesn't work like this.

It means I need to be very careful because I guess this can be a possible memory leak problem.

[OSUblake]

Hi Droxic!

 

This sounds like an issue that was just resolved. Would you mind testing this package out? You can npm install it.

https://assets.codepen.io/16327/gsap-beta.tgz