[Stack static image on top of the animation?]

@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! 

[Stack static image on top of the animation?]

@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!

 

 

[Stack static image on top of the animation?]

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

[Stack static image on top of the animation?]

@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?

[Stack static image on top of the animation?]

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

[Stack static image on top of the animation?]

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. 

[Stack static image on top of the animation?]

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?

[Stack static image on top of the animation?]

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