[tl.recent() chainable?]

Hi Jack,

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

[tl.recent() chainable?]

Thanks, that helped!

[tl.recent() chainable?]

Hi Jack,

thanks for your reply.

 

Setting up a simple

See the Pen WNadQep by bartcc (@bartcc) on 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!

 

[tl.recent() chainable?]

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.

[tl.recent() chainable?]

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

[Why needs it to be a mix of ESM / CJS imports]

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.

 

[Why needs it to be a mix of ESM / CJS imports]

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.