Jump to content
GreenSock

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

Fade in/Fade out (svg showing on load)

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

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:

 

https://greensock.com/docs/#/HTML5/Animation/TweenMax/fromTo/

 

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:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

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