Jump to content
Search Community

Z-index effect through repainting?

cooganb 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

Hi there! I'm trying to create an "orbit" effect with these two SVG objects. however, I'm reading that z-index doesn't really work within an animation, as SVGs are painted. Is there a way to have the effect of switching the z-index within an SVG?

 

I was also wondering if there was a way to make the effect smooth, so there isn't a jerk when the objects switch directions. Is that possible to change with ease?

 

Thanks in advance!

See the Pen EqeMjO by cooganb (@cooganb) on CodePen

Link to comment
Share on other sites

I'd probably recommend separating the two into unique SVGs and put them in their own divs. Then you can take advantage of z-index. As for the easing, yes you should be able to create a smoother animation by adjusting the easeIn and out for your moves. You can also use a CustomEase.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Yes, @PointC is right-on and I just wanted to add a couple of minor things: 

  • SVG doesn't have anything like z-index. It literally depends on the order of the elements  in the DOM for stacking order, so you can get the effect you're after only by re-ordering things in the DOM dynamically. Totally possible, but @PointC's recommendation is probably easier and possibly more performant. 
  • Sine.easeIn, Sine.easeOut and Sine.easeInOut eases are probably perfect for this type of thing. Other easeIn/easeOut/easeInOut pairs could look nice too, but Sine waves are literally EXACTLY what drive this type of effect in the real world. 
  • Like 3
Link to comment
Share on other sites

Sorry, I meant animate the divs, not the SVGs. Right now your parent divs (.priv-key-div and .pub-key-div) have no height because the child SVG is set to position:absolute. That's why your z-index isn't working.

 

Make sense?

 

Happy tweening.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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