Jump to content

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

Search the Community

Showing results for tags 'repeat'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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
  2. Hey everyone, I have hit a snag in my development. I have created a new timeline that i want to repeat once it finishes.It seemingly works but for some reason it doesn't start the repeat from the first tween but instead the second tween in the list tlMain = new TimelineMax({repeat:-1}); tlMain //I WANT the repeat to start from here in the timeline and play ALL tween below BUT... .fromTo(Pocket, 0.5, {scaleX: 3, scaleY: 3, autoAlpha: 0}, {scaleX: 1, scaleY: 1, autoAlpha: 1}) //Repeat seems to start here in the timeline instead, skipping the first part of my animation .from
  3. Hi I have an animation where I want the path data to change at a certain point so I'm using morphSVG. codepen link: http://codepen.io/pauljohnknight/pen/qNNMMz Am I correct in thinking if I want to reverse a morphSVG tween I have to do {repeat: 1, yoyo: true} within the object vars like i have done in the above pen? Normally I would just reverse an animation that is part of a timeline by doing the opposite of from / to etc on the next part of the timeline, but I can't do this with morphSVG because it would mean having the visiblity:hidden css on both compound paths which would
  4. Hi, I have a question about looping and delaying some elements. In the codepen link I provided will be an example of what I want to achieve. The problem is that I don't know how to loop the code... If I paste the code 16 times it will work for all of the rectangles. Is it possible to make a loop with TweenLite? This is a part of my code: var rect = document.querySelectorAll('.rectangle'); i = 15; var tl = new TimelineLite(); tl .from(rect[i--], 0.3, { y: '-1000', scaleY:5, ease:Power1.easeIn }, "fall") .to(rect[i+1], 0.15, { transformOrigin: "bottom 5
  5. The codepen is a simple version of a timescale tween either speeding up or slowing down. It uses directonalRotation. I'd love to be able to detect the first and last repeat and add easing specifically to those 2 tweens. I thought about creating 2 separate tweens to be the first and last and then sandwich a repeating one inbetween those but wondered if there was a way to automate that. For the ball rotation, it would be cool to be able to apply a Back.easeIn to the first one and a Back.easeOut to the last one.
  6. Hi, I am brand new to SVG animation and need help. I have an svg of the USA and am trying to make arrows shoot out of NJ and to all other states. I have the arrows on the states and am using TweenMax.from($("#TX"), 3, {x:220,y:-150}); to make them animate to their final destination. My x and y coordinates are off. Is there an easier way than trial and error to get the precise coordinates of x and y for each arrow? My method of trying different coordinates and nudging them would take me hours to do for 50 states. Also, after they move I want to make them fadeout and then loop. HOw do I chain ev
  7. Hi, I'm having an issue using TimelineMax with a loop repeat. The animation works fine but sometimes there's some sort of "flashing" in the animation. It looks like the div inside is repositioned for a millisecond in the wrong place. I cannot understand why this happens and why it happens randomly. I linked a Codepen working example. Any ideas? Thanks!
  8. How to ensure that the snake-like animation in https://codepen.io/TobiReif/pen/b7809c58663ddac3572f5594ffc4f5fe/ is even? Each column of dots should move up with ease-in-and-ease-out (eg sine) and should move back in the same way: slow upwards, fast upwards, slow upwards, then slow downwards, fast downwards, slow downwards; loop. The current animation is roughly what I want, but it seems to be faster at the top and slower at the bottom. Each column of dots seems to jump up and down, resting at the bottom only. I had no luck using repeatDelay, and I think a clean solution would n
  9. Hi, why doe's isActive() fail after timeline is repeated? And if it's expected behavior with repeat:-1, what's the workaround?
  10. Hi all. Here is what I want to learn today. I have a simple fade in/fade out animation of several boxes. I want to repeat the animation but this is how I want to do it: box 1, box 2, box 3, box4, box 5 - hold box 5 on the stage for a second then repeat box 2, box 3, box4, box 5 - hold box 5 on the stage forever. here is my code pen http://codepen.io/jeansandjacketrequired/pen/rLyRgB I think I may be looking into implementing nested timelines - correct? something like this? tl.add( firstPart() ) .add( secondPart(), "-=0.5") //overlap 0.5 seconds - - - - Edit: OK. This is
  11. Hi All, I am new to GSAP and inexperienced with javascript so please bear with me. I am currently trying to make a Go To Top button that follows you down the page and when you click the button it brings you back to the top of the page and so far it has been working.... Unless you want to use it more than once. For some reason, I can't get it to play again after the first click. I have been using timeLineMax and scrollTo to achieve this so far. I have been trying something like this to fix it but no luck so if you can please point me in the right direction. // GO TO TOP BUTTON var
  12. Anyone know how to loop the circle animation. I tried adding (yoyo: False) to each of the lines but they're only looping their respective parts. I'm trying to get the circle draw on and have the draw off be in the same direction. Thanks!
  13. Hey guys! I´m having a little distortion in my mainScene when i add repeat:-1 to its timeline. When repeat:-1 is added to the mainScene timeline the animation changes, in particular the "thirdsetScene". I hope somebody can help me with this little issue, making the manScene run as it should with repeat:-1 to loop infinitely. Thanks, thanks and thanks!
  14. Hi everyone, my situation is this: I have two timelines, one for the loading initial animation and another one for the coreography when the page is loaded. The animation of the loader (a spinner) is made more or less the same as the codepen linked but in this way, as you can see, the rotation doesn't stop properly. (In simple words i want to pause the rotation animation WHEN the page is loaded, but I doesn't want to stop that if it's still moving) tlTimeline .to(test, 1, {rotation: "+=90", repeat: -1, repeatDelay: 1, onRepeat: loaded}); function loaded(){ tlTimeline.pause()
  15. I am using TimelineLite to animate a banner but I'm not able to do the banner stay in looping. The animation is working just fine but the restart line doesn't work. Someone help me please? 300x250 2.zip
  16. Hi, I'm trying to set multiple color changes for the fill of an svg element, and have it repeat infinitely. I've got it repeating infinitely for 2 colors, but I'm not sure how to add more than that and still have it repeat. What I have currently: tl.to("#sky", 5, {fill: '#EDCEB9', repeat:-1, yoyo:true, ease: Power0.easeNone}, 0) I know the yoyo will need to be gone, but what I'd like is to go from the original blue, to #edceb9 to #33474F and then back to the original blue and continue repeating. It would also be nice to control how long each color is up for and how quick to transit
  17. Hi guys, Just scratching my head at this. As you can see in my codepen with your console open, all the on[EVENT]s fire, except onRepeat. I'm in need of having an event fire at the end of the repeatDelay on the timeline, but as it stands, I can't find one. Does anyone have any idea how I can find out (and call a function) at the exact moment the text starts to disappear again? Many thanks! EDIT: Just a note, removing the yoyo and repeatDelay, still means that the onRepeat event doesn't fire... am I missing something obvious here?
  18. I have a simple demo at the linked Codepen where I would like to create 50 bubbles at random locations on the screen and animate the size and opacity. So far, no problem. I would like to add another animation after the initial animation but cannot get it to work correctly because of the random nature of my repeat & delay times. The problem code is marked as such. Any suggestions. http://codepen.io/hackfin/pen/vLZJzQ
  19. Can I get this to do a full 360 instead of resetting on each repeat? I thought that was the purpose of +=?
  20. I'm trying to create a flicker effect (eventually intended for some christmas light images) that will flicker the light off and on on repeat, and with a yoyo effect so there isn't a jump between opacity:1 and opacity:0 when the tween repeats. Right now, nothing is happening in my codepen and I'm not really sure where I went wrong!
  21. Hi community! I am designer so my coding skills are not really good and as Flash is officially dead I still want to continue with banner projects. And now I have a question what is the best way to repeat banner 1 time and then stop it in some certain timeline position. Lets say I have google banners with maximum 30sec animation time. My one cycle is 14 seconds. Frames 1 2 3 4 5 and now I want that it plays like 1 2 3 4 5 1 2 3 4 (stop). I use TimelineMax delay:0, repeat:1, repeatDelay:2 but in this case it will end in 5th frame. I know that I could easily copy my timeline animation agai
  22. Hello to all! Total noob at GSAP. I'm trying to make a loader (as you can see in the codepen is a carrot), and while it's loading the leaves in top of the carrots will have a wink effect. But I cant figure out how I can make the rotation smoothly! The timeline is: -15deg and then 15deg I tried to add one more tween for 0deg but without success, also I tried the yoyo but the same bad result. With CSS I would just add "alternate" on animation shorthand and "infinite". Thanks
  23. Hi, I am trying to repeat my timeline. The timeline plays perfect, but just one time. Please, can somebody please take a look at my code to see if there is any problems. import com.greensock.*; import com.greensock.easing.* mcText._alpha = 0; mcButton._alpha = 0; mcLegal._alpha = 0; mcPlaneicon._alpha = 0; mcPlaneicon2._alpha = 0; mcPlaneicon3._alpha = 0; mcPlaneicon4._alpha = 0; mcAmsterdamicon._alpha = 0; mcParisicon._alpha = 0; mcParis._alpha = 0; mcAmsterdam._alpha = 0; mcPriceamsterdam._alpha = 0; mcPriceparis._alpha = 0; var tl = new TimelineMax({repeat:2}); tl.add( TweenLite.
  24. Hi everybody, I hope this doesn't seem too dimwitted, but I can't for the life of me figure out how to get my banners to repeat 3 times. I just started delving into the GSAP tools the other day. I have been tweaking the code below to try and get it working but I keep running into a brick wall. Any suggestions? import com.google.ads.studio.ProxyEnabler; var enabler:ProxyEnabler = ProxyEnabler.getInstance(); ///////////////////////////////////////////// import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.TweenMax; import flash.displ
  25. HI, I'm really new to all this, I just looked at the 'Getting Started' video. My question is: is this the right way to get that result (the blue line shrink from left to right in an infinite loop) or there is another/better way to achive this result? At first i tried this code: TweenMax.to(".light", 0.8, {left:0, delay:1.7, ease:Power0.easeOut}); TweenMax.to(".dark", 0.8, {left:0, delay:3.7, ease:Power4.easeOut}); TweenMax.to(".dark", 0.6, {width:0, left:500, delay:4.2, ease:Power0.easeOut}); TweenMax.to(".dark", 0, {left:-500, width:500, delay:5, onComplete:complete, repeat:-1}); function