Jump to content
GreenSock

coco

Rotation is jerky and too much pause before loop starts again

Go to solution Solved by PointC,

Recommended Posts

Hi all -
I am playing around with a proof of concept.

There are 3 slides. Each slide has an image that scales up with a background that rotates.
My issues:
1) The rotations are quite jerky, especially in Firefox and Safari.
2) I cannot for the life of me figure out how to loop this animation seemlessly so there is no pause.

Can any of you veterans help me with this?
Many thanks ahead of time! ;-)
Ana
 


 

 

See the Pen QWQZJXx by nushi (@nushi) on CodePen

Link to comment
Share on other sites

NOTE: My main issue is how to solve the jerky rotations!

Link to comment
Share on other sites

Performance issues with graphics are almost never GSAP related. Those are some pretty big images to be scaling and rotating. Maybe use them as a background for the div rather than an image. 

 

Just FYI - I don't even see the big circle images with text in Chrome or Edge. I only see them in Firefox so I'm not sure what's happening there. I think you'd also benefit from looping through the targets rather than manually creating three identical timelines. You could also use autoAlpha instead of display:block and alpha.

 

FWIW - the rotation in FF seems smooth to me.

  • Like 2
Link to comment
Share on other sites

Hi @PointC - Thanks for checking! The large images are SVGs. I want them to take up the screen no matter the size of the browser window.  I have always had rotation animation jerkiness, it seems, with Greensock, but maybe am doing it wrong.  ;-) 

I notice the jerkiness is intermittent. Like the animation chokes.

In terms of using the images as a background, one image is rotating (that is the SVG), and both the SVG and PNG are scaling and fading in and out as the rotation happens. Are you suggesting placing the rotating image into the div as a background and then rotating that div?

PS: I see the SVGs are way larger than they should be. I was trying to create a modified pen for this question. In reality, they are each under 60kb.

 

Link to comment
Share on other sites

Very smooth for me - Mac Desktop - Chrome latest

Link to comment
Share on other sites

@Cassie are you seeing the big SVG circles around each shield shape in Chrome on Mac? I can't get them to show up in Chrome or Edge on PC.

Link to comment
Share on other sites

Thanks @Cassie! I think it is smooth on Chrome too.
Perhaps it's the internet connection and other factors beyond my control.
I thought there could be some easing function that helps this or some other parmeter/value that I was missing.

Yes @PointC - Yes, you are right. I could definitely have created a function where I don't repeat these exact timelines 3 times. I was going to do that later down the line  🤓

Link to comment
Share on other sites

4 minutes ago, coco said:

Yes, you are right. I could definitely have created a function where I don't repeat these exact timelines 3 times.

That's actually how you'll solve your seamless loop problem. You'll create a separate timeline for each target and a repeatDelay that allows the first timeline to start repeating before the third one completes. 

  • Like 1
Link to comment
Share on other sites

@PointC - Good to know. I am actually still learning javascript  (for many years LOL!) so I will need to devote time to that one.
Thank you for your insights ;-)

Link to comment
Share on other sites

  • Solution
3 hours ago, coco said:

I am actually still learning javascript

We all are. Nobody knows it all. :)

 

FTR - I'd set this up in a single SVG and do something like this.

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

 

You can use a little Math to figure up the necessary radius of the SVG circle to fill the window. The only downside to this approach is that group 3 is actually above group 1 in the stacking order because SVGs don't have z-index. I think it's acceptable though as group 3 is almost faded out before group 1 restarts. At any rate, it should give you some ideas how to loop through the targets and create timelines.

 

Happy tweening.

 

  • Like 2
Link to comment
Share on other sites

28 minutes ago, PointC said:

We all are. Nobody knows it all. :)

 

FTR - I'd set this up in a single SVG and do something like this.

 

 

 

You can use a little Math to figure up the necessary radius of the SVG circle to fill the window. The only downside to this approach is that group 3 is actually above group 1 in the stacking order because SVGs don't have z-index. I think it's acceptable though as group 3 is almost faded out before group 1 restarts. At any rate, it should give you some ideas how to loop through the targets and create timelines.

 

Happy tweening.

 


Wow, Thank you! I am going to study this. I appreciate you looking at this ❤️ !

 

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