How to make divs constantly appearing and disappearing

[bobby91]

Hi, I am new at GreenSock, started a day ago.

I want to make make divs constantly disappearing and appearing. I menage to make it works with only one iteration, but when I add repeat it doesnt work. Dont know what i am doing wrong.

 

This is my code for one iteration:

 

TweenMax.staggerTo(".bla", 1,  {opacity:0}, 1);

TweenMax.staggerTo(".bla", 1,  {opacity:1, delay:1}, 1);

 

 

This is my code for infinitely iterations

 

TweenMax.staggerTo(".bla", 1,  {opacity:0, repeat:-1, repeatDelay:10}, 1);

TweenMax.staggerTo(".bla", 1,  {opacity:1, delay:1, repeat:-1, repeatDelay:10}, 1);

 

[Diaco]

Hi bobby91   Welcome to GreenSock forum

 

- pls make a reduced Codepen Demo available :

 

Read This First: How to Create a CodePen Demo

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

 

- check GSAP Docs. too : http://greensock.com/docs/#/HTML5/

 

 

- and finaly try this and fork it if you have any problem : 

See the Pen dPeXWW by MAW (@MAW) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

Like Diaco suggested, we will be able to help you much quicker and efficiently with a demo.

 

From what you are explaining, I think the best solution here is a repeating TimelineMax with a single staggerTo that contains repeating tweens

var tl = new TimelineMax({repeat:-1});
tl.staggerTo(".box", 0.5,  {opacity:0, repeat:1, yoyo:true}, 1);

http://codepen.io/GreenSock/pen/MYGvQp

 

My guess is that you were creating overlapping tweens on the same elements and they were overwriting (killing) each other.

 

This video will introduce you to the concept of timelines: http://greensock.com/sequence-video

 

Be sure to read the TimelineLite and TimelineMax pages

http://greensock.com/timelinelite

http://greensock.com/timelinemax

 

and the docs too

http://greensock.com/docs/#/HTML5/GSAP/