Starting multiples timelines at the same time

[Jean-Tilapin]

Hi Great Guys !

I'm facing a little problem here. I will try to publish a codepen - edit : Done - but the HTML structure and JS are quite complexe and the pen may be too hard and long to make for such a little problem.

Imagine a grid of hexagon tiles, like a beehive, full width and height. Each line has its own div. A background-image in full screen width is visible. Yes it was quite a pain in the *** to adjust the background-positions on hexagons, but it's done. Now each tile has a backface and when I rotate them, another full-screen image is visible.

The idea is too make a "wave-like" effect, from left to right, not a tile after another, but all the tiles of a same column together.

 

Here is an html structure sample :

<div class="hexa-grid">
  	<div class="grid-line odd-line" data-background="home_center_bg_large.jpg" data-foreground="home_left_bg_large.jpg">
      	<div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div>
      	<div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div>
      	<div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div>
      	[etc.]
	</div>
  	<div class="grid-line even-line">
      	<div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div>
      	<div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div>
      	<div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div>
      	[etc.]
	</div>
  	[multiple even and odd lines]
</div>

The JS files generate this structure with the right amount of lines and hexagons, then put the right background at the right position on each face.

Now, if I make something like :

for (var line of $('.grid-line')){
  var gallery = new TimelineLite();
  gallery.staggerTo(".hexagon-inner", 1, {rotationY:'180'}, 0.2);
}

Result is the same as when I don't make the for loop : each hexagon rotates but one at a time. I'd like to start all the lines animations at the same time.

 

How can I do that, please ? 

 

Bonus questions :

- of course, the idea is to loop and restart automatically this effect every 5 or 10 seconds...?

- do you think it's possible to add a third and eventually a fourth background on the invisible face between two loops of the animation ?

 

Thank you.

See the Pen vqYVRq by Jean-Tilapin (@Jean-Tilapin) on CodePen

[Jean-Tilapin]

No results yet :

I tried this :

var test = new TimelineMax({paused:true, repeat: -1}).add("start", 0);
$('.grid-line').each(()=>{
  test.staggerTo(".hexagon-inner", 0.5, {rotationY:'180'}, 0.2, 'start');        		
});

$('.logo-container').click(function(){
  test.play();
})

And still, each line waits for the previous animation to end before start.

 

And I'm noticing another wrong behavior - obviously my fault - but I could need some help to fix that too :

On repeat, I was expecting the hexagon to flip again and return to its first state. Instead, once the tiles are all flipped, bug :

- tiles position are brutally reset, bud badly : some tiles are half-flipped, other more or less. 

- then the animation restarts

[PointC]

I think this thread can help you:

 

Just FYI — simple demos are best. We don't need all the actual assets. Just a few divs and enough code to demonstrate the problem. Thanks.

[Anya]

@Jean-Tilapin

just passing by here..

I think your issue is in the loop, you're targeting all "hexagon-inner" elements collection, instead of only those that belong to the "grid-line" that you're looping, and also the start position can be set to 0.

This should work?

 

 

 test.staggerTo($(line).find(".hexagon-inner"), 0.5, {rotationY:'180'}, 0.2, 0); 

 

[Jean-Tilapin]

Yes ! Thank you both. Thanks to the other topic and Anya's response, I changed my code to :

var test = new TimelineMax({repeat: -1, repeatDelay: 3});
for(var i=0; i<nbLines; i++) {			 	
  test.staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 0.5, {rotationY:'180'}, 0.1, 0);
}

and it does the effect I was looking for (and it's pretty awesome in my opinion ;D).

 

Now if you look carefully, you can see that my animation resets at every loop instead of keeping spinning from Front to Back to Front again and so on.

I'm sorry, this is really a beginner question, but I don't even understand why it does that, so I can't correct it by myself. What should I add ? Or in what direction should I look for the answer ?

[Jonathan]

Hello @Jean-Tilapin and welcome to the GreenSock Forum!
 

7 hours ago, Jean-Tilapin said:

I'm sorry, this is really a beginner question, but I don't even understand why it does that, so I can't correct it by myself. What should I add ? Or in what direction should I look for the answer ?

 

You will get faster replies if you please create a limited codepen demo example. Since it will be hard to help you without seeing your code live and in context. Here is a video tut on how to create a codepen demo example.

 

 

Thanks

 

 

[Jean-Tilapin]

Thank you for your intervention. There is alreadry a codepen demo showing exactly what my problem is right in the first post of the topic.

[Anya]

my 2 cents again))

 

@Jean-Tilapin

First thing is you need to write your rotation values as relative instead of absolute, for ex "+=180", instead of 180, which means it will always add 180 on top of the current value.

 

Second, as i far as i know from the docs, if you want to repeat your timeline but keep the final values, you can invalidate the timeline and restart it on completion, this way it forgets the recorded values.

 

As for the delay between restarts, not sure about the best approach, but you could create a dummy tween with empty object after your animation.

For ex.:

var test = new TimelineMax({ onComplete: function(){test.invalidate().restart()}});
for(var i=0; i<nbLines; i++) {			 	
  test
    .staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 1, {rotationY:'+=180', ease: Circ.easeOut}, 0.1, 0)
    .to({}, 3, {})
}

 

[Jean-Tilapin]

Oh ! Thank you Anya ! You saved my day !

The "repeatDelay" function doesn't seem to work with that code. There might be a way to add a delay somewhere, I'll figure it out (the dummy line doesn't seem to have an effect).

Thanks again !

 

Edit :

var test = new TimelineMax({ onComplete: function(){test.invalidate().restart()}});
test
  	.to('.logo-container', 5, {x:0});
for(var i=0; i<nbLines; i++) {			 	
  	test			  		
    	.staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 1, {rotationY:'-=180', ease: Circ.easeOut}, 0.1, 0)
}

It works like this. Thanks everyone. Great forum, as always