Jump to content


Fade in/Fade out (svg showing on load)

Go to solution Solved by PointC,

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

Hello I am new to the forum,


I am having issues hiding the SVGs in this pen on load.


The timeline repeats itself properly, but I can't seem to execute it properly off the bat. Each SVG is shown until the timelines runs through.

See the Pen PWBQBw by tartufodalba (@tartufodalba) on CodePen

Link to comment
Share on other sites

  • Solution

Hi TartufoDAlba :)


Welcome to the GreenSock forum


from() tweens render immediately unless you tell them otherwise. You're looking for immediateRender to be false. Something like this:

.fromTo("#line1", 2.3, {autoAlpha: 1}, {autoAlpha: 0, immediateRender:false})

From the docs:

  • immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, setimmediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.


You could also just use to() tweens and setting immediateRender would not be necessary.


More info about from/fromTo tweens:




Hopefully that helps.


Happy tweening and welcome aboard.


  • Like 2
Link to comment
Share on other sites

Just to add my two bits...


You can also add the CSS property visibility: hidden in your CSS stylesheet can help prevent the element form showing on load. Since you are using autoAlpha which animates opacity and sets visibility hidden:


CSSPlugin Docs:



  • autoAlpha
    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});


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