Stack static image on top of the animation?

[electricarts]

Hello,

 

I started to look into GSAP today. And what better way to learn than with a real, very simple example. 😉 It worked right away. But one question remains: I have an image which simply rotates infinitely. In the middle of the original image is a logo, but I don't want to animate this logo. What do you do as a best practice? Two separate images and the logo absolutely positioned above the animated graphic? 

 

Cheers
Mario

 

 

[Cassie]

I think there's too much focus on 'best practices' nowadays - I tend to go with 'If it works it works'

Two images would work here, as would using an SVG with separate grouped elements. Whatever is easiest for you and whatever works is likely the best solution.

 

Glad to hear you're enjoying the tools!

[electricarts]

Hey Cassie,

 

thanks a lot for your answer! At the moment 2 images were easier to implement. 🙂

 

I have created the original graphic and can create and export appropriate groups in the SVG. But how do i address only the group to animate in the animation? What would i have to look for in the docs?

[Cassie]

If you export out the SVG then open it up in a text editor you'll be able to see the SVG markup.
 

pop the SVG markup into a demo on CodePen for me and I'll show you how ☺️

[electricarts]

That's quite nice of you!

 

I don't know if I did this right, but here is the codepen demo:

See the Pen PoQWbWJ by electricarts (@electricarts) on CodePen

 

There are two "main" groups: <g id="Outer_Ring"> and <g id="Phoenix">. The Outer Ring should be animated and the Phoenix should not. 

[mvaneijgen]

@electricarts I'll let @Cassie show you the solution, but I would encourage you to update your pen with some GSAP code that you think it could be. I'll bet you that as soon as you try something you'll find the solution!

[Cassie]

Hey!

 

Ok, with that output I wouldn't suggest SVG - for some reason you've got lots of encoded PNG data of the color red in there, with clip paths added to create the shape of the dragon. That's going to make your markup really bloated.

If it was all SVG paths it would be much better - or even an image in the center.

This markup's been simplified down using SVGOMG (and a little manual tweaking) Even then - there's a lot of markup here because the text is all saved as paths instead of text elements.

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

 

Here's an article on SVG optimising
https://css-tricks.com/high-performance-svgs

 

 

[electricarts]

@mvaneijgen My solution consisted of two images. The second, static SVG file was absolute positioned. The animation of the ring worked. I didn't want to mix this with the second possible solution (both graphics inside the SVG files), so I created the Codepen without GSAP code in the demo. Sorry, next time I'll make a demo right away. 

[electricarts]

@Cassie 

Thank you very much! The Phoenix did not come from me. I'll have to take a closer look and clean it up. 

The conversion of the text to paths comes from the use of the graphic in the print. Print is my "Kryptonite". I try to avoid as many sources of error as possible when printing. And embedded fonts are sometimes problematic in print. In SVG for web, text should not be converted to paths, right?

[Cassie]

I'm afraid the answer to that is very much 'it depends.'

 

I tend to convert small amounts of text to paths if I'm animating it, but if you've got a lot of descriptive text it's better for file size and accessibility to keep it to text elements

https://css-tricks.com/accessible-svgs/

[electricarts]

Ok. SVG reworked. File size now only 75 kb instead of 467 kb. 😉 But now another problem appears. The animation "jerks" and does not rotate as smooth as before. Did I forget or set some setting wrong?

 

See the Pen BaYpxQj by electricarts (@electricarts) on CodePen

[PointC]

If the browser struggles a bit, you can always try rotating the whole SVG (or a div containing the SVG) and use a counter rotation on the middle group you want to appear stationary.

 

See the Pen 60d332b7a2a8fabc9d8d1e2eb155432e by PointC (@PointC) on CodePen

 

Just my two cents.

 

Happy tweening.

 

 

 

[Cassie]

1 hour ago, electricarts said:

Ok. SVG reworked. File size now only 75 kb instead of 467 kb. 😉 But now another problem appears. The animation "jerks" and does not rotate as smooth as before. Did I forget or set some setting wrong?

Interesting, looks like the browser's struggling more with text elements than paths 

[electricarts]

@PointC I did that now and animated the div. The animation is now a little bit smoother. Not perfect, but better. Thanks for the tip!

 

 

[electricarts]

@Cassie And it is browser dependent. In Safari the animation runs smooth like butter. FF, Edge and Brave (all macOS) have problems. 

 

And in FF, the animation with the optimized svg needs more than twice as much CPU resources! 

[PointC]

1 hour ago, electricarts said:

In Safari the animation runs smooth like butter. FF, Edge and Brave (all macOS) have problems. 

On Windows it's perfect for me in FF, but chugs pretty hard in Chrome and Edge. Browsers are such fun. 🤷‍♂️

 

Yeah - there are times when just exporting a .png or .webp is the preferred option. Using an SVG as a background image for a div can also help. Lots of little tips and tricks to try when the browser struggles.

 

Best of luck on the project.