Search the Community
Showing results for tags 'yoyo'.
-
I've got a super-simple staggered tween that increases the height of a sequence of lines: let midPoint = 210; gsap.to('.eq-line', { attr: { 'y1': (midPoint - 30), 'y2': (midPoint + 30) }, duration: 0.3, stagger: { from: 'start', each: 0.02, yoyo: true, repeat: -1, repeatDelay: 1 }, ease: 'sine.inOut' }); What I'm aiming for is for the lines to do a Mexican-wave style animation from left to right, then pause and start again: so each line would go up-down-pause. However, what's currently happening is it goes up-pause-down-pause, because of the yoyo. I totally get why: yoyo is reversing the tween, and the tween has a repeatDelay, so it's simply applying the same repeatDelay when it runs backwards. But this isn't what I want, and I'm sort of struggling to figure out a graceful way around it. My 'best' idea is to just animate each line in a forEach loop and apply a regular delay of i * 0.02, but I feel like I'd just run into the same problem; plus I wanted it in a named timeline so I can control it from other areas of my code, and this method feels like it could get messy. Is there a straightforward way to get what I'm after?
- 3 replies
-
- yoyo
- repeatdelay
-
(and 1 more)
Tagged with:
-
Hi, Before I start, my code is written in TypeScript which compiles into JS. I have managed to get a yoyo animation to work as expected: public dab(): void { TweenMax.to(sprite.scale, 0.5, { x: 1.5, y: -1.5, ease: Power2.easeOut, yoyo: true, repeat: 1, repeatDelay: 0.1, onReverseComplete: this.handleYoyoComplete(), onReverseCompleteScope: this // onRepeatComplete: this.handleYoyoComplete, // onRepeatCompleteScope: this }) } protected handleYoyoComplete(): void { console.log("YOYO COMPLETE!"); } However, the method 'handleYoyoComplete()' gets called when the sprite is fully stretched out, before the yoyo starts but after the initial tween. I've tried onComplete, onReverseComplete, and onRepeatComplete. I have tried these all with and without the parenthesis (i.e. onReverseComplete: this.handleYoyoComplete() and onReverseComplete: this.handleYoyoComplete. Ultimately, is there a way of calling a method when the yoyo is fully complete? Thanks for reading, all help will be most appreciated.
-
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.
-
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 : )
-
I'm looking to reverse the TimelineMax onComplete but I can't seem to get it to work. I'm new to this library, there are probably better ways to achieve what I want here. I'll list out the goals: Auto play a tween of the blocks from left to right (working in this Codepen) On mouseover and eventually on touchover reverse the animation with reduced speed and continue to move (working in this Codepen) When the animation goes fully out of the window reverse and come back across the other way (not working) I've tried a few different ways/options but no luck so far. Any help would be appreciated.
-
Basically what the title says....I'm not attaching a CodePen as it's more or less an API question I think... I've got a collection of `divs`in a circle shape. I collect these in an array and then TweenMax.staggerTo on all of them with yoyo:1 and repeat:1 so that they quickly tween back to how they were when they started. But I'd like the last one to remain in the tweened state, that is "yoyo" all of the elements except the last. What's the simplest way to do this? (If there is a way). TweenMax.staggerTo(myArrayOfDivs, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true, }, .05).length; } // how to keep myArrayOfDivs[length-1] tweened? I thought of doing a staggerTo on all but the last element of the array (i.e., create a new array with all but the last element), setting a onCompleteAll on the staggerTo and then tweening the last element separately, but that didn't work, as I don't want it to start when all of the rest have tweened and yoyo'd, but for all to flow seamlessly as if it were one tween. Any suggestions welcome!
-
Hi there! I am making a png spritesheet animation. I have an animation existing of 7 frames which I want to animate back-and-forth. So: from frame 1 to frame 7 back to frame 1 again and back. Example: 1,2,3,4,5,6,7,6,5,4,3,2,1,2,3 etc. I tried reversing with "yoyo:true" but i cant quite get a seamless experience as you can see from the Codepen. The animation goes back to frame 1 before getting into yoyo. I would love some advice from you. Any advice would be appreciated!
-
Hi, I'm a beginner with tweenmax and I was playing with basic animations. Instead of doing the animation with "animate" I wanted to try to animate a circle with the yoyo effect, but the animation is not central. Thanks in advance for advice.
-
I am trying to run multiple circles along multiple paths. I need some help with: - Run animation in one direction (down). I adjusted the yoyo setting to false but it still reverses direction (up) - Align the circles with the centre of each path. How are the x y offsets determined? - Refactor script. Also do I need to have 4 circle paths? - Any suggestions how this could be improved would be awesome. Inspiration taken from https://www.quandl.com/#ember620
-
Hey guys, My hover animation is on an infinite loop. After mutliple loops, on mouseleave, my animation will reverse all the loops. I need the timeline to reverse the loop only once before stopping. I've been using .time but I guess it is not the best method. Any help would be apreciated, thanks in advance.
-
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 …
-
Hey Guys, Im quite new to GreenSock. Years ago a friend boasted about it when Flash was very popular, it was to defacto go-to library. So I'm trying to pick up a little bit as a hobby. I was wondering if anyone could assist me in understanding what I'm doing wrong here in my CodePen. I am simply trying to "Reverse" or "Yoyo" it back, so it keeps going back and forth. I tried several ways but I am certainly getting it wrong
-
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(); } }
-
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
-
Hello, I am completely new to Javascript and GSAP so my questions might be really stupid...I've played around with it for a few days but have not been able to figure out. I created these paths in AI so that the word "DECONSTRUCTED" will morph into lines - which I have been able to do in the codepen URL. However, I want it to YOYO back and stop when it gets to "c" and then have the "E" and "D" morph to a red (Or whatever color) "E" and a red "R" - so spelling out "RECONSTRUCTED". http://codepen.io/Karenhuang/pen/XKPqWo Any help would be much appreciated. And I am a Javascript newbie so I really don't understand any of the syntax. Everything I have done is through forking and trial/error. Thank you.
-
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?
-
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!
-
I have nice animation on Code Pen Now I have this: 1)Animation starts 2)Animation reverse by yoyo 3)Animation starts 4)Animation reverse by yoyo How I can make this: 1)Animation starts 2)Delay 6 seconds 3)Animation reverse by yoyo 4)Animation starts (without delay) 5)Delay 6 seconds 6)Animation reverse by yoyo
-
The yoyo attribute (and method) makes it simple to repeat something back and forth many times. Naturally, the ease is played in reverse every other leg. I’d love to be able to optionally disable that and have it play the ease forward regardless of the yoyo direction. This can be done in JS by duplicating and tweaking what yoyo does internally, but it's very nice having the convenience method. Yoyo is a Boolean. Perhaps it could take a string to trigger this. { yoyo: “easeForward” }
-
Hi, Working on some banner ads, where filesize is important, I was wondering if it is possible to use the yoyo effect without loading TweenMax.min.js . At the moment it's the only effect I'm using TweenMax for, but it's an extra 76 kb if I'm not mistaking. I included a codepen demo where I built the yoyo effect as a TweenLite sequence, but it's not very beautiful to copy paste this every time I want a similar effect. Been looking around at the forum, but can't really find a solution (Using the CDN links is of course an option, I know). Thanks in advance, Wouter
-
function yoyo():void{ TweenMax.killTweensOf(yoyo_MC); yoyo_MC.x = 0; yoyo_MC.sndTicker.text = ""+snd.id3.artist; yoyo_MC.sndTicker.autoSize = TextFieldAutoSize.LEFT; var xWidth = int(yoyo_MC.width)-193; TweenMax.to(yoyo_MC, 3, {x:-xWidth, y:155, ease:Sine.easeInOut, repeat:-1, yoyo:true}); } Hi guys I have a mp3 tag text scroller left to right with tweenmax.to .... ..but I cant seem to get it to start at with the left side of text finishing at left point of window x=0, and the right side finishing in the end of the right window x=193. so the text is yo-yoing inside the window. I tried loads of ways but to no avail ... heres what I have that does work but not as I would like Thanks in advance Steven
- 1 reply
-
- as3
- tweenmax.to
-
(and 1 more)
Tagged with:
-
Hello again good folks, Im trying to get to grips with animating multiple elements to different (randomised) attribute values. In the codepen, a loop adds a TweenMax to the timeline for each of the red ellipses. However, the repeat and yoyo do not work - the animation only runs once. ive tried numerous variations, but Im missing something..
-
I load in like 10 photo's (img tag with class="photo". They to appear 1 after the other opacity from 0 to 1. Works OK. I want my timeline to yoyo infinitly. But at the end of the first run it stops. What am I doing wrong: function init(){ var mainTL = new TimelineMax({repeat:-1, yoyo:true}); mainTL.add( intro() ); } function intro(){ TweenMax.set(".photo", {xPercent:-50, yPercent:-50, opacity:0}); TweenMax.staggerTo(".photo", .5, { opacity:1 }, 1); } init(); I know I could this, but then the sequence runs in the same order instead of reversed: TweenMax.staggerTo(".foto", .5, { opacity:1}, 1, intro);
-
I have the following code: TweenMax.to($("#octopus"), 4, {x:'+=' + (screen.width() - $("#octopus").width()*0.8), repeat:-1, yoyo:true,ease:Linear.easeNone,delay:0.3,onComplete:function(){ $("#octopus").toggleClass("flip"); }}); the onComplete never runs as it is an infinite loop, but I'd like to toggle a class while the animation is reversing and then again before it runs. Will I need a play / reverse loop for this or is there a way to run code before each leg of a yoyo? Thanks!