Jump to content
GreenSock

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

Z-index effect through repainting?

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×