Tween classes with TimelineMax

[blueblau 11 Likes (Newbie)]

Hi guys,

 

I'm pretty new at GSAP, and I'm trying to control a timeline that tweens two classes.

 

So what I am trying to achieve in my own Codepen linked to this post, is to control the timeline with the "progress" function. I can't wrap my head around how this is done.

 

What am I doing wrong?

 

The class tween example

See the Pen b128c65e197e46dfa8a980d229c45114 by GreenSock (@GreenSock) on CodePen

 

Timeline example

See the Pen zinsg by GreenSock (@GreenSock) on CodePen

See the Pen VevrdP by Blueblau (@Blueblau) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi blueblau 

 

if i understood correctly , you need to pause your Tween/Timeline , pls try like this :

 

var tl = new TimelineMax({paused:true});
tl.to(".start",1,{className:"finish"});
tl.progress(0.5);

or

var tl = new TimelineMax();
tl.to(".start",1,{className:"finish"});
tl.progress(0.5).pause();

[blueblau 11 Likes (Newbie)]

You are THE man!

 

The link to the end result is here:

See the Pen VevrdP by Blueblau (@Blueblau) on CodePen

[Diaco 1,948 Likes (Superhero)]

just 2 points :

 

- pls use last version of GSAP ( 1.18.1 ) , currently you load very old version : 1.8.4 

 

- after version 1.8.0 , you don't need to used css:{} object for CSS properties

 

pls check this out : 

See the Pen xZwpRq by MAW (@MAW) on CodePen

[blueblau 11 Likes (Newbie)]

Thank you!

 

However, I have an issue where I'm trying to animate multiple elements at once. One works, but the second doesn't.

 

I tried to add the CSS tween to the timeline in a different way, like the Greensock Timeline example with the Space Invader ghosts, but I think I'm doing somehting wrong, or doesn't it work with the cssPlugin?

 

See the Pen VevrdP by Blueblau (@Blueblau) on CodePen

[OSUblake 9,990 Likes (Superhero)]

You are just setting them because the duration is 0. Set it something other than 0.

 

See the Pen ZQbMoO by osublake (@osublake) on CodePen

[blueblau 11 Likes (Newbie)]

You are just setting them because the duration is 0. Set it something other than 0.

 

See the Pen ZQbMoO by osublake (@osublake) on CodePen

 

For crying out loud! I suck at this Thank you!