Jump to content
Search Community

Proper way to achieve looping in TimelineLite

tony-mm 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

Hai

What i am trying to achieve is to infinite loop the scroll animation. I tried with some basic looping. But is it the right way of doing this. Also it is having responsive issues and there is a delay when after every slide starting. I tried as much as i can to make it working.

 

post-43725-0-07453200-1461603712_thumb.png

post-43725-0-27667700-1461603714_thumb.png

See the Pen bpjxOR by tony-mm (@tony-mm) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Using the onComplete callback on your last tween as you are doing is fine OR you can give the timeline an onComplete callback

var tl = new TimelineLite({onComplete:restartAnim})

As far as "responsive issues" not exactly sure what that means but I assume it is because you are picking a fairly arbitrary value like -2500 to place things offscreen. I think xPercent and yPercent will help a lot. Read: http://greensock.com/gsap-1-13-1

 

As far as I can tell there is no delay between animations. The tweens all run in direct succession. The problem is that -2500 is very far away so a lot of motion is happening offscreen. I changed all those values to 250 just so you can see that the timing is behaving properly: http://codepen.io/GreenSock/pen/oxMaYb?editors=0010

  • Like 1
Link to comment
Share on other sites

Hai Carl

Thanks for the help. 

In case of responsiveness, it's still there. When viewed on mobile/tab devices it's not that good.
I had attached the screen shots. The reason i think is that the background div is taking all the space. So it pushes the

current animating space. Is there a way to avoid this, so that the animation is viewed same on all devices.

Link to comment
Share on other sites

Hi tony-mm  :)

 

Welcome.

 

We need to keep the focus of the forum on GSAP related problems and questions. A quick Google search will show you loads of articles about responsive design and how to size things for mobile. That being said, we do try to help as much as we can with non-GSAP related issues which is why Carl mentioned the fact that you'll benefit from taking a look at xPercent and yPercent.

http://greensock.com/gsap-1-13-1

 

Here is the CodePen that goes along with that blog post:

See the Pen axzmb%C2%A0 by GreenSock (@GreenSock) on CodePen

 

If you follow that example and read that info, you should be able to make your animation work well from 4K monitors down to phones.

 

Happy tweening.

:)

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