bartcc

Hi Jack, thanks a lot for your response. Yes, that does clear things up entirely. Thanks for your time!

Thanks, that helped!

Hi Jack, thanks for your reply. Setting up a simple CodePen I noticed that it makes a huge difference how to add a fn to tl.add(). Using a plain function object instead of an invoked function call inside add() was the cause of the problem. Now the timeline does exactly what I expect - it waits for the previously added sub-timeline to be completed: // Correct gsap.timeline() .add(getTl1()) .add(() => console.log('Waits until previously added timeline has finished')) // Wrong gsap.timeline() .add(getTl1) .add(() => console.log('gets called immediatly')) It wasn't (and still isn't) quite clear to me what gsap internally does with the function I provide. I've assumed that it expects just the pure function object. But obviously in my case I must provide the sub-timeline as result of the invoked function. Thanks for pointing me in that direction!

Upps, never mind - in doSthThatTakesAWhileFn things are added to a different timeline not to mainTl. So I think this must be the reason of my timing issue. So whats left is how can I get the endTime of this other timeline? otherTl.recent().endTime() doesn't work since otherTl.recent() returns a Tween.

Hi, I wanted to receive a timelines endTime() from tl.recent(). Acc. to the docs tl.recent() is supposed to return Function | Timeline | Tween. However in my case it merely returns a Tween, so no chance for calling endTime() on it. Am I doing sth. wrong here? What I'm trying to achieve is the following: mainTl .add(doSthFn) .add(doSthThatTakesAWhileFn) .add(() => doSthElseTherafterFn(), '>') // how can I position this AFTER doSthThatTakesAWhileFn properly? In my case doSthElseTherafterFn keeps starting at the same time doSthThatTakesAWhileFn starts. Note: in doSthThatTakesAWhileFn many things are added to mainTl, e.g. adding things in a loop a.s.o. (I know this is actually two questions, still - I give it a try Thanks

Thanks a lot @OSUblake for answering, first I'd like add one more strange thing I was just observing during build: Notice the mandatory js suffix ! // works import { SplitText } from 'gsap/dist/SplitText.js'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js'; this throws: // throws import { SplitText } from 'gsap/SplitText'; Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Library/Server/Web/Data/Sites/svelte-kit-app/node_modules/gsap/SplitText' // or import { SplitText } from 'gsap/dist/SplitText'; Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Library/Server/Web/Data/Sites/svelte-kit-app/node_modules/gsap/SplitText' import { ScrollTrigger } from 'gsap/ScrollTrigger' Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Library/Server/Web/Data/Sites/svelte-kit-app/node_modules/gsap/ScrollTrigger' // or import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Library/Server/Web/Data/Sites/svelte-kit-app/node_modules/gsap/dist/ScrollTrigger' ******* ...I feel like I would always go for fast and optimized builds. So for me ESMs seem to be the best choice serving as the default import. I wonder if that would help to resolve all the file paths issues. I fully agree with you, there seem to be lots of compatibilty issues - in particular when SSR is involved. This could also explain the fact that sveltkit/vite might scan just for CJS Modules rather than ESM, hence the unresolved paths Before I switched to sveltekit (and vite as its pre-bundler for dependencies), I was using Webpack or Rollup and never had any major issues during development or production builds, it mostly worked out of the box. Thanks for providing the https://github.com/WICG/import-maps#the-basic-idea Link - it looks like I will dive into it a bit to gain a bit more of a basic understanding.

Hi their, I experienced the same issue reported over here. The solution was to import the Plugin as an CJS Module: import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; However I would like to understand why some modules CAN be imported as ESM ans some cannot. Obviously sveltekit environment is able to handle ESM - the following import statements work as expected: import { gsap } from 'gsap'; import { SplitText } from 'gsap/SplitText'; Not sure but I think in FAQ section of the sveltekit homepage this issue is mentioned. May be someone can shed some light on it.