Jump to content

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

Natural Rotation Animation - Same Element on Two Timelines

Go to solution Solved by Jonathan,

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



I have been experiencing some problems regarding my animation. I want to animate the three red circles circling around the image in the center along the blue line paths and the circles gradually disappear behind the images once encountered (not opacity going to 0, but being covered by the image gradually). I somehow made it work on the way that the circle goes behind, by displaying a duplicated image on top that was set to display: none, for 1 second. 


So the repeated master timeline works like:

3 timelines for 3 Circles slide on the visible curve (3.5s) and shift for some other distance(1s) -- happen all at point 0s

1 timeline image display: block (1s) -- while circles going in and out from behind the image -- happen at point 3.5s


But I couldn't make it work when I tried to set the cover image to display: block again for .3s in a different timeline (patch_two) and made it only happen on time point 4.5s when the previous timelines finish and right at when the circles are coming out which will make them look like they just finished traveling behind the image.


 Instead, the circles just looped behind the cover image when the image could not go back to display: none.


I'm confused of what the problem is and wonder if there could be a less-hassle solution.




Thank you!

See the Pen NAmwyz by lifvic (@lifvic) on CodePen

Link to comment
Share on other sites

Hello, and Welcome to the GreenSock forum!

Thank you for the example, very helpful.


One thing when dealing with SVG is to NOT set the element to display none. This is because when you do that in SVG you are removing that element from the SVG render tree.


SVG display: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display


It is much better is you just hide the elements using autoAlpha or you can change the visibility attribute to hidden and back to visible.


autoAlpha is part of the CSSPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
    //fade out and set visibility:hidden
    TweenLite.to(element, 2, {autoAlpha:0});
    //in 2 seconds, fade back in with visibility:visible
    TweenLite.to(element, 2, {autoAlpha:1, delay:2});

Or you can use the following:


SVG visibility attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility


Something like this using the GSAP AttrPlugin

.to("#patch", 1, {attr:{visibility: "visible"}});

And the svg image element would have a visibility attribute

<!-- visibility="hidden" -->
<image id="patch" visibility="hidden" width="500" height="388" transform="translate(374.01 82.52) scale(0.5)" xlink:href="http://kuetherbrainandspine.com/wp-content/uploads/2016/01/How-exercise-boosts-a-brain.jpg"/>

I also noticed you have a to() tween to animate display block. display block is static text so it wont animate it will just turn on or off.


Also i was wondering if it would be better if your image was using an <img> tag instead, animated separately in sequence to your circle elements? So this way you can take advantage of using z-index or using 3D transforms z-axis. Since SVG 1.1 does not support z-index or CSS 3D transforms.


With z-index or 3D transforms z (translateZ) you can change the stacking order and stacking context bring the img tag forward and back. Since the SVG order is only changed by the order of the SVG elements in the DOM. SVG is limited in this regard. So with SVG you would have to append and prepend the image element constantly to bring it backward and forward.



Link to comment
Share on other sites

Hi Jonathan,
Thanks for the detailed explanation! I tried both ways but had no luck with either one. 
So I changed the tag to <img> and set the original z-index to -1, and then animate the zIndex to 1 (or some other bigger numbers which I also tried). But the img seems to not appear at all no matter I put inside or outside of svg or how much zIndex I gave it.
Could it be something I did wrong here?

#patch {
  z-index: -1;



.to("#patch", 1, {css:{zIndex:1}});

Thanks so much!



See the Pen NAmwyz by lifvic (@lifvic) on CodePen

Link to comment
Share on other sites

  • Solution

z-index wont work on SVG child elements. SVG get their stacking context by the order they are in the DOM within their parent <svg> element.

See SVG 1.1 spec Rendering Order:



  • 3.3 Rendering Order

    Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements.

You would have to use JS to append() (push lower stacking context) or prepend() (push higher stacking context) the SVG child elements, so you can change the stacking rendering order.


SVG 2.0 will support a z-index attribute but that wont be available for awhile. :(


If you don't want to use JS prepend() or append(), then you can use multiple SVG tags with your SVG child parts since a <svg> tag can accept the use of z-index along with position absolute. But not its children elements. Or use a regular <img> tag and change that z-index order, since it is a regular DOM element.



  • Like 3
Link to comment
Share on other sites

Hi Jonathan,


I finally made it work with prepend()! Thanks for your help! :)

  • Like 1
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.