[Confusing behavior when using pause and resume]

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?

 

[Tween div within div]

Thank you, Jamie and Jack! You saved my day 

[Tween div within div]

Hi!

 

Is it not possible to tween (move) a div within another div? I can't get this to work. Color-changing or opacity tweens ok...

 

I am really new to this, and I have a dynamic number of divs that I wnat to put inside a "managing" div. Then I want to move this divs one by one.

Please help!