Jump to content
GreenSock

atelierstudios

Duplicate timeline won't replay

Go to solution Solved by PointC,

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 

 

Firstly I just wanted to say I have found GSAP extremely easy to pick up as a complete noob and with limited JS knowledge.

 

Down to business... I have an animation (see codepen attached) with multiple time lines, this is a relatively simple stepped animation where user clicks on step 1 and it plays step 1 etc etc.

 

There are 3 types of animation which I have called, spin, pulse and laser which I have reused throughout the timelines on various different elements which I have selected via class name.

 

All animations seem to be able to be reused except the spin animation that I have included on step 5 in a nested timeline. If you first click on Step one and run the spin animations and then click Step 5 it plays the spin (rotation:360) elements fine on the items that haven't been animated yet but the items that were previously animated in step 1 will not rotate.

 

I'm sure this is something simple and apologies for posting what is probably a really dumb question, I think I might need to reset the first animation.

See the Pen dXYZBY by iamaandy (@iamaandy) on CodePen

Link to comment
Share on other sites

Hi atelierstudios :)

 

Welcome to the GreenSock forums.

 

I looked at your pen, but I was a bit confused by your question. I'm not seeing any 'Step 5' to click. I only see Step 1 and Step 2. When I click those, the animation seems to spin correctly. I see the little circle rotate around the outside ring each time I click. Could you give us a bit more information or make sure you're seeing the problem in the CodePen?

 

Thanks.

:) 

  • Like 2
Link to comment
Share on other sites

Sorry I edited the pen but forgot to save it!!!!!

 

See the Pen dXYZBY by iamaandy (@iamaandy) on CodePen

 

Apologies  :shock:

 

Also sorry I have noticed none of the animations play in Firefox.. any ideas?

Link to comment
Share on other sites

I appreciate the demo, but please try to imagine looking at something like this from the eyes of someone who has never seen your code or knows how it is supposed to function. A big part of providing a demo is reducing it to the bare amount of code possible to replicate the situation. You would be surprised how many times removing everything that isn't necessary reveals exactly what the problem is.

 

I can't look through the 300 lines of code you provided but my guess is that its a basic logic problem.

 

if you rotate an item to rotation:360 and then try to rotate it again to rotation:360 the second tween isn't going do anything because the item is already rotated to 360.

 

I noticed in a lot of your timelines you are using fromTo tweens which set both the starting and ending values (which will negate the issue above). Perhaps force the rotation tweens to rotate from rotation:0 to rotation:360

 

Another trick is you can pass in a relative value like "+=360" which will rotate 360 degrees more than the current value. 

  • Like 1
Link to comment
Share on other sites

  • Solution

Yeah - there's a lot going on in there.  ;)

 

Carl is absolutely correct about the 360 problem. If you change line 206 to this:

.to(spinitemstep5, 1, {rotation:"+=360", autoAlpha:1, delay:0.2, repeat:2, transformOrigin:"center center"})
// I didn't look through the whole thing, but anywhere else you have 360, you'd want to change to +=360

it works fine for me.

 

I think the FF problem is coming from the redundant scripts you're loading in CodePen. You're loading TweenMax and TimelineMax. Once I switched your pen to load only TweenMax and jQuery it seems to work fine in FireFox for me.

 

Happy tweenng.

:)

  • Like 1
Link to comment
Share on other sites

Thanks guys I knew it would be something simple and apologies for being the token noobie posting all my code... I appreciate I should have simplified the example, posted it in a rush and my SVG is so complex it would have taken ages!

 

To confirm the FF problem was due to loading too many libraries... I should have read more of the documentation before diving straight in!!

 

Once again thanks guys, great library and also great support community = recipe for success!

  • Like 3
Link to comment
Share on other sites

You're very welcome.:) 

 

Glad to hear you're enjoying GSAP. This is an incredible community of helpful people so please don't hesitate to post any additional problems or questions. Reduced demos always appreciated. :-P   

 

Happy tweening.

:)

  • Like 3
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.
×