Jump to content
GreenSock

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

Trying to set styles before playing timeline kills it

Go to solution Solved by Dipscom,

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

Hello,

 

I have a timeline which makes the first div disappear and, on complete, it plays the timeline on reverse on the second object, so the second appears. 

 

In order to prepare the second and third object to play reverse I set them up  with a TweenMax.set().

The issue is that once TweenMax.set() runs it kills all timeline actions, i.e. if I play the timeline on those elements it works but it doesn't have any effect on the object.

 

To see what I mean check the codepen and comment the TweenMax.set() on line 32-33 in the javascript panel.

 

PS: the real timeline is very complicated that's why I'd like to play reverse rather then creating another timeline with the opposite actions

 

 

Thanks in advance

See the Pen KWReWJ?editors=0010 by deva (@deva) on CodePen

Link to comment
Share on other sites

Hi alebarbieri,

 

Welcome to the forums!

 

Help me out here, I'm trying to make sense what it is that you are doing. The example pen is a great starting point but I am not quite clear what you are doing there.

 

I can appreciate you simplifying the animation and I thank you for that. I do fail to see what is the expected animation when reversed.

 

I see you have the <p> element in .item-0 moving and fading away. What is it that you want to happen when it is completed? Play the same animation but for item-1? I'm a bit fuzzy in what is to happen after the timeline is played.

Link to comment
Share on other sites

Hi Dipscom, thank you for the quick response.

 

I updated the code. Now at the beginnig you see the three elements all visible. If you click `play` 3 times you can see what's the animation is supposed to do.

 

Basically I need to play them all before being able to play the timeline reverse. How can I set it so I can play reverse immediately?

Basically I would like the blue and the yellow to be set in a way so I can then play the reverse animation. At the moment I haven't got a clue how to do it.

 

I tried to set the blue and the yellow one with TweenMax.set(), but as I said, then the timeline doesn't work anymore even though it runs.

 

(the <p> you see is just something to add to the timeline; the real one on my project is more complicated with all sorts of things happening, which I won't put in the example for the sake of clarity)

Link to comment
Share on other sites

Have you considered using nested timelines? And using functions to build your timelines?

 

Something like this:

 

See the Pen XmJoLN by dipscom (@dipscom) on CodePen

Link to comment
Share on other sites

No, I haven't considered nested timelines.

Building them using a function is not a problem but I wonder how you this would solve my problem. 

It'd be great to sort this out as it's the third time I come across it and I have to write some workarounds to overcome the issue.

 

I'm looking at you example trying to adapt it to mine.

Link to comment
Share on other sites

  • Solution

I know you have said your final animation is quite complex but I don't know how different one animation is from the other.

 

So, the way I would tackle this, would be to have a function building the individual timelines to each section and push them into a master timeline. Then, you can play the master timeline that would control all children.

 

Another way would be, if you need all of those individual timelines to play independently, I would push the individual timelines into an array. Then, you can just run a check to see which timeline should play and which should reverse.

 

Ah! Hold on, I'm starting to make sense of your code (sorry, jQuery always makes it confusing to me). You're already doing what I am suggesting...

 

Let me check some things again...

 

 

------

 

Ok, ok, I think I get it now and I can offer you a suggestion, here's a fork of your pen.

 

See the Pen LWmgWZ?editors=0010 by dipscom (@dipscom) on CodePen

 

Is this what you were after?

 

If so, have a look at the SupressEvents bit here:

https://greensock.com/docs/#/HTML5/GSAP/Core/SimpleTimeline/totalProgress/

 

 

By the way, thank you. I have learnt a neat little trick from reading your code. "Store animation in the DOM object of the item".

Edited by Dipscom
  • Like 1
Link to comment
Share on other sites

THAT'S EXACTLY IT!
 
So this is the trick?!

timeline.totalProgress(0, true)

I'll check immediately on my real project.

 

Thank you! You saved my day.

Link to comment
Share on other sites

You tell me. If it works in your real project, then, yeah, that's the trick.

 

;)

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