Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Gillian

staggerFrom doesn't work on div elements

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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;

 

Link to comment
Share on other sites

  • Solution

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.

:)

  • Like 1
Link to comment
Share on other sites

Good Catch PointC :)

Link to comment
Share on other sites

Yes it works perfectly now!

Thank you very much. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×