Jump to content
GreenSock

blueblau

Tween classes with TimelineMax

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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.
×