Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cooganb

Z-index effect through repainting?

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

@PointC and @GreenSock Thank you! I didn't think about making each their own unique SVG -- I will give it a try now!

Link to comment
Share on other sites

@PointC and @GreenSock I did as recommended, put them in separate SVGs, wrapped each SVG in a <div>, then put a class on the <div> However, the z-index is still not changing. Here's the codepen I'm working off of:

 

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

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