Jump to content
Search Community

Infinite animation low fps

Mantvydas 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

Hello professionals,

 

I need Your help changing this animation for better performance. When I use this infinite animation on my website, I lose 20/30 fps from 60 fps.

Can I change this CSS animation to GSAP animation? Would it be better performance? And if it would be, how I can make same skew infinite loop with GSAP?

I tried  to make it with GSAP but I can only make animation from left to right, how to make this skew motion?

 

Thanks,

 

Mantvydas

See the Pen xWRBeM by MantvydasBinderis (@MantvydasBinderis) on CodePen

Link to comment
Share on other sites

Sure, you could totally do that with GSAP, no problem. But I don't think it's the animation technology that's the biggest problem. 

  • background-position is always snapped to whole pixels, so it'll never be perfectly smooth even if the CPU and GPU are barely busy. I'd strongly recommend switching to transforms which can do sub-pixel rendering and get GPU acceleration. 
  • I'd venture to guess that 98%+ of the load has to do with graphics rendering, NOT updating the animation values. The key is to minimize the area that the browser must repaint. You're offsetting your background-position by huge values (offscreen), so it's probably putting a lot of extra load on the browser. If you really want to maximize performance, I'd bet that a canvas-based solution would be significantly smoother. PixiJS is a nice library for that if you're looking for one. 

You could be to create a <div> with the background-image the way you have it now, but make that div wider and taller by exactly one tile (so if your tile is 100px by 100px, you'd make your div fill the entire area PLUS 100px in each direction and set the container's overflow to hidden) and then animate the translateX/Y (for GSAP, it'd be simply "x" and "y") and loop that. Here's a forked example: 

 

See the Pen oqBNWa by GreenSock (@GreenSock) on CodePen

Does that help? 

 

  • Like 5
Link to comment
Share on other sites

13 minutes ago, GreenSock said:

If you really want to maximize performance, I'd bet that a canvas-based solution would be significantly smoother. PixiJS is a nice library for that if you're looking for one. 

 

 

Yep. A tiling sprite could be used for that.

http://pixijs.io/examples/#/basics/tiling-sprite.js

 

That's what I'm using for the raindrop background here.

 

See the Pen qmXPMm by osublake (@osublake) on CodePen

 

  • Like 5
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Sure, you could totally do that with GSAP, no problem. But I don't think it's the animation technology that's the biggest problem. 

  • background-position is always snapped to whole pixels, so it'll never be perfectly smooth even if the CPU and GPU are barely busy. I'd strongly recommend switching to transforms which can do sub-pixel rendering and get GPU acceleration. 
  • I'd venture to guess that 98%+ of the load has to do with graphics rendering, NOT updating the animation values. The key is to minimize the area that the browser must repaint. You're offsetting your background-position by huge values (offscreen), so it's probably putting a lot of extra load on the browser. If you really want to maximize performance, I'd bet that a canvas-based solution would be significantly smoother. PixiJS is a nice library for that if you're looking for one. 

You could be to create a <div> with the background-image the way you have it now, but make that div wider and taller by exactly one tile (so if your tile is 100px by 100px, you'd make your div fill the entire area PLUS 100px in each direction and set the container's overflow to hidden) and then animate the translateX/Y (for GSAP, it'd be simply "x" and "y") and loop that. Here's a forked example: 

 

See the Pen oqBNWa by GreenSock (@GreenSock) on CodePen

Does that help? 

 

Thank You so much!

You helped me a lot. Your forum is the best help resource out there.  I appreciate what You are doing here!

 

Thanks do much,

 

Mantvydas

  • Like 3
Link to comment
Share on other sites

49 minutes ago, OSUblake said:

 

 

Yep. A tiling sprite could be used for that.

http://pixijs.io/examples/#/basics/tiling-sprite.js

 

That's what I'm using for the raindrop background here.

 

See the Pen qmXPMm by osublake (@osublake) on CodePen

 

 

Hey OSUblake,

Wow,  what  a nice animation. I would like to know how to work with canvas, but there is not much tutorials about it.. I really interesting in it but what I can do its just draw a line with canvas.. :)

Link to comment
Share on other sites

5 minutes ago, Mantvydas said:

 

Hey OSUblake,

Wow,  what  a nice animation. I would like to know how to work with canvas, but there is not much tutorials about it.. I really interesting in it but what I can do its just draw a line with canvas.. :)

 

 

Yes, canvas tutorials are getting harder and harder to find anymore. If you need any help in getting started, just ask, and we can point you in the right direction.

 

PixiJS is a pretty easy library to get started with, and GSAP has a plugin to help simplify some of the animation code.

http://www.pixijs.com/

 

You should check out some of the examples to get an idea of what it can do.

http://pixijs.io/examples/#/basics/basic.js

 

And the filters.

http://pixijs.io/pixi-filters/tools/demo/

 

  • Like 4
Link to comment
Share on other sites

Are you saying that the one I built that only animates transforms is still too costly? SVG would definitely be worse. The main problem (after fixing the previous issues I mentioned) is that you're trying to move a lot of pixels. The more pixels, the harder it is on the browser typically. There's no magic bullet, but like I said earlier (and Blake/Craig advocated), a canvas solution is probably your best bet performance-wise. If you're still having trouble, please post the demo that illustrates the problem and we'd be happy to take a peek. 

  • Like 2
Link to comment
Share on other sites

On 3/22/2018 at 12:53 AM, GreenSock said:

Are you saying that the one I built that only animates transforms is still too costly? SVG would definitely be worse. The main problem (after fixing the previous issues I mentioned) is that you're trying to move a lot of pixels. The more pixels, the harder it is on the browser typically. There's no magic bullet, but like I said earlier (and Blake/Craig advocated), a canvas solution is probably your best bet performance-wise. If you're still having trouble, please post the demo that illustrates the problem and we'd be happy to take a peek. 

 

Sorry I am new to coding, I started to learn just 1 year ago..

Maybe I am using too many animations? Nut I have seen websites with  much more animations and was performing much better than mine. Maybe I have too much layers? Or my JavaSCript is not good? Even when hovering on navigation items is very laggy. What is wrong here? On Opera is best performance, Chrome and Mozilla average but on edge is disaster, even when scrolling some white lines on the top pops up..

 

This is my portfolio project codepen. It is still not responsive so layout on big or too small screens can be broken and if you can watch this code on full screen, because I am using 100vh it can also look broken layout, sorry for that..

 

See the Pen GxEbzB?editors=1100 by MantvydasBinderis (@MantvydasBinderis) on CodePen

 

What I should change here?

 

Thanks, 

 

Mantvydas

Link to comment
Share on other sites

Unfortunately I don't have time to wade through over 1000 lines of code and do a free performance audit, but it looks to me like one of the biggest problems is that you're running a bunch of logic on mousemove events which is very dangerous because those events can fire well over 60 times per second (much more often than screen refreshes, meaning it's totally wasteful to run animation logic in there). You're re-creating a bunch of tweens and re-setting lagSmoothing() over and over and over again. Very inefficient. Try adding a console.log() in there and watch how many times it's getting called - you may be shocked. I bet if you remove the mousemove stuff, you'll see a big improvement. You should consider throttling those if you still want to keep them in. 

 

You also appear to be using a mix of CSS transitions, animations, GSAP and jQuery for animation. I'd be careful about that - they can conflict with each other (not necessarily though). And jQuery is literally up to 20x slower than GSAP - I'd certainly avoid it for animation. 

 

Good luck. 

Link to comment
Share on other sites

14 minutes ago, GreenSock said:

Unfortunately I don't have time to wade through over 1000 lines of code and do a free performance audit, but it looks to me like one of the biggest problems is that you're running a bunch of logic on mousemove events which is very dangerous because those events can fire well over 60 times per second (much more often than screen refreshes, meaning it's totally wasteful to run animation logic in there). You're re-creating a bunch of tweens and re-setting lagSmoothing() over and over and over again. Very inefficient. Try adding a console.log() in there and watch how many times it's getting called - you may be shocked. I bet if you remove the mousemove stuff, you'll see a big improvement. You should consider throttling those if you still want to keep them in. 

 

You also appear to be using a mix of CSS transitions, animations, GSAP and jQuery for animation. I'd be careful about that - they can conflict with each other (not necessarily though). And jQuery is literally up to 20x slower than GSAP - I'd certainly avoid it for animation. 

 

Good luck. 

I dont need you to change my code I just needed some advice. Thanks for helpful suggestion, from now I know where to start.

 

Thanks again GreenSock

Link to comment
Share on other sites

11 minutes ago, GreenSock said:

Sure thing, happy to help!

And I thought that $(window).on('mousemove.parallax', function(event) {  TweenMax.to(layer_1, 2, { x: left / 90,  ease:Expo.easeOut,overwrite: 'all'}) ... }); is GSAP parallax event. Im still green on GreenSock. How to use  GSAP mouse parallax?

 

Link to comment
Share on other sites

@Mantvydas Following example uses TweenLite's tick event that gets called on each frame, similar to requestAnimationFrame if you are familiar with that. Right now this example works with single parent only but you can make it work with multiple parent elements with little work. I have left a lot of comments explaining everything. There are some libraries out there that do parallax effects for you, parallax.js supports gyroscope as well so you can check that if you want.

 

As for not being familiar with GreenSock and coding, I will suggest you to spend some time on forum every day, an hour or so. Start by looking at simple questions and try to solve them. It's great way to learn coding and get familiar with GSAP.  Starting with something small is easy get learn and get answers as well.

 

See the Pen PRKQVp?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
Link to comment
Share on other sites

11 hours ago, Sahil said:

@Mantvydas Following example uses TweenLite's tick event that gets called on each frame, similar to requestAnimationFrame if you are familiar with that. Right now this example works with single parent only but you can make it work with multiple parent elements with little work. I have left a lot of comments explaining everything. There are some libraries out there that do parallax effects for you, parallax.js supports gyroscope as well so you can check that if you want.

 

As for not being familiar with GreenSock and coding, I will suggest you to spend some time on forum every day, an hour or so. Start by looking at simple questions and try to solve them. It's great way to learn coding and get familiar with GSAP.  Starting with something small is easy get learn and get answers as well.

 

See the Pen PRKQVp?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Thank you so much Sahil :)

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