Jump to content


Seamless loop

Go to solution Solved by Carl,

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 all,


So, just started playing around with GSAP. Being more familiar with Google Web Designer, I'm very impressed with GSAP.

Makes creating animation a whole lot easier.

As a first, simple test I wanted to make a banner with 3 frames. This works fine, but I can't seem to find a way to seamless go from frame 3 to frame 1. As is is now, frame 3 slides out of view, showing a background image. 

What I would like it to do is frame 2 slides out, revealing frame 3; frame 3 slides out, revealing frame 1.


Is this possible or am I just failing? (=


The example can be seen here: 






See the Pen ZGeQyM by jeffklunder (@jeffklunder) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,


Thanks for the demo it was very helpful.


You have 2 options


Quick and dirty

Just create a dummy duplicate of frame1 so that it sits under frame3




Quicker and better

After frame1 moves away, shift its z-index so that it goes under frame3

When the timeline repeats give it a higher z-index again

tl.set("#frame1", {zIndex:5, x:0})
  .to('#frame1', 2, {x: 336})
  .set("#frame1", {zIndex:2, x:0})
  .to('#frame2', 2, {x: 336}, "+=1")
  .to('#frame3', 2, {x: 336}, "+=1")
  .call(tl.restart, [], tl, "+=1")



Note in option2 i use x instead of left (which will use a css transform for better performance)

Also you will see I use "+=1" as the position parameter instead of delay: http://greensock.com/position-parameter

  • Like 1
Link to comment
Share on other sites

Thank you for the feedback. I did consider the dummy-frame1 approach, but I didn't want to use unnecessary code.

I think the second option fits my needs perfectly (=

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.