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.

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!

Hello Yes, I moved it to my src directory. Thank you again!

Hello Jack, Yes, It works now. Thank you very much! But honestly I am not sure that I understand why It works now. And is this a good practice to just copy/paste the bonus plugin files in node_modules/gsap? Because I don't have actually defined dependencies for those files. This may cause future problems and confusion. What is the best practice actually? Maybe It is better to copy them somewhere in my src directory? Thank you once again.

Hello, I just downloaded the current version of gsap zip package. I am a Club GreenSock member and the package includes all the bonus plugins. In my project I want to use MorphSVGPlugin to do some SVG morphing. My project setup is based on npm/webpack/react. Normally to use the basic gsap API I just run : npm install --save gsap This works fine without any problems. However as being a part of the paid version of greensock, MorphSVGPlugin is not included in that npm package. So I decided to just copy/paste MorphSVGPlugin.js from bonus-files-for-npm-users to node_modules/gsap. Then in my react component I just import MorphSVGPlugin. Unfortunately It doesn't seem to work. Here is the code of my very simple react component: import React, { Component } from 'react'; import { TweenMax, MorphSVGPlugin, Expo } from 'gsap'; class MainButton extends Component { componentDidMount() { TweenMax.to(this.line1, 4, {morphSVG: {shape:this.diag1, shapeIndex:[0]}, ease:Expo.easeOut}); } render() { return( <div className="mainButton"> <div className="linesGroup"> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="30" height="24.04" viewBox="0 0 30 24.04"> <title>Shapes</title> <path id="line1" ref={path => { this.line1 = path; }} d="M30,2V6H0V2Z"/> <path id="diag1" ref={path => { this.diag1 = path; }} d="M27,21.21,24.21,24,3,2.83,5.83,0Z" fill="#fff"/> </svg> </div> </div> ) } } export default MainButton; When I run this in the browser I receive the following message in the Cosnole: invalid morphSVG tween value: [object Object] So I am not sure if this is a configuration problem with the packages or maybe It is an incorrect usage of MorphSVGPlugin. I tested my SVG morphing in Codepen and it works just fine. So I will be really grateful if someone can explain me how to use the bonus plugins (and particularly MorphSVGPlugin) in a npm/webpack/react project. Thank you in advance.