Jump to content
Search Community

How to loop with overlap?

bdrtsky 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

Following my previous question about looping. After I tryed to modify it a little bit to add overlaping (so the next animation trigger not after previous completely ends, but slightly earlier) I have issue that I can't solve.

 

First I tried to use simple setInterval. Works fine on first sight, until I switch browser tabs. After that looks like asynchronisation is happens. 

 

My question is, how do I loop animation, but add some shift on next animation start? delay is not helping in this case -  

 

What I need is both elements start to animate in the same time (one leaving, the other entering). Is there some native API for this? because setInterval is not working.

See the Pen EJReev by bdrtsky (@bdrtsky) on CodePen

Link to comment
Share on other sites

If I understand your question correctly, calling the function after each element finishes won't give you the desired behavior here. A timeline could work, but the problem with that is a timeline is linear and the playhead can't be in two places at once so the first element won't restart until the last completes. You won't get that overlap of the last and the first. (I assume that's what you're going for here.)

 

When I need to have the first element restart before the last finishes I'll usually loop through and create separate timelines for each element and adjust the repeatDelay so the 1st element timeline restarts before the last one ends. Here's a quick example:

 

See the Pen oOyadR by PointC (@PointC) on CodePen

 

I also added the element timelines to a master for extra control, but that's not necessary to make this work. Obviously you can adjust the delay and repeatDelay to your liking. Hopefully that helps a bit. Happy tweening.

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

Hey, have a problem with looping morphs.

I have a starting animation when the cloak rises from below, and then loop waving animation. The first transition from start to loop looks great, but it still twitches when moving to the next cycle, what am I doing wrong?)

Could you help me, please?

 

See the Pen xxwYjmM by poloten4uk (@poloten4uk) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey @poloten4uk and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you.

 

I don't really understand why you're using delay and repeatDelay - why not just make use of the fact that elements in timelines are fired after the one before it ends by default? That's causing the jump that you're seeing because the first loop timeline is being repeated before the last one ends and they share the same target (unlike the demos above in this thread)

 

Another big improvement you can make in terms of the overall smoothness is to use an ease of none. It looks like you tried to do that, but you misspelled it as "easy" and put it inside of the morphSVG object whereas it should just be part of the tween vars.

 

Some side notes:

  • In GSAP 3, you don't need Max/Lite stuff. You can create a new timeline using gsap.timeline().
  • In GSAP 3, we recommend using the condensed string form of eases. For example "none" instead of Power0.easeNone.
  • You have a good bit of repetition comparing your two loops. You can make your code more DRY by using a function! I talk more about how to do that in my article on animating efficiently.

Altogether, I think it functions better and is a bit cleaner:

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

 

Let me know if you have any questions :) Cool effect by the way. It is pretty similar to our logo cape animation.

  • Like 3
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...