Jump to content
Search Community

Seamless loop

jeffklunder test
Moderator Tag

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: 

 

Thanks...

 

Jeff

 

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

http://codepen.io/GreenSock/pen/waJMOy?editors=100

 

 

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")

http://codepen.io/GreenSock/pen/gpmPEx

 

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

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