Jump to content
Search Community

Animation not resetting properly

Jfirestorm44 test
Moderator Tag

Recommended Posts

Hello all. I am becoming familiar with gsap and have a couple questions. In the attached Codepen I have a timeline created but when it yoyo’s back to the start the geometry seems to be slightly rotated. What can I do to fix this?

 

Also is creating an Object3D and animating that the best way to achieve the effect where the circle spins? Could I do this without adding the geometries to the object? Would it make any difference?

 

thanks in advance

See the Pen dyXMobJ by jfirestorm44 (@jfirestorm44) on CodePen

Link to comment
Share on other sites

  • Jfirestorm44 changed the title to Animation not resetting properly

Hey Jfirestorm44. 

 

This is caused because in every iteration of the for loop you are rotating the container object. So after the first time, the starting value is the same as the ending value so when it reverses it keeps the same value the whole time. This is actually a variation of one of the most common GSAP mistakes - creating logical issues with relative tweens :) 

 

Here's how I'd set it up:

See the Pen KKMzrQX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side note: We recommend using the position parameter over using delay in timelines.

  • Thanks 1
Link to comment
Share on other sites

Hey Zach thanks for the reply. I’m not quite sure I understand the source of the problem though. Please bare with me as I am trying to learn js, THREE.js , and gsap all at once. The way I think the code works is I’ve created 25 objects and then put them all into one container. I am animating (¿tweening?) each iteration with the first two `.to` statements and the last `.to` is animating the container. The animation doesn’t repeat again until the reverse animation is complete which logically would be exactly the same position it started. 
 

I can’t seem to grasp how the 25 objects starts getting rotated off axis because of the container rotating. 
 

I do appreciate the example as I can see that you moved that piece of the `tl` outside of the `for` loop. I’ll keep that in mind while animating. Just don’t fully understand what causes the problem. 

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.
×
×
  • Create New...