How to show the element in 3 seconds after page load?

[sunnie]

I set element id="text" opacity as 0. I want it to appear in  three seconds after page load. I am using delay, but it is not working.
 

See the Pen jLYaba by sunnie19 (@sunnie19) on CodePen.

[mikel]

Hi @sunnie,

 

Welcome to GreenSock Forums.

 

Please have a look to https://greensock.com/position-parameter

 

And: try to use visibility and autoAlpha instead of opacity; play with yoyo:true ...

 

See the Pen MvQjEN by mikeK (@mikeK) on CodePen.

 

Kind regards

Mikel

 

 

[Carl]

Mikel's example works great, but it also appears that switching the from() tween to a to() tween will do the trick as well

 

var tl = new TimelineMax({
    repeat: -1,
    repeatDelay: 3,
    delay:3
  });
tl.add("begin");
tl.to("#text",1,{opacity:1});

 

In your css you gave #text and opacity of 0 so you need to tween to an opacity of 1 for it to appear.

 

See the Pen mMXwyd?editors=0010 by GreenSock (@GreenSock) on CodePen.