Search the Community

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 (:

I've created a "Scrubber" component that's meant to control a TimelineLite instance. The timeline is passed to other components so that they can add tweens, timelines, etc. However, these may not be added synchronously. The problem, then, is that I have no way of updating my Scrubber when the duration of the timeline changes. On a related note, timelines only one of each callback type (onUpdate, etc.). Given these two issues (duration not observable, no "safe" event listener adding), is it not possible to bind a control to a timeline? Or is there just some trick that I'm not seeing? Any info about what people are doing to accomplish this, or links to anything the author's said about binding like this is much appreciated! Thanks!

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

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?

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

I'm trying to ease an element that is being translated to the left by a percentage amount. Easing doesn't seem nearly as effective as when I'm translating by a pixel amount. Any ideas on what I should do?

I saw this paneling demo from somebody and for an upcoming project I would like to use this. The demo I saw can be found here: http://codepen.io/grayghostvisuals/pen/enxAp I was wondering if it is possible to make an anchor navigation to each one of the panels. I tried it fast but it seems that the offset gets broken from bringing each element to a 'top: 0%;'. Is there any way to achieve this some other way? Feel free to share your thoughts or ideas.

As I know GSAP can't handle percentage values for x and y. Percentage values can help us to make relative animations (relative to the element's width or height) combined with responsive design. Here is a codepen which shows the problem: http://codepen.io/anon/pen/fszAh Steps: Load the codepen click on the red box watch the animation, it moves horizontally 100% relative to the width of the current box Resize your window Click on the box again The tween doesn't get updated, so it moves horizontally with the old width Is there a way to "fix" this? I would like to prevent the browser from the recreation of the tweens and timelines every time the browser resizes.

hello, I am very new at tweenmax. I made my wheel spin. But I would like my wheel to spin 360 degrees left and after, spin 360 degrees right. and have a yoyo effect where it goes left right left right. var ferris = document.getElementById("ferris-wheel"); TweenMax.to(ferris, 1, { rotation:360, ease:Linear.easeNone } ); TweenMax.to(ferris, 20, { rotation:-360, ease:Linear.easeNone } ); how do i do this?

Hi I have a timeline which contains several tweens of a single dom element. Is it possible to draw a line along the tweens x,y coordinates in this timeline, and, if possible, have the line drawn as a curve? Thanks ! Elior

Hi guys, I can't seem to find a way to get the rotation value of a draggable tween which is placed on a timeline and then calling the seek() function to some mid-point on the timeline. I've created a simple code pen as an example: http://codepen.io/anon/pen/ijgDd - as you can see, the "alert" at the end of the script returns a value of 0 despite the fact that the tween is rotated. Any suggestion? Thanks ! Elior