Jump to content
Search Community

Timing issue during repeat

jiggy1965 test
Moderator Tag

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

Running against a slight animation problem: Have a look at this my Codepen.

See the Pen WEVJjw by anon (@anon) on CodePen

 

The image consists of 4 slides. The first and last are the same but there is a reason for that. The total images slides to the left from A to the other A and then it should repeat from the first A again. I've added that final A so that when it jumps back, it looks like the animation continues several times more.

 

But I have a slight timing issue. As you can see at 4 seconds it slides to the left in 3 seconds. Then at 8 and 12 seconds again. I've set the timeline to 'repeat' so it does that 10 times, jumping back to the start each time.

 

But now when it jumps back form the last A to the first, it takes too long to move from A to B again. 

The first slides from A-B, B-C, C-A last 4 seconds each. Then it returns to the first slide again, ready to repeat the process, but it looks like it then waits about 6 seconds to do its slide from A-B again.

 

It's like it's adding one extra 'sliderstart+=4' between the last tween and the first when it repeasts again. How can I fix this?

Link to comment
Share on other sites

Already found it myself. By starting 'sliderstart' at zero. Which would make it go smoothly from front to back and front again since those 4s aren't added up between the last and first A. Then it would run form the start but I fixed that by adding a delay in the TimeLineMax line.

slider = new TimelineMax({repeat:10, delay: 4}); 
slider.to('#frames', 3, {left:"-=100", ease:Power4.easeInOut}, "sliderstart");
slider.to('#frames', 3, {left:"-=100", ease:Power4.easeInOut}, "sliderstart+=4");
slider.to('#frames', 3, {left:"-=100", ease:Power4.easeInOut}, "sliderstart+=8");

 

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