Jump to content
Search Community

Øyvind

Members
  • Posts

    3
  • Joined

  • Last visited

Øyvind's Achievements

0

Reputation

  1. 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?
  2. Thank you, Jamie and Jack! You saved my day
  3. 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!
×
×
  • Create New...