Fade in/Fade out (svg showing on load)

[TartufoDAlba]

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

[PointC]

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.

[Jonathan]

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