Jump to content

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

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 67 results

  1. 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.
  2. 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.
  3. 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
  4. 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 : )
  5. 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});
  6. 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
  7. 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(){}}); }}); }}); }});
  8. 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!
  9. 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
  10. 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.
  11. 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
  12. 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...
  13. 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 …
  14. 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!
  15. 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
  16. 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(); } }
  17. 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!
  18. 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.
  19. 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!
  20. 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
  21. 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 .fromTo(Pocket, 0.1, {scaleX: 1, scaleY: 1}, {scaleX: 1.04, scaleY: 1.04}, '-=0.05') .fromTo(Pocket, 0.15, {scaleX: 1.04, scaleY: 1.04}, {scaleX: 1, scaleY: 1}, '-=0.05') .fromTo(Crumbs1, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.15") .fromTo(Crumbs2, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.2") .fromTo(Crumbs3, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.3") .fromTo(LogoContainer, 1, {y: '-175px'}, {y: '0px'}) .fromTo(line1, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line2, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line3, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .repeat(-1).repeatDelay(2)//Repeat Call can anyone see why it repeats starting after the first tween instead of starting from the very beginning of the timeline?
  22. 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 then obviously make the animation invisible. I just want to make sure what I've done is the best way to achieve a reverse on a morphSVG tween incase there is a different / preferable way of doing this. It's going to be part of a larger more complex animation where there will be multiple compound paths I'll need to morph to a new shape and then back again. From what I gather I shouldn't use the reverse() method on an individual part of timeline because of where the playhead will start? And if I did, it could get very complicated very quickly doing it that way? Any thoughts / corrections would most welcome. Paul.
  23. 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 50%", scaleY: 0.75, scaleX:1.5, ease:Power1.easeOut }, "squash") .to(rect[i+1], 0.2, { y: '-200', scaleY:1.3, scaleX:0.8, ease:Power1.easeOut }, "bounce") .to(rect[i+1], 0.15, { y: '0', scaleY:1, scaleX:1, ease:Power1.easeIn }) .to(rect[i+1], 0.2, { y: '0', scaleY:.8, scaleX:1.35, ease:Power1.easeOut }, "bounce-fall") .to(rect[i+1], 0.2, { y: '-100', scaleY:1.2, scaleX:0.8, ease:Power1.easeOut }, "second-bounce") .to(rect[i+1], 0.15, { y: '0', scaleY:1, scaleX:1, ease:Power1.easeOut }, "final-position") I want to loop this animation for every rectangle (there are 16) with a delay of 0.5 seconds between each rectangle falling. How can i achieve this? Thanks in advance
  24. 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.
  25. 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 events? Like first move, then change opacity and then repeat? Any help would be greatly appreciated. Thanks