yoshyosh
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by yoshyosh
-
-
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, -
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.
-
6 minutes ago, SARFEX said:
You can improve animation smoothness using a little rotation trick.
Thanks i'll check this out
-
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
-
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?
How to infinite timeline loop without gaps
in GSAP
Posted
Oh man! Awesome, I totally overlooked that thank you