Jump to content


Confusing behavior when using pause and resume

Moderator Tag

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



I am quite new to GSAP, so I guess one answer to my question is: «You have misunderstood some of the fundamentals of GSAP»


Anyway, here is my question:


I have a html-page like this (simplyfied):


<div id=’group1’ >

                <div id=’item1’ class=’item’>Text1</div>

                <div id=’item2’ class=’item’>Text2</div>

                <div id=’item3’ class=’item’>Text3</div>

                <div id=’item4’ class=’item’>Text4</div>



<div id=’group2’>

                <div id=’dest1’></div>

                <div id=’dest2’></div>

                <div id=’dest3’></div>

                <div id=’dest4’></div>



And a CSS-file like this:


#group1 {






#group2 {






.item {


width: 100px;

height: 30px;



Then I want to tween (move left) item1 … item4 into dest1 … dest4 so that the result is like this (some random positioning):


<div id=’group2’ >

<div id=’dest1’>

<div id=’item1’ class=’item’>Text3</div>


<div id=’dest2’>

<div id=’item1’ class=’item’>Text2</div>


<div id=’dest3’>

<div id=’item1’ class=’item’>Text4</div>


<div id=’dest4’>

<div id=’item1’ class=’item’>Text1</div>




I both tween the position (for visual movement) and then (on the onComplete callback) manipulate the DOM accordingly (for logical movement).

What I experience is that this works well when I just let the tweens (count of 4) finish.


I tween with like this (move 800px to the left):


tl.to($(‘#item3’), 1.0, {

left: -800px;

}, '+1.0');


This looks ok, but when I try tl.pause and tl.resume (lets say after the second tween) I observe that the div elements item1 and item2 gets moved 800px more to the left (i.e disappears from the page).

When I look into the DOM, I see that the left property is set to 0px after the tween, and when I pause and resume the left property is set to -800px.


I don't understand why the left properties changes just because I call "pause" and "resume"??




Link to comment
Share on other sites

Really tough to say by just looking at the code.

We'd love to help but please create a demo as described here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/


If the pause/resume problem can be replicated without the DOM - manipulation (moving elements into other elements) please leave that portion out. The less code we have to analyze the better.

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.