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?