Search the Community

What is the best way to handle child timelines that have a infinite duration? You can't just `TimelineMax.add` an infinite child timeline because they would block and cause the remaining events to never run in the root timeline. The best way I have found is `restart`'ing the infinite child timeline in an `onStart` or `onComplete` event. One problem I have run into with this method is, if you seek past when the child timeline gets initiated, then it will never run. When using `start`, `stop`, `seek` on the root/parent timeline, how do you `start`, `stop` the child timeline appropriately? Here is a basic example of an infinitely spinning ball that also translates around on the root timeline: http://codepen.io/anon/pen/vOpBEV let tl = new TimelineMax(); let ballNode = $('.ball'); // Set up the infinite rotating timeline let alwaysRotateTl = new TimelineMax({ repeat: -1, paused: true }); alwaysRotateTl .fromTo( ballNode, 2, { rotation: 0 }, { rotation: 360, ease: Linear.easeNone } ); // Now do some stuff on the main timeline tl .addLabel('red-label') .set( ballNode, { backgroundColor: '#ff0000' }, 0 ) .to( ballNode, 2, { x: 100, backgroundColor: '#00ff00', onComplete: function() { // Start the infinite rotate loop alwaysRotateTl.restart(); } }, 'green-label' ) .to( ballNode, 2, { y: 100, backgroundColor: '#00ffff' }, 'cyan-label' );

Is it possible for GSAP to do what I think. Because my idea is to let the Timeline go to a specific child (tweens inside/added to a timeline) and when that tween is finished animating, it will pause. Here's the code sample: HTML <div class="book"> <div class="last page"></div> <div class="page one"></div> ... <div class="cover page"></div> </div> <div id="prevPage"></div> <div id="nextPage"></div> JAVASCRIPT var book_timeline = new TimelineMax({ paused: true }) /* tween children */ .to('.page.cover', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.one', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.two', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.last', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }); $('#nextPage').click(function(){ // code that animates only one (next page) tween inside a timeline then pause book_timeline.play(); }); $('#prevPage').click(function(){ book_timeline.reverse(); }); I want to use GSAP to make my own book flipping div's

Hello, is there a possibility to manually set the position of my draggable element? I want to use it as an scrollbar that move synchronized with my timeline and it should automatically get updated when the timeline continues. Ive already added an onUpdate handler to my timeline and an onDrag handler to my draggable with all the calculations already implementet. I just dont know how I can set the position of my draggable. My Markup is the following: <nav id="drag-nav"> <div class="dragger"></div> </nav> Javascript: $dragNav = $("#drag-nav"); draggerInstance = Draggable.create(".dragger", { type: "y", bounds: $dragNav, onDrag: onDragHandler })[0];

I have an animation that is supposed to start the element off at a particular possession view .set(), and then animated it to a new position via .to(). Currently, if I reload the page many times, perhaps 1 out of 7 times the item starts from x=0, y=0 instead of the values to which I have set it. The element starts out with display: none by default. I tried (in pseudo code): A) .set({x:1400, y:700, display: block, immediateRender: true}) .to({x: 1000, y: 600}) .set({x:1400, y:700, immediateRender: true}) .set({display: block}) .to({x: 1000, y: 600}) This is part of a larger animation system and very hard to extract a minimal case. But there is no code that should interfere with GSAP. The strange thing is, it seems to be a timing issue. And if the CPU is busy it seems to be more likely to happen. Are you doing some internal optimizations that stop the .set() command from getting executed all at the same time? It seems as if the display:block is executed before the updates to the x and y positions. hanks fro any help you may be able to give.

Hi everyone ! Hope you are fine. My question will follow in a few line, but let me introduce my problem with an image : Well, I want to creat a sequence of images. Image 1 has to take image 2 place, image 2 -> image 3, image 3 -> image 4 and image 4 has to take image 1 place. And here is the problem : 4 container that have to be resize. I have no ideas about how to do it. Because it be an infinite sequence with maybe 5s delay between each. Have I to show the risizing and object moving ? But how to make a good transition then. Do I make a shadow on whole images and when the shadow is gone show new establishment ? The only idea I have right now is to pre dev the whole comportment with a time line : img1 -> resize height img2 -> resize width img1 -> move to img2 img4 -> move to img1 and resize img3 -> move to img 4 img2 -> move to img 3 etc And doing it for all possible positions with a repeat (-1). Do you guys have some ideas about ? I thank you in advance.

Hi, I'm really new to all this and this is my second post. I'm trying to do something I thought was simple, but something does not work. I have two div (#red and #blue) and two buttons (#opacity1 and #opacity2), clicking the first button will increase the opacity of the first div while decreasing the opacity of the second div and vice versa. The code I'm using doesn't seems to work, can someone help? Thanks UPDATE: There's an error in the code, sorry!!! .to("#blue", 0.1, { opcity: "+=0.1" }, "0"); should be .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); (opacity instead of opcity) and now seems to works. Anyway, am I doing this correctly? or there is a better way? Thanks. $('#opacity1').click(function() { var tl1 = new TimelineMax(); tl1.to("#red", 0.1, {opacity: "-=0.1" }, "0") .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); }); $('#opacity2').click(function() { var tl2 = new TimelineMax(); tl2.to("#red", 0.1, {opacity: "+=0.1" }, "0") .to("#blue", 0.1, { opacity: "-=0.1" }, "0"); });

Hello, Here is a timeline-control mechanism based on Draggable, and I'm posting it here for all to share. http://codepen.io/rfenik/pen/vOYrGe Thank you!

I want to control my GASAP timeline that I have created in Adobe Edge Animate so this is what I do. //declare my variables var square1 = sym.$("square1"); square2 = sym.$("square2"); square3 = sym.$("square3"); square4 = sym.$("square4"); var tl = new TimelineLite(); //my simple timeline tl.to(square1, 2, {x:445}) .to(square2, 1, {x:-150}) .to(square3, 1, {y:"-=160"}) .to(square4, 1, {y:"-=160"}) sym.$("pauseBtn").click(function() { tl.pause() }); sym.$("playBtn").click(function() { tl.resume() }); and so on... (yeah I figured it out and this is the course I used to figure it out http://greensock.com/sequence-video AWESOME easing_2.html

Hi all, I discovered GSAP over the weekend while trying to complete an animation project. It's supper impressive. I've read the docs over and over and over but I just think I'm missing something or I'm approaching the problem the wrong way. My goal is to create a rotating Nav. Four block arranged in a circle. Click on a block and they all rotate left until clicked box is at the top. Conceptually simple and I found a nice tutorial on the circle animation in an old forum post for an AS3 code chunk. So I've created my bezier path and I've create a separate tween for each "button". I use a TweenMax.fromTo progress chunks to offset each button around the curve in my timeline. I've added Labels at each quarter. I just can't figure out how to control the click events on the objects so that the rotate from one label to another correctly. I tried creating a secondary timeline with tweenFromTo chunks to control the first and that failed. I'm just not sure If I've approached this the right way. PS. Also you may see that occasionally one of my object will break off from the Bezier and jump to 0,0. If i look at the values being added in the browser(chrome) I see that the other buttons have a 3D transform on them but the broken one has a transform: matrix(1, 0, 0, 1, 0, 0);. What did I do wrong? I appreciate any advise you can provide. A few days Ago I didn't think I'd be able to do this at all. Today I feel like I'm on the edge of success thanks to GSAP. Greg

Hey guys, I'm not too sure if I've simply been staring at this too long or if I'm just having one of those off days where simple math decides it's gonna kick my teeth in. I'm trying to animate the stroke-dasharray of an svg path with multiple dashes "chasing" one another through the path --similar to christmas lights that chase one another in a sequence. I've roughly figured out what I need to do here, but I can't seem to figure out a way to address a second and third dash to enter in. Basically, I need to start one, and then continuously check to see if the current dash(es) have animated far enough to start entering in the subsequent dash and similarly I think I'll need to check the same "offsets" when it reaches the end of the line. Anyone feel like taking a stab at a sane approach for this? If even just high level of how I might store some "mock" variables to watch in order to make the process easier, etc. As always any help is greatly appreciated! P.S. - A side note is I'm not sure why the ease isn't working on the "chase" (it's set to Bounce atm for ease of visually seeing if the ease is being picked up)

Hi, I'm trying to create a simple (generic) animation. I have a working POC but would like to know if there are any improvements that could be done that I'm not aware of (only started using greensock yesterday - awesome library!) At the moment I'm using two staggerX since I couldn't get a 'wait' period without it. Also I needed to use an onComplete handler since xxx.repeat(n).fromTo produced unexpected behaviour. Thanks

Hi, Here my problem, I use a small semantic template engine (transparency) and I can't make my TimelineMax works on elements that being templated. I guess I done something wrong, but I don't manage to make work my "staggerTo(.MyClass)" that is into my timeline and don't find any fonction to reload the selector or something like that. I give you a codepen of the problem. If any of you have sugestions Allan

So i've watched the GSAP intro videos; they're great. I mean they're so good they made me think I'd be able to use this library straight away. However I am new to coding and web design and while GSAP allows me to do things i'd never be able to imagine doing on the web I'm struggling to control the outcomes. In my codepen I'm trying to use the mouse hover events to initiate a simple tweenmax animation. I want the user to interact the pouring motion by just a mouseover but once the mouse leaves the bounds of the image it would go back to the starting position. I think my js coding is messy and not the best way to achieve this, and I think the revert or restart() functions might be what I should be doing, but i'm not sure on syntax or design. TL;DR. How can I use the timeline feature to revert the tween back to it's starting state upon the jquery mouseleave event?

This is a beginner question—I'm just getting in to this—I notice that stagger methods seem to be for staggered application of a tween, as opposed to being able to stagger a timeline. This pen is the only way I could think of, to stagger the application of a timeline animation. In this case, it's applied to 100 red boxes, but I'm not sure if it's the best way of doing it, in terms of memory etc. since it results in the creation of 100 TimelineLite instances... is there a more performant or concise way of doing it?

Hello All! So I'm trying to use a Rotation Draggable to control a timeline. I found this topic: http://greensock.com/forums/topic/8842-draggable-parallax-effects-in-edge-animate/but it's for a linear draggable. I tried imputting that code and changing a few things around to make it work with rotation, but I'm afraid my coding capabilities are woefully underdeveloped. If anyone could help out, I'd greatly appreciate it! -mlovett

I have 3 doors that swing open to reveal content, then they all close. After that you can click a "door" to reveal what's underneath. It works fine except that after one click, it doesn't work again. I have one function to open all the doors then onComplete of that function I reverse the timeline; I also have a onReverseComplete function called "loadClickHandlers" that loads all the items individually so they can be clicked. A door is clicked to open it, then the content revealed is clicked to close the door again. There is one timeline for all three doors at first, to open and close them. then each door has its own timeline so it can be controlled via click Thanks for any suggestions.

Negative start times don't seem to be respected in any of the Timeline flavors. Negative start times would be extremely useful for nested Timelines that are supposed to conclude at a given time. Following the pattern of objects that return Timelines describing their animation, one would have to measure the duration of the returned Timeline to get this behavior. SomeObject.prototype.getAnimation = function() { var anim = new TimelineLite(); anim.to( this, 10, { foo: bar }, 0 ); return anim; }; var animation = someObject.getAnimation(); mainTimeline.add( animation, 5 - animation.endTime() ); // where 5 is "arrival" time What would be much nicer is for that "10" to be contained within the animation itself. SomeObject.prototype.getAnimation = function() { return new TimelineLite().to( this, 10, { foo: bar }, -10 ); }; mainTimeline.add( someObject.getAnimation(), 5 ); Also speaks to the idea of GSAP tweening methods accepting an 'end time' parameter as opposed to duration. Curious to know if there is already a method in place to get this behavior.

Hi! I have a timeline animation which I would like to reverse, without reversing the last two tweens. In my jsfiddle example http://jsfiddle.net/identitoe/oLpvfqm4/2/ I would like to keep the last two tweens, the margin-top and the background-color and start reversing from the point I added the label. I just don' get it to work. Thank you

I'm having a bit of trouble getting a set of chained timelines to pause as they complete. I want to have timelines to control a couple of objects on screen and then pause until the user hits the forward button to advance but I can't seem to get the pause to kick in. It just keeps running through both timelines. I'm guessing I'm using the wrong approach. Would love some help on this. $('.trigger-forward').click(function() { scene.play(); }); $('.trigger-backward').click(function() { scene.reverse(); }); var moment_1 = new TimelineMax({pause:true}); var moment_2 = new TimelineMax({pause:true}); moment_1.to("#scene_earth_move .earth", 2, {scale: 1.4}, 0) .to("#scene_earth_move h1", 1, {top: "40%"}, 0); moment_1.to("#scene_earth_move .earth", 2, {scale: 2}, 0) .to("#scene_earth_move h1", 1, {top: "80%"}, 0); var scene = new TimelineMax({paused:true}); scene.add(moment_1) .addPause() .add(moment_2); Thank you

Hi Guys, Let's get the niceties out of the way... GSAP is amazing, currently migrating to it from velocity. I've been looking through the forums regarding the topic of onReverseStart and there's a number of posts saying it's unnecessary because you'll be calling reverse() from some method anyway so why not just do what you need there. But I don't understand how that's any different from onStart? It seems a fairly simple use case. In my case I'm animating the transition between an introductory page and some content. This transition is reversible, ie: you can go from the intro to the content and back again. As I switch from one to the other I need to make a couple of tweaks to classes etc, and enable/disable a couple of elements. If there was an onReverseStart callback, I could keep everything clean and simple (weird psudeo code follows): onStart & on ReverseStart shared method - check which way we're going and make updates. onComplete & onReverseComplete shared method - check which way we went and make updates. toggle method - if (inIntro) timeline.play() else timeline.reverse() As there isn't an onReverseStart, the best I can get is: onStart - must be going from intro to content - make changes. onComplete & onReverseComplete shared method - check which way we went and make updates. toggle method - check which way we're going, if it is from content to intro (ie: reverse) make the changes and call reverse(), else call play(). That seems a little messy to me. Also just wanted to clarify something? If I reverse a timeline, that means any easing is reversed as well? Thanks, Adam.

Dear GSAP and fellow GSAP users. Although I found a workaround, as I expand my usage of your api, I thought it might be useful for me, and maybe others, to create a discussion based on what I encountered I've added a codepen as this is good practice, but it's a completely stripped down version of what is actually happening, as it is not possible to include everything, and what I'm after, seems to me to be something fairly straight forward. Scenario I have a timeline (small snippet in codepen) that simply animates some text, but which includes calls (removed from codepen) to external (unconnected to the animation) functionality. The timeline works great, and all the controls I've included do exactly as expected - accept that what I want to happen is when a user pauses the anim, the text acts gracefully and moves back to the starting position (css only, not timeline), as I don't want the text just to be stuck mid flow. I handle the external calls perfectly and the paused state is fine, all I want is the css side to be cleared. Ok so I tried the clearProps:transform || all etc (via a set command, and injected at different time points**), I also removed props/data/attr etc etc, but the transform on the text resolutely remains, if the timeline is either playing or paused. If I clear first, then clearProps works. For completeness, I tried killing the current tween (which I don't want,but as a test), didn't do anything. I tried using the timelinemax calls to get current/before/after labels, but since this moves the play head, but not the external function calls, I cannot use this. **Now I've read conflicting posts that say it is possible to use clearProps on working timelines as GSAP doesn't force continual transforms, and others that say it is not supposed to work in that way. I believe the default is for overwrite between tweens so wouldn't this allow another tween to take precedence? I'm pretty sure a tween is added to the end of the stack, as per api and probably explains what I'm seeing. I used $('.key-shortcuts').children().removeAttr("style"), which seems a rather blunt force approach, as it clears all styling, whether GSAP related or not. (but then looking at the code I think clearprops does the same?) Based on my scenario what would be the GSAP way to clear (or manipulate) the added css in a working timeline paused or otherwise? One final question, I quite often want to base one tween in relation to a previous label, but also want to label that very same tween. e.g. t1.to(some el,1,{some css},"label1+=1","but also be labeled itself?"); Is that possible? Btw, GSAP is just great, I had used it before mainly for the performance boost, standalone or as a jquery override, but for some reason I missed the timeline aspects. It's brilliant, I've already started removing the hugely ugly jquery way Thanks in advance

Hi everyone, as I get better in GSAP, my needs also increase and everyone on the forums have been very helpful. What I want to do is, check for a condition, lets say if element.length > 0, and add tween inside the timeline. What is the best way of doing this?

I would like the timeline to repeat:2 then show the replay button. Thinking nested timelines function the same a regular timelines, maybe somethings wrong with my code. Thanks for the help as always.

Imagine I have one long timeline and many of the tweened properties are dynamically calculated. For example; elem1y, elem2y... tline = new TimelineMax() .add([ TweenMax.to("#elem-1", 1.5, {y: elem1y}), TweenMax.to("#elem-2", 1.5, {y: elem2y}) ]) .addPause() .add([ TweenMax.from("#elem-3", 1.5, {y: elem3y}), TweenMax.from("#elem-4", 1.5, {y: elem4y}) ]) What is the best way to update the timeline if those values are recalculated? The issue I am currently facing is that simply recreating the timeline leaves lots of elements values changed, thus recreating the timeline as I originally did causes the offsets to be relative to incorrect values. I've been messing with invalidate(), clear(), reset() but no luck yet. Thanks!

hi! i am trying to make ajax page change with jQuery address plugin (http://www.asual.com/jquery/address/) and it works fine. you can see working example of that technique here: http://www.feeldubrovnik.com. i wanted to add some page transition animations with GSAP, so i declared timelines outside the function in which i am trying to call them from, but something i did wrong. here's the (simplified) code: $(function(){ //... // declaring timeline var tl_home = new TimelineMax({paused:true}); tl_home.fromTo($("#home_logo"), 1.2, {scale:.2, rotation:45, autoAlpha:0}, {scale:1, rotation:0, autoAlpha:1, ease:Back.easeOut}); tl_home.staggerFrom($(".feature_box"), .8, {scale:.1, autoAlpha:0, ease:Back.easeOut, transformOrigin:"50% 50%"}, 0.2, "-=0.9"); //... $.address.change(function(event) { //... switch(currPage.name) { case 'home': // calling timeline within function tl_home.play(); break; case 'about': tl_about.play(); break; } //... }); }); i think that it has some scope issue, but i can't figure it. when i declare timelines within 'switch' it works just fine. please tell me what am i doing wrong. tnx in advance.