[GSAP 3 and Promises]

Thank you for the link, and the workaround. The problem comes from: timeline.then() ?

 

Hopefully there will eventually be a cleaner way than always returning: { timeline: tl }

 

Maybe a configuration parameter ?

 

Thank you very much for your precious support and help,

Stan

 

 

[GSAP 3 and Promises]

Hi OSUblake,

 

Thank you for the help.

 

I'm using setTimeout just as an example.

 

The web is an asynchrone world, and there are many cases where I need to include my timeline creation code in a function that returns a promise. For example when animating a video element.

 

It's great to see that GSAP timelines are promisable. But I dont really need to wait for a timeline to be completed. I need GSAP timelines to work in vanilla javascript promises. Ex: Promise.resolve( timeline ) never resolves. It was working perfectly fine in GSAP2.

 

Is this a bug or is it by design ? Is there a work around ?

Thank you,
Stan

[GSAP 3 and Promises]

Hello GSAP team,

 

I build complex animations and sometime need to use Promises. Just decided to migrate to GSAP 3.

 

GSAP 2 work perfectly fine with promises. GSAP 3 doesn't.

 

I've made 2 codepens:

GSAP 2 and Promises:

 

GSAP 3 and Promises:

See the Pen xxbqEXQ by multivac (@multivac) on CodePen

 

Any solutions ? Ideas ?

 

Thank you very much,

Stan

 

 

 

See the Pen zYxZKLM by multivac (@multivac) on CodePen

[getChildren() on Timeline with stagger]

Is there a way to determine the instance type of objects returned by .getChildren() ?

 

Is it a TimelineMax, TimelineMin, TweenMax, TweenMin, etc ?

 

@Rodrigo @GreenSock ?

 

Thank you 

[getChildren() on Timeline with stagger]

My software nests multiple timelines. I want the users to be able to reach a sub timeline by label name. My goal is to recursively scan all nested timelines and copy their labels to the parent at the correct time. 

 

I want to extract labels only from the nested timelines I've added. If I can sort out staggers it will be possible.

 

With Rodrigo answers it will be possible.

[getChildren() on Timeline with stagger]

Hello !

 

If a parent timeline contains staggers.

Calling parent.getChildren( false, false true ) will return a "timeline" for each stagger.

But these "timelines" will trigger an error if .getLabelsArray() is called on them

 

Is there a way to get children timelines, without the ones automatically created by stagger ?

 

Please look at the codepen.

 

Thanks

 

See the Pen YgLYYQ by multivac (@multivac) on CodePen

[Copy Nested Labels to Parent ?]

Yes !  child.startTime() was the missing part.

I missed it in the doc.

Thank you !

[Copy Nested Labels to Parent ?]

Hello GSAP !

 

I have a parent timeline with multiple nested timelines.

 

I want to copy the nested labels to the parent timeline.

 

I've tried with .getChildren()  and .getLabelsArray().

 

But I'm unable to get a child's insertion time, in order to copy the child's labels at the correct time on the parent.

 

Any suggestions ?

 

Cheers

[Looking for talented designers]

I'm hiring talented banner designers. You must master Greensock, JS, CSS and HTML very well, and have good design skills. Please send me your portfolio website address in a private message.

[Timeline fill]

Hello team,

 

Whenever I wish to add a few extra seconds of nothing at the end of a timeline I end up using this:

 

timeline.to( {}, 5, {} );

 

It works perfectly fine. But it's ugly and not self explanatory. Is there a more elegant way to do this ?

 

Thank you !

 

 

[Splittext and Denavagari]

It happens with every fonts I've tested. Google fonts included. Codepen was updated with google font.

Any hints or suggestions are welcomed !

Thanks

[Splittext and Denavagari]

Hello GSAP !

When splitting Denavagari characters, some weird circle elements are added. Any suggestions ?

Thank you

See the Pen rdPbeo by multivac (@multivac) on CodePen

[Interacting with labels in nested timelines]

Just a side note, the above code doesn't seem to work with multiple levels nested timelines.

[Text effect with stagger and css filter ?]

 

This is sooo nice @Jonathan !

It just works perfectly.

Thank you for taking the time to help newbies, it's very much appreciated.

 

 

[Text effect with stagger and css filter ?]

@Jonathan

Thank you for taking the time ! The GSAP forum team is just amazing.

 

The ultimate goal is to explore if GSAP can eventually be used to create animations that combine the power of SplitText and filters.

 

The SVG solution looks great ( just learned about GSAP AttrPlugin  ). My guess is that it cannot be applied when using SplitText.

 

Using CSS filters looks like the way to go. But making this work with a SplitText stagger seems like a daunting task. Does the mandatory use of "onUpdate", means that "stagger" cannot be used ?

 

 

GSAP, please consider adding something for a cleaner way to tween filters. When scanning through code, the solution feels long, complex, and less intuitive than classic Tweening. These 4 lines of codes are beautiful, but they won't work 

 

var h1 = document.querySelector( "h1" );
var split = new SplitText( h1, { type: "chars" } );
var tl = new TimelineMax();
tl.staggerFrom( split.chars, 0.7, { opacity: 0, filter: "blur(5px)" }, 0.1 );

 

Happy Tweening! 

 

 

 

[Text effect with stagger and css filter ?]

Thank you for the reply Dipscom.

 

In the first codepen I use the TweenMax library. Isn't CSSPlugin already inlcuded in TweenMax ?

If that the case, my filter tweening still doesn't happen. I'm clueless.

[Text effect with stagger and css filter ?]

Hi GSAP team,

 

I'm trying to animate text with a blur filter.

 

See the Pen jYRYwv by multivac (@multivac) on CodePen

 

After a quick search, I understand that my approach may not be correct. It seems that an "onUpdate" callback should be used to animate a css filter with GSAP. Just like here:

 

See the Pen omsrL by joemidi (@joemidi) on CodePen

 

Is it possible to animate a filter without a callback ? If no, what is the best way to integrate this in a stagger ?

 

Thank you !!!

 

[Draggable & Resizable]

Great idea, I didn't thought about using Draggable to jump start a resize. Note that resizing from the bottom right corner is the easy part. It gets much more complex when trying to resize from all corners.

[Draggable & Resizable]

Hello GSAP team.

 

Just my 2 cents about GSAP plugins.

 

Draggable is a great piece of software. Dragging is often use with resizing, it would be great to have a "Resizable" plugin. I would pay for that.

 

I just don't feel like adding jQuery to my project:

 

See the Pen qLAwj by jamiejefferson (@jamiejefferson) on CodePen

 

[How to "trim" a timeline ?]

@Carl 

Tweening a Timeline ... wow.

This is great !

Thank you so much.

[How to "trim" a timeline ?]

Thank you Sahil.

 

I need the GSAP DevTools timeline slider to work seamlessly, in all directions.

 

Here are the main problems:

- Not trimming the timeline will display infinite time.

- If I use callbacks, when reaching the end, the background will stop forever, and the timeline slider will not make it play anymore. So I will have to code another callback to make it start again.

 

A simple trim looked liked a more simple solution, than coding a group of callbacks.

 

 

[How to "trim" a timeline ?]

I have an animated background, which is infinitely looping. And an animated text foreground which has a finite time. Both are combined in a main timeline like this:

 

var tl = new TimelineMax();
tl.add( backgroundTimeline, 0 );
tl.add( foregroundTimeline, 0 );

 

The main timeline total duration will be infinite, because of the infinite looping background. How would you "trim" the main timeline to make sure its duration equals the foreground duration. Without affecting time scale.

 

Due to the nature of the project I cannot use callbacks to do something like "on foreground end" -> "stop background"

 

 

 

[Timescale only a part of a timeline ?]

Is it possible to compress/timescale a specific portion of a timeline ?

For example I would like the first 5 seconds to take only 0.5 seconds and the rest of the timeline to be normal.

Thank you

 

[How to tell if object is a Timeline ?]

Thank you very much Sahil, I went thru the docs too, I wanted to make sure I didn't miss anything.

[How to tell if object is a Timeline ?]

Oh ... yes divide nice catch !

So I guess I should always check if a timeline's scale was changed in order to get the real duration ?