Confusing behavior when using pause and resume

[Øyvind]

Hi

 

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>

 

<div id=’group2’>

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

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

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

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

</div>

 

And a CSS-file like this:

 

#group1 {

position:absolute;

left:900px;

top:100px

}

 

#group2 {

position:absolute;

left:100px;

top:100px

}

 

.item {

position:absolute;

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>

<div id=’dest2’>

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

</div>

<div id=’dest3’>

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

</div>

<div id=’dest4’>

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

</div>

</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"??

 

Anyone?

 

[Carl]

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.