OSUblake

If I could get the problem to happen on CodePen, I could try to troubleshoot it, but it only happens for me on the embedded pen. Anyone else seeing this problem?

Hi @francescorm It's really hard to troubleshoot builds, and I'm not really familiar with require.js. Perhaps someone else with more experience with it can chime in. The gsap files inside the dist folder are umd, so they should work with amd. Have you logged out what gsap is? require([ "jquery", "gsap", "domReady!" ], function($,gsap){ console.log(gsap); });

I only see a problem in the embedded demo, showing a scrollbar at the bottom. Probably a css issue or something to do with running inside an iframe. When I open it up on CodePen it works fine. 🤷‍♂️

Hi remjx! Firefox is just slow, and there's probably not a lot you can do about that. Unrelated to performance, it's best to let gsap handle the transforms for you. circle pulse (codepen.io) For percentage x and y, use xPercent and yPercent. gsap.to(".foo", { xPercent: -100, yPerent: 25, x: 20, y: 100 });

Yep. Did you use the position paramater? Add them all at once. const master = gsap.timeline(); master.add([childTimeline1, childTimeline2, childTimeline3], 0); Or individually. const master = gsap.timeline(); master .add(childTimeline1, 0) .add(childTimeline2, 0) .add(childTimeline3, 0);

Yes, it can be very confusing, and I'm not aware of any good tutorials for it. Just something you have to get used to. They're pretty much the same. killTweensOf is useful if you want to kill more than 1, or just a certain property. useEffect(() => { const animation1 = gsap.to(foo.current, { x: 100 }); const animation2 = gsap.to(foo.current, { y: 100 }); return () => { animation1.kill(); animation2.kill(); }; }, []); // vs useEffect(() => { gsap.to(foo.current, { x: 100 }); gsap.to(foo.current, { y: 100 }); return ()

No problem, but it's usually best to start a new topic.

GSAP isn't animating proxyCount. It's animating proxyCount.current. Perhaps you meant this. gsap.killTweensOf(proxyCount.current);

If you want to reset something, it's better to use your own timeline. gsap.to() Basic Usage (codepen.io)

Hi hoper! You generally shouldn't mess with the global timeline. Is there something in particular you are trying to achieve or just curious? The global timeline is setup a little different than a normal timeline as it is using smoothChildTiming and autoRemoveChildren.

Can you make a minimal demo on codesandbox showing the issue? They have a nuxt template.

Please check out the classList docs. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList display block (codepen.io)

It's a feature, but you can disable it. https://nuxtjs.org/docs/2.x/components-glossary/pages-scrolltotop/

Thanks for making the demo more clear! I blame React. 😉 Your callback isn't keep current when the state changes. Here a couple different ways to handle GSAP callbacks that need to work with React values. https://codesandbox.io/s/upbeat-rhodes-jp4r1?file=/src/App.js https://codesandbox.io/s/musing-pine-wqlhs?file=/src/App.js https://codesandbox.io/s/pensive-mirzakhani-gvfyl?file=/src/App.js

Not sure why it wouldn't work as the types are global. You could try telling it where to search in your tsconfig/jsconfig.json. { "compilerOptions": { ... }, "files": [ "node_modules/gsap/types/index.d.ts" ] }