Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
blueblau

Tween classes with TimelineMax

Recommended Posts

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

Link to comment
Share on other sites

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();
  • Like 1
Link to comment
Share on other sites

just 2 points :

 

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

 

- 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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 :D Thank you! :-)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×