Search the Community

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

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

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?

I have an issue in Firefox. The timelines are not playing. If you click on 'Start X-Ray/Calibration' and 'Select Start' and any of the steps below, a timeline should play. It works great in Chrome and IE, not Firefox. I am using SVGs (mainly for positioning and scaling) and basically just showing and hiding elements within SVGs. An example of the code in question is: TweenLite.to('#glow1, #glow2, #glow3, #startBtn2, #okayBtn1, #okayBtn2, #stopBtn, #calibrate, #yesBtn, #operatorBtn1, #barHighlight', 0, {autoAlpha:0}); var popover1 = new TimelineMax({paused: true}); popover1.fromTo('#glow1', .3, {autoAlpha:0}, {autoAlpha:1}) .fromTo('#glow1', .2, {autoAlpha:1}, {autoAlpha:.3}) .fromTo('#glow1', .2, {autoAlpha:.3}, {autoAlpha:1}) .to('#glow1', .2, {autoAlpha:0}) .to('#baseImage1', 0.4, {autoAlpha: 0.3}) .fromTo('.col-9', .4, {background:'rgba(180, 180, 180, 0.0)'}, {background:'rgba(180, 180, 180, 1.0)'}) .fromTo('#popover1', .8, {autoAlpha:.15, scale: 0.08, x: 679, y: 174}, {autoAlpha:1, scale: 1, x: 0, y: 0}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}); $("#overlay20Link, #dotNav2 .page20").click(function(){ TweenLite.to('#popover2, #popover3, #popover4, #popover5, #popover6, #popover7, #popover8', 0, {autoAlpha:0}); popover1.restart(); yes.pause(); calibrate.pause(); popover2.pause(); popover3.pause(); okay2.pause(); }); Other GSAP animations run fine on the same page, it's just these timelines triggered with restart(); that are not working... navigation.js also contains GSAP code for global controls... Any suggestions? Thanks in advance!

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.

Hello everybody, First if all, thanks for the amazing animation library! GSAP finally made me switch from actionscript to js (: I want to share a trick how to easily integrate spritesheets into timelines and also have the ability to reuse the sprites on the spritesheet. The page also contains a few codepen links. http://multiplane.tumblr.com/post/78304655871/spritesheets Hopefully this method will be useful to somebody & perhaps somebody will improve this method (:

In this codepen example I have five buttons, and a timeline with five labels. When clicking on a button I want to move from the current location in the timeline, to the label corresponding to the button. In other words if you click on button 2, the animation should go from wherever it currently is to the point at label "two", so if it was previously at "one" the timeline should play forward from label "one" to "two", but if it was at position "three" it should play backwards from "three" to "two". How do I do this?

I imagine this is a simple issue but I can't find anything on it On my codepen how can I use the same timeline on all buttons?

Hi, I'm experiencing a problem that I don't know how to resolve. I'm trying to reverse the direction of some timeline tweens depending on a variable (swipeDir). If "left", the animation will come from the right, if "right", the animation will come from the left. I figure, I'll copy the function and reverse the numbers (from "+=100" to "-=100"). I copied the "left" function - "symptomsBuild", and only changed the name - "symptomsBuild2". The odd thing is that with only a name change, the "SymptomsBuild2" function doesn't work right. Only one or two items animates. (I was unable to get it working in Codepen. However, I did attach an example.) If you change swipeDir to "left" (line 78 in the attached js file), then it calls the SymptomsBuild2 function, and doesn't work. The weird thing is that if I move SymptomsBuild2 higher up in the js, it works, but then SymptomsBuild doesn't work right. Any help would be appreciated. Thanks. Stephen example.zip

hey guys! so basically i want to create an animation where blocks fade in from opacity: 0.0 and then drop on top of eachother and build a tower from those blocks, they should not sit perfectly on top of eachother but instead a little random and misplaced like each block have different "margin-right", "margin-left" and "margin-top" now, here is how i would do it: ------------------------------------------------------------------------------------------------------------------------------------------------------------------ <style> #blockbox{ float: left; } #block1 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-left: 20px; } #block2 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-top: 30px; margin-right: 20px; } #block3 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-top: 30px; margin-right: 30px; } #block4 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-top: 30px; margin-left: 40px; } </style> <div id="blockbox"> <div id="block1"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Butiks Salg</p></div> <div id="block2"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Dyre Patenter</p></div> <div id="block3"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Uendelige Funktioner</p></div> <div id="block4"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Dyre Sponsorater</p></div> </div> <script> window.onload = function() { var block1 = document.getElementById("block1"), block2 = document.getElementById("block2"), block3 = document.getElementById("block3"), block4 = document.getElementById("block4"); TweenLite.from(block1, 1, {opacity:0, top:"300px", delay:1}); TweenLite.from(block2, 1, {opacity:0, top:"300px", delay:2}); TweenLite.from(block3, 1, {opacity:0, top:"300px", delay:3}); TweenLite.from(block4, 1, {opacity:0, top:"300px", delay:4}); } </script> ------------------------------------------------------------------------------------------------------------------------------------------------------------------ now, thats all good. thing is i have 27 blocks.. do i really need 27 tweens and "div=id" to do this? or is there some way to randomize their horizontal position within a specific space? what i am doing here just seems wrong, but i dont know. i've only got 1 day of experience with javascript and a few hours with gsap.. thank you! - jonas.

Hi, as you can see in the Codepen example, I'm seeing different behaviors when using fromTo() nested in two timelines. First case (work as expected): var t1 = new TimelineMax({paused: true, repeat: 2}); t1 .to("#redBox", 1.5, {x: 300}) .fromTo("#redBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}, "+=0.5"); Second case (work as expected only once, then from the second iteration it seems to not reset the "from", ignoring "immediateRender = false" config value). var t2 = new TimelineMax({paused: true, repeat: 2}); t2 .to("#blueBox", 1.5, {x: 300}) .add(new TimelineMax().fromTo("#blueBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}), "+=0.5"); Is there something wrong in my setup or is it a bug? Thanks in advance.

Hi, I'm developing a site that is getting results from twitter and showing one tweet at a time, it loads an iFrame of the tweet rendered by twitter via oEmbed. The tweet drops in to the center from 0 opacity to 1 then after a moment drops down out of the window fading out. The app is performing great with a few items but it seems to be chugging a little as that number grows. I know I could remove the older tweet items after they finish their tweens however the client wants to have this timeline running at a conference lasting 30 mins for each speaker, still not an issue til the request to be able to replay the 30 min timeline at a faster speed with timeScale so the speaker can view the audience reaction(it's also tweening a css gradient BG and playing sounds based on the hashtags(variety of feelings) of the active tweet being tweened). If I remove the items I'm a little concerned about playing back in this fast forward mode and being able to load the tweet iFrames again fast enough. Any ideas?

Hi everyone, I have been trying to find out a way to refresh a timeline without having to reload the whole page. This is for my development tools so i don't have to always hit the browser refresh button and drag my slider to the last location i was editing to see my new css updates. So here is what i'm doing and hoping you can help me out. So i have my developer tools i have created for my greensock projects to help me with my projects. We have a slider bar to move me along in the timeline we have created. (my projects tend to be like learning videos). Whenever i make an update to my css i have to hit reload on the browser and drag my slider to the position i am working in. I do this like a thousand times a day and i'm getting a little tired of this. lol. I have been able to get the browser to read my saved css edits without refreshing the whole browser. But when i do that my greensock timeline is still going off of the old styles i had before i updated them. I'm looking for a way in code that i could also have greensock recalculate the timeline without refreshing the whole page. I want the inline css styles to update to match the updated css i just pulled in. I would love something like mytimeline.refresh(); but i don't think we have anything like that. My main goal i want is when i'm working on the timeline and i need to move a div up 100 px i can hit my own reload button and it will update the greensock timeline to know that i moved my div up and make the animation correct and update the inline style. I hope this makes sense to everyone and there is a solution out there to help me. I just want to hit my own reload button and see the new css and the updated timeline properties show up without hitting the browser refresh button. Thanks, Brad