Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'repeat'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 72 results

  1. Hi, I am new to Greensock and I really love it so far! Today I was struggling with setting a random duration on a tween or timeline object. I created a helper function that returned a random value for the duration. In the tween properties I called the function on the duration property. However, the random value only was set once and the function was never called afterwards, although the animation was infinite by setting repeat: -1. I found the property repeatRefresh, but the docs say: What am I doing wrong and how can I set dynamic values for duration or delay for each new repetition of my animation? Thanks for some hints in advance!
  2. Hi, I have a SVG I have created. You can see it by following the link to the codpen url. I want to create an animation to repeat the DNA pattern indefinitely at 45 degrees while keeping it inside the circle. I go no clue where to start :D
  3. Hey there, I have a Timelinelite instance where I running both "single shot" and "repeating" animations, however, I'd like the "timeline.totalDuration()" to not include repeat. My goal from the below is to get a total duration of 1.5sec , that is duration without repeat. Is there a method I can use to get that? Thanks. const timeline = new Timelinelite({paused: true}); timeline //Animation A ( 1 second duration) .to('#box',{x: 0,duration: 1 }, 0) //Animation B ( 0.5 second duration) .fromTo('#box',{x: currentX - 2},{x:currentX + 2,duration: 0.5, repeat: -1}, 0.5);
  4. Hello! I don't speak English well .. I have a question using TweenMax I'm asking the right question here? I want Controlling a lot of TweenMax in my project I want visual() function run -> reset I want to Infinite repeat this function Please help me. I am a beginner. ? I made the code like this. ⬇️ <script type="text/javascript"> $(document).ready(function() { var visual= function() { var $con_03_mobile = $('.top_con .motion_mobile') , $con_03_01 = $('.con_03 .motion01') , $con_03_02 = $('.con_03 .motion02') , $con_03_03 = $('.con_03 .motion03') , $con_03_04 = $('.con_03 .motion04') , $con_03_05 = $('.con_03 .motion05') , $dim1 = $('.con_03 .dim1') , $dim2 = $('.con_03 .dim2') , $mask = $('.con_03 .mask') , $mask2 = $('.con_03 .mask2') function a5(){ TweenMax.fromTo($con_03_04, 0.6, {x:'8px', y:'184'}, {x:'8px',y:'8px', ease: Power2.easeIn, onComplete: function(){ TweenMax.fromTo($con_03_05, 0.3, {opacity:'0'}, {opacity:1, ease: Power2.easeIn, onComplete: function(){ }}); }}); TweenMax.fromTo($con_03_04, 0.1, {opacity:'0'}, {opacity:1, ease: Power2.easeIn, onComplete: function(){ }}); } function a4(){ TweenMax.fromTo($dim1, 0.5, {opacity:'0'}, {opacity:0.8, ease: Power2.easeIn, onComplete: function(){ }}); TweenMax.fromTo($con_03_03, 0.7, {x:'8px', y:'184'}, {x:'8px',y:'8px', ease: Power2.easeIn, onComplete: function(){ TweenMax.fromTo($con_03_03, 0.3, {opacity:'1'}, {opacity:0, ease: Power2.easeIn, onComplete: function(){ }}); setTimeout(a5, 100) }}); TweenMax.fromTo($con_03_03, 0.1, {opacity:'0'}, {opacity:1, ease: Power2.easeIn, onComplete: function(){ }}); } TweenMax.fromTo($con_03_02, 0.8, {x:'200', y:'0'}, {x:'8px',y:'8px', ease: Power2.ease, onComplete: function(){ setTimeout(a4, 200) }}); } });
  5. Hi, 1. I have a second hand of a clock rotating for 60 seconds 2. I have a minute hand of a clock that should rotate 360/60 after every 60 seconds. The problem is I am using reapeatDelay to delay the minute hand for every 60 seconds but when it plays again, it resets back to the original position 0deg. How do I make the rotate animation continue from where it stopped? Here is a pen https://codepen.io/codebeast/pen/gNNaRp In the pen above, I changed the timing from 60sec to 5sec so you can see what's going on faster.
  6. Hi there, I'm trying to make an animation to repeat infinitely with a TimelineMax instance that includes a pause. var tl = new TimelineMax({ repeat: -1 }) .to(repeatWithPause, 0.5, { rotation: 180 }) .to(repeatWithPause, 0.5, { rotation: 0 }) .addPause(1.0); You can see in the codepen what I've tried so far. It seems I'm able to repeat several times the first animation. But as soon as I add a pause in the timeline, only the first iteration is played. The same applies for repeat > 1 and when the addPause() isn't at the end of the timeline. I might be doing something wrong. Any help appreciated.
  7. I am new to GSAP and I am trying to figure out what is the best way to fire a callback function at the beginning and end or a repeating animation. Here is the code i've tried so far: var tl = new TimelineMax({ delay: 3.0, repeat: -1, repeatDelay: 3.0, yoyo: true, onRepeat: function () { console.log("on repeat, called with delay...bad") }, onReverseComplete: function () { console.log("reverse complete, never called bacause of repeat forever") } }) A few things to keep in mind: I would like the callback function to execute BEFORE the delay on the animation start (playing forward) and on the reverse (playing reverse). So the timeline should execute like this: Start -> callback -> delay -> play animation -> animation end - > callback -> delay -> reverse animation -> reverse end -> callback -> delay (repeat forever) (Start and callback can be swapped, as long as the callback happens before the delay) Any help would be greatly appreciated. Thanks.
  8. Hi There, I am not quite sure why the following code which simply repeats a timeline that plays a animated sprite twice works fine: TL = new TimelineMax({repeat:1}); TL.stop(); TL.set([spriteSheet], {x:0}); TL.play(); TL.addLabel("f1", "0") TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0"); TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)}); but if I add another tween after the sprite stepped ease animation, the sprite is not reanimated on the repeat but the new tween is animated twice as per the repeat:1 TL = new TimelineMax({repeat:1}); TL.stop(); TL.set([spriteSheet], {x:0}); TL.play(); TL.addLabel("f1", "0") TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0"); TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)}); TL.to(beam, .5, {autoAlpha:.8, y:80, x:-35, scaleX:.35, scaleY:.35, ease:Sine.easeOut}, "f1+=1.9"); Ive tried resetting the the sprites x position with different methods but still it will not replay and seems to always hold on the first frame. Any help appreciated as Ive spent a few hours trying different solutions without success
  9. Hi. This is my first time using Greensock, also I'm a beginner in javascript. I don't know if my code is beautiful or not, and I ask you to not pay too much attention to that aspect (or maybe you should, that'd help me) Basically, everything is working as I want it to, there's just one minor change I want: Before the text fades out again, I want there to be a delay again. I don't know how or where to put that delay in. All suggestions are welcome : )
  10. Hi, I´m new to this but i love it so far....except for this problem. I made several timelines for my animations, but i can´t get them to loop/repeat. One works fine, but ill guess I´ll have to nest them some way? Or have I got it all wrong?? var t1 = new TimelineMax(); t1.to(txt1_1, 0.5, {opacity:1, ease: Power2.easeOut}).to(txt1_1, 11, {opacity:1}).to(txt1_1, 0.5, {opacity:0, left: -300}); var t2 = new TimelineMax(); t2.to(txt1_2, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_2, 2, {opacity:1}).to(txt1_2, 0.5, {opacity:0, top:30}); var t3 = new TimelineMax(); t3.to(txt1_3, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:3}).to(txt1_3, 2, {opacity:1}).to(txt1_3, 0.5, {opacity:0, top:30}); var t4 = new TimelineMax(); t4.to(txt1_4, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:6}).to(txt1_4, 2, {opacity:1}).to(txt1_4, 0.5, {opacity:0, top:30}); var t5 = new TimelineMax(); t5.to(txt1_5, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:9}).to(txt1_5, 2, {opacity:1}).to(txt1_5, 0.5, {opacity:0, left: -300}) ; var tlp1 = new TimelineMax(); tlp1.to(panel1, 0.5, {opacity:1, ease: Power2.easeIn, left:0, delay:12}).to(panel1, 5, {opacity:1}).to(panel1, 0.5, {opacity:0}); var tlp2 = new TimelineMax(); tlp2.to(panel2, 0.5, {opacity:1, left: 680, ease: Back.easeOut.config(1.2), delay:11.5}).to(panel2, 5.5, {opacity:1}).to(panel2, 0.5, {opacity:0});
  11. Hi, Is there a way to access the current iteration of a repeating Timeline? I would like to stop the loop just after the last digit is shown at the last repeat of this numeric counter. This is an automatically generated frame animation: COUNTER1tl=new TimelineMax({repeat:99}); COUNTER1tl .addLabel('d') .set(digit_1,{autoAlpha:1}) .set(digit_2,{autoAlpha:0}) .set(digit_3,{autoAlpha:0}) .set(digit_4,{autoAlpha:0}) .set(digit_5,{autoAlpha:0}) .set(digit_6,{autoAlpha:0}) .set(digit_7,{autoAlpha:0}) .set(digit_8,{autoAlpha:0}) .set(digit_9,{autoAlpha:0}) .set(digit_10,{autoAlpha:0}) .to(digit_1,0,{autoAlpha:1},'d+=0') .to(digit_1,0,{autoAlpha:0},'d+=0.02') .to(digit_2,0,{autoAlpha:1},'d+=0.02') .to(digit_2,0,{autoAlpha:0},'d+=0.04') .to(digit_3,0,{autoAlpha:1},'d+=0.04') .to(digit_3,0,{autoAlpha:0},'d+=0.06') .to(digit_4,0,{autoAlpha:1},'d+=0.06') .to(digit_4,0,{autoAlpha:0},'d+=0.08') .to(digit_5,0,{autoAlpha:1},'d+=0.08') .to(digit_5,0,{autoAlpha:0},'d+=0.1') .to(digit_6,0,{autoAlpha:1},'d+=0.1') .to(digit_6,0,{autoAlpha:0},'d+=0.12') .to(digit_7,0,{autoAlpha:1},'d+=0.12') .to(digit_7,0,{autoAlpha:0},'d+=0.14') .to(digit_8,0,{autoAlpha:1},'d+=0.14') .to(digit_8,0,{autoAlpha:0},'d+=0.16') .to(digit_9,0,{autoAlpha:1},'d+=0.16') .to(digit_9,0,{autoAlpha:0},'d+=0.18') .to(digit_10,0,{autoAlpha:1, onComplete: function(){ /* stop if last repeat */ }},'d+=0.18') .to(digit_10,0,{autoAlpha:0},'d+=0.2') ; If I put a counter variable into the code var COUNTER1_repeat = 99 and decrement it .to(digit_10,0,{autoAlpha:1, onComplete: function(){ if ( !COUNTER1_repeat-- ){ COUNTER1tl.pause() } } }, 'd+=1.8' ) the code works, but seems like a workaround. Not nice in my opinion. Thanks a lot, Oliver
  12. how to repeat this kind of callbacks based animation, I cant repeat this entire animation, each tween start based on callback please answer this problem TweenMax.to(".div1",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div2",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div3",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div4",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){}}); }}); }}); }});
  13. Hi, I have a timeline which I created beforehand and put it on pause. Then on trigger I run it with tl.play(0) it plays correctly the very first time but subsequent repeats are not right. What am I missing? Thanks for help!
  14. Hi, Is it possible to create a timeline that after playing for the first time, when it repeats it starts from a different point in the timeline? In the example below (CodePen included) I'd like the timeline to play through once from the start, and then after this when the repeat kicks in I'd like it to start from the "start" label. It will basically remove the initial fading in off all the elements after the first play. var tl1 = new TimelineMax({repeat: -1}); tl1 .to(".box", 2, {opacity: 1}) .add("start") // would like animation to start from here when repeating .to("#box-1", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-2", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-3", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-4", 1, {scale: 0, ease:Power0.easeNone}) Many thanks
  15. Hello, I have a tween that appears on click of an object fades in and starts to rotate infinitely with repeat = -1. When I kill that tween and then re-click the object and and the tween re-starts it adds to the duration from the previous tween, so everytime I click and it begins to rotate its duration += previous-duration+duration Code that fades in and starts to rotate object TweenMax.to([".planet1UI>img"], 0.8, { autoAlpha: 1, delay: 1.5, onComplete: function() { TweenMax.to(".planet1UI>img", 4, { rotation: 360, ease: Linear.easeNone, repeat: -1, transformOrigin: "50% 50%" }); } }); code that removes the rotation TweenMax.set([".planet1UI>img", ".planet2UI>img"], { autoAlpha: 0 }); TweenMax.killTweensOf([".planet1UI>img", ".planet2UI>img"], { rotation: true, transformOrigin: true }); TweenMax.killChildTweensOf(".planet1UI"); TweenMax.killChildTweensOf(".planet2UI"); TweenMax.killAll(); So every time I restart the rotation it is 4seconds slower Any ideas? I will add an codepen soon.
  16. Hello again, I'm back with another issue I'm facing. I am aiming to have a background that moves to give the impression of the sprite movement (essentially moving the viewport but not). To achieve this I have made repeating Tweens which move from one side of the page to the other and put them into timelines for X and Y. To get a feeling of speed I have been messing with the TimelineMax timeScale. The issue I have found is that going up (-ve timeScale) soon results in the timeline reaching progess = 0. This is likely to be an issue travelling left also. I have had a look at a similar topic here: however this has not worked well for me. I believe this is because I am not calling reverse(), rather I'm using negative timeScale. Does anyone know a fix for this that will work well, and is there a better way I should be doing this which would make it easier to repeat etc..? Thanks for your help Jareth
  17. Hi, What is the trick to get the timeline to carry on after the below tween loop in timelineMax? .from(".class", 1.5, { y:-100, repeat:-1, repeatDelay:3, yoyo: true}) I've not been able to find one for love nor money...
  18. Hello everyone, I hope the GSAP pros here can help me at my rather simple problem thats driving my nuts since 3 hours (!). I have elements on a page that have to change color and scale. After this I want to reverse the animation. I need to do this for about 4 different Elements. So each element should animate like this: 1-2-3-3-2-1 and start once the other is finished with a slight delay maybe. I already tried with repeat: 1 and yoyo: true but then it repeats the animation like this: 1-2-3-3-2-1-1-2-3-3-2-1 which I don't want … At first I tried it in a timeline but am not sure if this is the appropriate thing to do for my kind of animation. var introTimeline = new TimelineMax(); introTimeline.append( TweenMax.to($(".Ele1"), 1.5, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); introTimeline.append( TweenMax.to($(".Ele2"), 1.5, {scale: 2, fill: "cyan", ease: Power2.easeIn, repeat: 1, yoyo: true}) ); Can someone here help me? I would really really appreciate it! GSAP looks awesome but I'm quite confused right now …
  19. Hi, Im having troubles with the restart, is missing the "first line" and dont is the same at start, the line tl.to("#imagen1", 6, { scale:1.2,alpha:1 , ease: Power0.easeOut }, "1"); doesnt work when i repeat it. Do you know why, or how to fix this error?? (function () { //TWEENS var tl = new TimelineLite({ //onComplete:rewind onStart:go1, onComplete:rewind }); tl.timeScale(1); //tl.from("#logo",0, { scale:0.0, alpha:0, ease: Power2.easeOut }, "=0"); //tl.addLabel("cartela1"); tl.from("#imagen1",1, { scale:1.0, alpha:1, ease: Power2.easeOut }, "0"); tl.from("#textomira1",1.5, {color:"#ffffff", ease: Power2.easeOut }, "0"); tl.from("#texto1",1, { alpha:1, ease: Power2.easeOut }, "0"); tl.from(".marki",0, {backgroundColor:"#ffffff",color:"#ffffff",fontWeight:"normal", ease: Power2.easeOut }, "0"); tl.to("#imagen1", 6, { scale:1.2,alpha:1 , ease: Power0.easeOut }, "1"); tl.to("#textomira1",0.5, {color:"#000000", ease: Power2.easeOut }, "1"); tl.from("#textomira2",0, {color:"#ffffff", ease: Power2.easeOut }, "7"); tl.to("#textomira2",1, {color:"#000000", ease: Power2.easeOut }, "2"); tl.to(".marki",0.5, {backgroundColor:"#000000",color:"#ffffff",fontWeight:"bold", ease: Power2.easeOut }, "3"); tl.addLabel("cartela2"); tl.to("#texto1", 2, { alpha:0 , ease: Power2.easeOut }, "5"); tl.to("#imagen1", 2, { scale:1.22, alpha:0 , ease: Power0.easeOut }, "5"); tl.from("#imagen2",2, { scale:1, alpha:0, ease: Power0.easeOut }, "5"); tl.to("#imagen2",5, { scale:1.15, alpha:0, ease: Power4.easeOut }, "5"); tl.to("#imagen2",2.5, { alpha:1, ease: Power0.easeOut }, "5"); tl.from("#texto2",3, {alpha:0, ease: Power2.easeOut }, "6"); tl.addLabel("cartela3"); tl.to("#texto2", 2, {alpha:0 , ease: Power2.easeOut }, "10"); tl.to("#imagen2", 2, { alpha:0 , ease: Power2.easeOut }, "10"); tl.from("#imagen3",4, { alpha:0, ease: Power2.easeOut }, "10"); tl.from("#texto3",2, {alpha:0, ease: Power2.easeOut }, "10"); tl.from("#comprar",0.5, { alpha:1, ease: Power2.easeOut }, "10"); tl.from("#comprar2",0.5, { alpha:1, ease: Power2.easeOut }, "10"); tl.from("#comprarespacio",0.5, { alpha:0, ease: Power2.easeOut }, "10"); tl.addLabel("cartela4"); tl.to("#comprar",0.5, { alpha:1,bottom:"-100%", ease: Power2.easeOut }, "12"); tl.to("#comprar2",0.5, { alpha:1,bottom:"0%", ease: Power2.easeOut }, "12"); function go1(){ tl.gotoAndPlay(1); } function rewind(){ tl.restart(); } }()); Thanks in advance!
  20. Hi there, I have a banner that loops 3 times: var tl = new TimelineMax({repeat:3}); tl.append( TweenLite.from($(".text1"), 0.5, {alpha:0})); tl.append( TweenLite.to($(".text1"), 0.5, {alpha:0}),"+=2.5"); tl.append( TweenLite.from($(".text2"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".text2"), 0.5, {alpha:0}),"+=2.5" ); tl.append( TweenLite.from($(".tele"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".tele"), 0.5, {alpha:0}),"+=2" ); tl.append( TweenLite.from($(".endframe_logos"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".endframe_logos"), 0.5, {alpha:0}),"+=4" ); After it's finished the 3 loops, I don't want the last Tween to fire. instead stopping at the 2nd from last line Is this possible using a label or some such? Thanks
  21. I need to use TweenLite due to space limitations in the project (yay!) I suspect the TweenLite isn't working because of the Timeline... not sute really Any suggestions on how to yoyo and repeat with TweenLite? //working TweenMax version function flapWingsMax() { flapTl = new TimelineLite(); var wl = TweenMax.to("#wing_left", 0.1, { scaleY: 0.5, repeat: -1, skewX: 20, transformOrigin:"86px 104px", yoyo: true, onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) var wr = TweenMax.to("#wing_right", 0.1, { scaleY: 0.5, skewX: -20, repeat: -1, transformOrigin:"9px 87px", yoyo: true, ease: Sine.easeInOut }) flapTl.add(wl, 0); flapTl.add(wr, 0); } // TweenLite - NOT working function flapWingsLite() { flapTl = new TimelineLite(); var wl = TweenLite.to("#wing_left", 0.1, { scaleY: 0.5, skewX: 20, transformOrigin:"86px 104px", onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) var wr = TweenLite.to("#wing_right", 0.1, { scaleY: 0.5, skewX: -20, transformOrigin:"9px 87px", onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) flapTl.add(wl, 0); flapTl.add(wr, 0); function reverseTween() { this.reverse(); } function restartTween() { this.restart(); } }
  22. Hi guys. I'm only about a week into GSAP and I've become stuck on trying to reverse the timeline on complete, then repeat infinitely. I can only mange to do one or the other, not both. I reeaaaallly tried to fix it myself using answers from other forum posts, but the solutions offered there just don't work in my pen. I would really appreciate it if someone could fork my pen and tell me what i'm doing wrong. Thanks in advance!
  23. Hi, I am animating a html5 rich media banner ad that has repeat() and repeatDelay(). The duration of the banner is 15 sec with a repeat of 2 times. The issue I am having is the second time it starts it refreshes hard. Is there a way to make the second repeat come in softer? Can this be done? If not can the timeline be duplicated to run consecutively after each other to give the effect of a repeat? The total duration can be 45sec. I hope this makes sense and someone can help. Thank you.
  24. Hey there, I'm just getting started with GSAP and so far loving it! But there's one thing I couldn't get figure yet and I can't find any example online: tween repetition inside a timeline without stuck it I mean: var timelineChain1 = new TimelineMax(); timelineChain1.to("#timeline-1 .el", .2, {autoAlpha:1}) /*STEP 1*/ .to("#timeline-1 .el", .2, {scale:.8, repeat:-1, yoyo:true}) /*STEP 2*/ .staggerTo("#timeline-1 .el", .2, {x:-20}, .2 ); /*STEP 3*/ What happens: step 1 runs ok, then the timeline get stuck in the repeatition of step 2, so step 3 never happens. What I want: the infinity repetition to continue as the timeline goes on. Is it possible? Thanks and keep going!
  25. Hi Guys, I am trying to make the yoyo animation to loop infinite time with some pause. Like it will shake about 5 times then pause for 2 sec and then repeat shaking. Is it possible? Thanks
×