staggerFrom doesn't work on div elements

[Gillian 0 Likes (Newbie)]

Hi all,

 

I'm a beginner with GSAP and I've got a problem with the "staggerFrom" tween.

All "move" divs are animated : they are coming together (like one raw) and not one by one. I don't understand why, I don't know where the problem is. Could you help me, please ? Thank you very much.

 

Here is my HTML code :

<div class="consigne"><b>Complète les expressions à l’aide des mots suivants :<br><br>  
  <div class="move" id="word1">vol</div> 
  <div class="move" id="word2">nuée</div>
  <div class="move" id="word3">rangée</div>
  <div class="move" id="word4">bande</div>
  <div class="move" id="word5">tas</div>
  <div class="move" id="word6">pile</div></b>
</div>

My CSS code :
 

.consigne {
font-family: arial;
font-size: 1.2em;
margin-left: 5%;
margin-top: 5%;
}


.move {
color: white;
padding-left: 20px;
padding-right: 20px;
padding-top: 3px;
padding-bottom: 3px;
border-radius: 5px;
display: inline-block;
}

#word1 {
background-color: #99009C;
box-shadow: 0 0 1px #99009C;
}


#word2 {
background-color: #51DB00;
box-shadow: 0 0 1px #51DB00;
}


#word3 {
background-color: #19B5FF;
box-shadow: 0 0 1px #19B5FF;
}


#word4 {
background-color: #FF8F00;
box-shadow: 0 0 1px #FF8F00;
}


#word5 {
background-color: #FF1714;
box-shadow: 0 0 1px #FF1714;
}


#word6 {
background-color: #FFCB00;
box-shadow: 0 0 1px #FFCB00;
}

And my JS code :

TweenMax.staggerFrom(".move", 2, {opacity:0, y:500}), 0.2;

 

[PointC 8,599 Likes (Superhero)]

Hi Gillian 

 

Welcome to the GreenSock forums.

 

There's just a typo in your tween. Please change it to this and it will all work fine.

TweenMax.staggerFrom(".move", 2, {opacity:0, y:500}, 0.2);

Happy tweening.

[Jonathan 5,176 Likes (Superhero)]

Good Catch PointC

[Gillian 0 Likes (Newbie)]

Yes it works perfectly now!

Thank you very much.