[How to infinite timeline loop without gaps]

3 minutes ago, Shaun Gorneau said:

Hi @yoshyosh ... you were very, very close!! In the following pen, have a look at lines 10 and 14. Instead of repeating the master timeline (which will wait for all child tweens to complete, resulting in a gap), repeat each child tween independently.

Oh man! Awesome, I totally overlooked that  thank you

[How to infinite timeline loop without gaps]

Hi all, I'm having trouble with making this feel like a seamless infinite loop, there's a huge gap between repeats. I want this to feel like the avatars that are popping in are endless and at the same frequency as the original timeline without any gaps. How do I go about doing this?

I saw several different examples of infinite carousel approaches with TweenMax + modifiers but I needed to use timeline to finely control how my elements "enter" and "leave" a general scene.

Also, is there a good way to start with the image showing and then moving the elements in an infinite loop based on where their starting position is? This feels like it will become even more complex to achieve.

Cheers,

See the Pen VNJoQr by yoshyosh (@yoshyosh) on CodePen

[Why is this animation choppy?]

6 minutes ago, GreenSock said:

Yeah, it seems smooth to me, but you are pushing the browser really hard in terms of rendering. SVG requires the browser to fabricate all the pixels dynamically because they're resolution-independent, and you've got a very large area of change. It has nothing to do with GSAP - I'd bet that the work GSAP does is less than 1% of the overall load - the rest is the browser having to rasterize & paint all those pixels on every tick. A few tips:

• Avoid strokes and fancy linecaps. They're expensive rendering-wise. 
• Limit the area of change. The more pixels that need to be updated, the tougher it is on the browser. 
• Switch to <canvas> if you need better rendering performance. Maybe even experiment with using regular DOM elements like <div> and <img> to create your objects because those can be GPU-accelerated whereas SVG typically can't. 

Happy tweening!

Thanks for the tips! Good to know theres nothing with GSAP, i'll try more variations of rendering the SVG and these elements. The size of it likely plays a big role.

[Why is this animation choppy?]

6 minutes ago, SARFEX said:

You can improve animation smoothness using a little rotation trick.

Thanks i'll check this out

[Why is this animation choppy?]

34 minutes ago, Shaun Gorneau said:

Hi @yoshyosh! Welcome to GSAP 

 

What are you reviewing this in? FWIW, everything looks very good here in Safari, Chrome, and Firefox in MacOS.

Thank  you! I'm viewing this in chrome, it could also have to do with my machine being a little slow. Old macbook air

[Why is this animation choppy?]

Hi all, I'm new to the community. I've done two animations so far, this sliding image one you can see in the codepen and if you scroll around you'll see a rotating avatar in the middle. Curious why it sometimes drops frames and isn't buttery smooth. Any ideas?

See the Pen MRPMeo by yoshyosh (@yoshyosh) on CodePen