Jump to content
Search Community

How to successfully restart a timeline

Tom Roberts test
Moderator Tag

Recommended Posts

12 minutes ago, Tom Roberts said:

If I want to repeat the 'in' animation then the assets are in the wrong positions and the animation does not work.

 

I'm not sure what you mean by "in the wrong positions". If what you mean is they are not fully out of the parent container and seem to "jump" prematurely, it's that you are not tweening them far enough. The container is three times the width of the element, moving from the center third by xPercent 100 will only move it to the right 3rd of the container (100% of the element's width). So 200% will get its left edge out of the container.

 

As far as repeating the tween, you can do this all with one timeline and add reapat: -1 to the timeline's properties.

 

See the Pen QWNXOyN by sgorneau (@sgorneau) on CodePen

  • Like 2
Link to comment
Share on other sites

1 minute ago, Shaun Gorneau said:

 

I'm not sure what you mean by "in the wrong positions". If what you mean is they are not fully out of the parent container and seem to "jump" prematurely, it's that you are not tweening them far enough. The container is three times the width of the element, moving from the center third by xPercent 100 will only move it to the right 3rd of the container (100% of the element's width). So 200% will get its left edge out of the container.

 

As far as repeating the tween, you can do this all with one timeline and add reapat: -1 to the timeline's properties.

 

 

 

 Hi Shaun.

Apologies if i didn't explain myself. I want the animation to come in once, exit and then come in and stay static the second time.

This is why I set up 'in' and 'out' animations so I could play them in succession as 'in', 'out', 'in'.

My problem is that when the 'in' animation wants to play the second time I only see the static boxes you see in my pen. No animation seems to be occurring and the elements are in the wrong positions.

 

Link to comment
Share on other sites

Hey Tom. You're making one of the most common GSAP mistakes, though admittedly a more tricky case of it. Let's break down what's going on here:

  • logoAnimateIn sets itself up. It immediately sets the the values to the ones that you gave in the vars object (ex. x: -300) and readies itself to animate to its original values (the default ones; ex. x: 0).
  • logoAnimateOut sets itself up.
  • The second logoAnimateIn sets itself up. It immediately sets the the values to the ones that you gave in the vars object (ex. x: -300). But this time it readies itself to animate to the values that the first call set it to (ex. x: -300). So it animates from and to the same values, which make it appear like no animation is happening (because the values are always the same). Does that make sense?

The easiest solution is probably to use .fromTo()s instead of .from()s as the linked article suggests.

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