Jump to content
Search Community

Problem repeat animation

DOOMinik test

By DOOMinik
in GSAP

Moderator Tag
 Share
Go to solution Solved by GreenSock,

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

DOOMinik test

DOOMinik

Posted
Posted

Hi.

I have problem to lunch the same animation again.

First animation is moving elements from top, to middle of the page and is launched on page load and it's working fine. Next I have two buttons. First "Move up" launch animation move elements to the top of the page and it's working fine as well.

 

And finally I have another button "Move down". This button should start animation that move elements again from the top page to the middle again, but it doesn't work. Absolutely nothing happens.

Can someone tell me why.

 

Bellow my code.

 

Thank you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="TweenMax.min.js"></script>

</head>
<body>
<div class="anim"></div>
<div class="anim"></div>
<div class="anim"></div>
<div class="anim"></div>
<div class="anim"></div>
<div class="anim"></div>
<div class="anim"></div>
<input type="button" id="Move_up" value="Move up">
<input type="button" id="Move_down" value="Move down">
<script src="script.js"></script>
</body>
</html>

.anim
{
    width: 100px;
    height:50px;
    margin: 5px;
    position: relative;
    background-color: aquamarine;
    float: left;
    top: 500px;

}
#Move_up
{
    position: absolute;
    bottom: 100px;
    left: 10px;
}
#Move_down
{
    position: absolute;
    bottom: 100px;
    right: 10px;
}

TweenMax.staggerFrom(".anim",0.5,{y:-500},0.2);

var anim1 = document.getElementById("Move_up");
anim1.addEventListener("click",function(){TweenMax.staggerTo(".anim",0.5,{y:-500},0.2);},false);


var anim2 = document.getElementById("Move_down");
anim2.addEventListener("click",function(){TweenMax.staggerFrom(".anim",0.5,{y:-500},0.2);},false);
Link to comment
Share on other sites
  • Solution
GreenSock test

GreenSock

Posted
  • Solution
Posted

I think it's just a logic issue in your code - you've got a staggerTo() that's animating y to -500 (fine), and then you've got a staggerFrom() that's animating from the same value (y:-500). Remember, a "from" tween animates from whatever its current value is to whatever you define. So if your staggerTo() runs and y gets to -500 and then you try doing a staggerFrom() y:-500, there's absolutely nothing to do because the starting and ending values are identical. You're basically saying "animate from y:-500 to y:-500". No movement. 

 

I'm not exactly sure what effect you're going for, but maybe it'd be easiest for you to just use staggerTo() tweens since sometimes "from" tweens can trip people up logic-wise. Perhaps you want one staggerTo() y:-500 and the other staggerTo() y:0? Or if you're trying to make it move by a relative amount each time, like "500 less than what it is now", you can use the "-=" prefix, like y:"-=500". 

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...