coco Posted June 9, 2022 Share Posted June 9, 2022 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 More sharing options...
coco Posted June 9, 2022 Author Share Posted June 9, 2022 NOTE: My main issue is how to solve the jerky rotations! Link to comment Share on other sites More sharing options...
PointC Posted June 9, 2022 Share Posted June 9, 2022 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. 2 Link to comment Share on other sites More sharing options...
coco Posted June 9, 2022 Author Share Posted June 9, 2022 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 More sharing options...
Cassie Posted June 9, 2022 Share Posted June 9, 2022 Very smooth for me - Mac Desktop - Chrome latest Link to comment Share on other sites More sharing options...
PointC Posted June 9, 2022 Share Posted June 9, 2022 @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 More sharing options...
coco Posted June 9, 2022 Author Share Posted June 9, 2022 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 More sharing options...
PointC Posted June 9, 2022 Share Posted June 9, 2022 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. 1 Link to comment Share on other sites More sharing options...
coco Posted June 9, 2022 Author Share Posted June 9, 2022 @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 More sharing options...
Solution PointC Posted June 9, 2022 Solution Share Posted June 9, 2022 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. 2 Link to comment Share on other sites More sharing options...
coco Posted June 9, 2022 Author Share Posted June 9, 2022 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 ❤️ ! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now