Search the Community
Showing results for tags 'repeating'.
Found 5 results
-
Hi there, Please excuse the terrible example that I have provided. It has all the correct code except some styles have been omitted. I have an issue where the div with class 'typing-indicator' is repeating it's animation. In the timeline, it should fade in to opacity 1 over 2.5 seconds. Despite my trying to remove the style attribute from that element, the animation then starts to play again and goes from opacity 0 to 1. Any help would be appreciated. If you need more info then let me know
-
Hi there, I am trying to animate a car moving along a road and need the wheels rotation and the chassis bouncing to stop as the road runs out. It's not looking too bad except that i can't get the chassis and tyre vars to finish after the rest of the timeline finishes. The code below simply pauses everything from the start. Sorry if the answer is obvious... <script type="text/javascript"> var chassis = new TweenMax.to ("#chassis", .1, {top:1, yoyo:true, repeat:-1}) var tyre = new TweenMax.to ("#tyre", .5, {rotation:360, transformOrigin:"50% 50%", repeat:-1, ease:Linear.easeNone}) var tl = new TimelineMax(); tl .from("#suv", 8, {left:20, ease:Elastic.easeInOut}, "start") .from("#shop", 6, {left:1456}, "start") .to("#road", 6, {left:-1456}, "start") chassis.pause(); tyre.pause(); </script> Thanks in advance, Phil
-
Hello... first of all amazing library, so useful. I've been getting to know the library and am trying to make a single master timeline that has different "scenes", then user interaction can play from one scene to the next, stop, and wait from user input. One thing I've found, however, is that if you have an infinitely repeated animation, this will effectively push the playhead to a huge time in the future (representing "infinity" i'm assuming), then any label added after this will be at that point in the future. Very simple example here: http://jsfiddle.net/NK3pe/2/ I don't want to jump to conclusions and my approach might certainly be wrong, but wouldn't it make more sense that infinitely repeated animations should not affect the timeline head, as it's assumed that you wouldn't/couldn't put anything after them anyway? I've looked around the forums and have seen example that pull the tween out of the flow and use callbacks to restart it, etc, but is all that really necessary or is there a simple way that I'm missing? The problem wouldn't be so bad except that even nested timelines affect their parents, so even one nested repeating animation will effectively push the master's playhead out to infinity. Also, I realize that I can add an absolute position to subsequent tweens, but then I would have to add them to ALL tweens after a repeated one, and have to tweak each one if an earlier animation duration changed, etc... Is there something basic I'm missing here?
-
I'm using this simple code to make my div button fade in and off automatically and it suppose to repeat itself....... var tl = new TimelineMax({repeat:-1}); tl.from($('#slideScrollBtn'), 1, {autoAlpha:0}) .from($('#slideScrollBtn'), 1, {autoAlpha:1,ease:Power1.easeOut}); it works fine in chrome and firefox but when I tested in IE8 the animation works fine in the first 2 rounds then it stuck. Where did I go wrong?
-
Hey guys, Found some behaviour that's causing me issues. I have an animation of a vehicle, that's yoyo-ing from left to right infinitely. In the onRepeat callback i'm flipping scaleX between 1 & -1 to flip the graphic. The problem happens when the browser tab is not active. The timeline may have repeated multiple times, however the onRepeat callback is only fired once when focus is returned to the tab. Therefore the orientation of the graphic can become out of sync with the actual direction. I realise that RAF halts all callbacks when the tab is inactive so, but I would have expected the onRepeat callback to be fired retroactively for the number of times the animation has technically repeated. Is the behaviour intended or a GSAP bug? For the moment I have changed my code to manually change direction based on the x vector in the onUpdate callback. Hope I've not rambled too much Look forward to your reply. Rob
