Jump to content


  • Posts

  • Joined

  • Last visited


4 Newbie
  1. Thank you very much guys, this woks perfectly. GSAP is hard to master but it's totally worth it !
  2. Sorry to bump, but I really can't get this working. To be clear I need to add to a timeline (so I can pause) several elements, each of them with the same tween but with a different offset. http://codepen.io/anon/pen/gyCBq Thanks for you help.
  3. Sorry to bother but the add() technique does not work in this case. See updated pen : http://codepen.io/anon/pen/gyCBq With TL.pause() elements are where they should be. But without TL.pause(), or with TL.resume(), they are packed at the start position. Is this expected ? Thank you
  4. This link is very useful, thanks for that.
  5. Hello Rodrigo, Thanks for your answer. 1) Thanks, with the add method it works perfectly, I don't know why I did not think to do this before, I still need to work on my GS knowledge ! 2) Ok, I was talking about several hours of looping, but I'll do some further research and open a post if I find something. Anyway these kind of issues seems more browser-related. 3) I meant that over the time, elements can be sometimes packed in a specific area of the container. It's definitely not a GS issue and it's totally related to JS coding (speed should be changed every loop), but I was asking just in case someone had a magic technique. Thanks anyway
  6. Hi all, I'm trying to simulate moving clouds with Greensock. Here is the codepend : http://codepen.io/anon/pen/gyCBq All clouds share the same tween, but they are given different speed and top values. Also the main purpose is a different horizontal offset so that the effects actually works. This animation has several problems : - I can't make tlCloud.pause(); working. I have tried different techniques for injecting tweens but none seems to work when you add offset. seek() is the best I can do so far. - It seems that looping the animation consume more and more memory over time. I'm not really sure about this though because I id not have the time to test it carefully. Is it something supposed to happen with this kind of calls ? - Different speed on each elements is a nice idea but after several loops it starts to look weird, some area are covered with elements and some are totally blank. I don't expect a GS function to manage this for me as this is a very specific need, but if you have a hint to give I would take it with pleasure. Thank you very much
  7. Thanks Jamie I finally solved this by clearing my timeline on each turn. Really impressed by support quality here
  8. @Karl thanks this is great, nice technique. But this kind of loop starts glitching from the second lap, same problem I mention above, I don't know why. But I was lucky enough to have a opacity:0 step inmy animation so I can quietly clear the timeline at each loop. @Rodrigo thank you that is neat, I will keep this for next time. If I have time I will port my anim to your technique and see if glitches are still here. Thanks for awesome support.
  9. Well thank you guys ! @Greensock indeed the 1.11.3 preview fixes the issue. That's awesome. Can't wait to see the changelog !! @ Jamie that works perfectly, thanks ! edit: I don't know if it is an expected behavior, but when your animation loops the pause will repeat each time, even if you have called resume(). Is there a way to simulate removePause() ? I'm stunned by the reactivity here on the forum, the precision and the politeness of the answers. Many thanks for all of this !!
  10. Trouble with the pause() method is that the animation jumps straight to the point. I need to define in advance the point where the animation is going to stop, but I don't want any jump in the animation. Do I have any solution ? Labels maybe, even though it is much less flexible (restricted to tweens callbacks).
  11. Hi Jamie, Thanks for your answer. Here is a fiddle demonstrating the issue : http://jsfiddle.net/LBDAB/10/ Thanks for your help.
  12. Hi all, I have a timeline controlling several tweens. I can pause and resume it with no problem. However when I call the addPause(X) method, X being a number, I can't resume or play the timeline anymore after that. Thanks for your help
  13. Thanks Rodrigo for this demo ! However I'm still afraid it doesn't fit, or at least I didn't manage to adapt your technique. Here is a fiddle of the whole stuff : http://jsfiddle.net/LBDAB/5/ The animation is supposed to loop without that ugly stop on each turn (top left corner). As you can see the loop is based on the number of coordinates points, when your demo loops on the number of targets. I have to do it that way because of the massive number of coordinates I have to inject. I don't know if this has an impact on how GSAP handle the animation ? Also I can't use Bezier because I need callbacks and css properties every step. Also after the first loop there are some minor glitches visible (on the real project which is more complex), always at the same coordinates (they shifts if I shift coordinates, so it doesn't seems to be my code). If you have any advice that would be very kind. Thanks a lot
  14. Hi Rodrigo, And thank you very much for your answer. My problem is still present on your codepen. I'd like the animation to be smooth when the delays have loaded. On the pen, the first wagon (for example) starts and stops 5 times, 1 time for each wagon, but I'd like it to tween smoothly after the first delay. Same for every wagon, so that you feel the train just starts and move away. For now it feels that the train starts and stop 5 times. That is precisely what I can't come up with. Don't hesistate to tell me if it's unclear, I'll make a pen. Thanks a lot
  15. Hi and thanks for your very nice work, discovering GSAP was a relief. Sorry if this seems trivial but I've searched everywhere with no luck : I have a single time line with multiple selectors. They share the same teens, except I'd like to have a single delay on the first tween only. My goal is to simulate a train a several wagons. The first wagon starts, then 0.5s later the second wagon start, then 0.5s later, the third wagon starts, etc. Here is where I am so far : var delay = 0.5; for (var step in tlTrain) { tl.appendMultiple(TweenMax.allTo([wagon0, wagon1, wagon2, wagon3], tlSpeed, { x: tlX, y: tlY }, delay)); delay = 0; } It works at first but after the first teen, all the wagons stop and gather before resarting all together. Thanks in advance for any advice. Edit : I have discovered a semi-workaround : put a negative delay number, and reverse the selectors order. But but there is a pause at the end of the loop, and aniamtion becomes sometimes laggy.