Search the Community

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

Hello, thanks in advance for replying. I am trying to change a Timeline.vars.css property on the fly (changing it on the onStart event). When I change it without navigating through the timeline (using play or seek) it works. The problem is when I use play('hide'). Although the onStart event gets called, I'm not being able to change the vars.css property. Here are samples of my code: function getAnimateOut () { tl = new TimelineLite({onStart: onHideFunctions, onStartParams: ["{self}"], onComplete: next}); // ... here I add some childs } onHideFunctions = function (tl) { var children = tl.getChildren(); $.each(children, function (index, child) { if (child.vars.marginLeft) child.vars.marginLeft = 675.5; if (child.vars.css && child.vars.css.marginLeft) child.vars.css.marginLeft = 675.5; console.log('============'); console.log(child.vars.css); console.log(child.vars.marginLeft); } From my point of view, what's happening is that css properties are inside child.vars.css when I do not use play('hide'), while css properties get into child.vars (i.e. child.vars.marginLeft) when I do use play('hide'). This is the console output for the console.logs: ============ (normal behavior, css property effectively gets changed) undefined 675.5 ============ (this is after I do play('hide'). Althought marginLeft property gets changed, it's not what happens on the element Object {clearProps: "all", marginLeft: 675.5} undefined ============ It's also worth mentioning that this tween is nested inside another: tween = new TimelineLite(); tween.add(getNavigationTween()) .add('show') .add(getAnimateIn(), 'show') .add('hide', '+=5') .add(getAnimateOut(), 'hide'); Seems like a strange behavior to me. Please let me know if I'm doing something wrong. Thank you.

I've been working with Timeline and divs of a 50% width to adjust for window resize. The problem I've encounters is that if you plan on reversing a timeline, it does not recognize that you have resized your divs. I didn't have a good way of showing this in code pen, but this is the site I'm working on: http://heroicdreams.com/test/#servicesportfolio The two divs that break are the colored backdrops. After it animates in, resize the window then click any link and you can see how it glitches from the beginning of the animation. It only remembers the previous div position, not the new resized one.

Hi there, I'm having issues trying to add pauses and next/prev buttons to control the animation. I added pauses in the Timeline using addPause(), and addCallback to change the value of next label but i'm confused and it doesn't work... Here's my simplified code: var nextLabel:String=""; var tl:TimelineMax= new TimelineMax(); tl.addLabel("step1"); tl.addCallback(setNext,"step1",["step2"]) tl.append( new TweenMax(my_MC,2,{alpha:1})); tl.append( new TweenMax(my_MC,1,{x:200})); tl.addPause(); tl.addLabel("step2") tl.addCallback(setNext,"step2",["step3"]) tl.append( new TweenMax(my_MC,2,{alpha:.5})); tl.append( new TweenMax(my_MC,1,{x:400})); tl.addPause(); tl.addLabel("step3") tl.append( new TweenMax(my_MC,2,{alpha:1})); tl.append( new TweenMax(my_MC,1,{y:200})); function setNext(t):void{ nextLabel=t; } my_NextButton.addEventListener(MouseEvent.CLICK,goToStep) function goToStep(e:MouseEvent):void{ tl.play(nextLabel) } I think i'm not doing things in the correct order. Any advices ? Thanks !

Hi Guys! I hope this post finds you well. I am writting because i am using timelinemax in order to create an animation that has 3 stops in between in which the user has the ability to either continue to the next point or go back. All my tweens are working well, and now is time to add the pauses. I thought about just adding them to the onComplete and calling it a day. Yet when reversing they were not firing... This made me find out about onReverseComplete which worked like a charm expect that when going backwards the onComplete was firing as well pausing my animation before it could even get started. After a second click on the back button, the animation started playing backwards correctly. Bceause of this effect, i decided to try adding a callback but to my surprise i ran into the same problem. Then i went to the docs and found information about the addPause function. Including this piece of text: "Remember, the virtual playhead moves to a new position on each tick (frame) of the core timing mechanism, so it is possible, for example for it to be at 0.99 and then the next render happens at 1.01, so if your callback was at exactly 1 second, the playhead would (in this example) move slightly past where you wanted to pause. Then, if you reverse(), it would run into that callback again and get paused almost immediately. However, if you use the addPause() method, it will calibrate things so that when the callback is hit, it'll move the playhead back to EXACTLY where it should be. Thus, if you reverse() it won't run into the same callback again." This is what is happening to me currently and thought this was the right fix. The problem now is that when i add the pauses this way: this.timeline.add( TweenMax.to(this.map.mapPoint,0.5,{frame:this.map.mapPoint.totalFrames, ease:Linear.easeNone}) ); this.timeline.add( TweenMax.from(this.map.line1,1,{scaleX:0, ease:Quint.easeInOut})); // this.timeline.add( TweenMax.to(this.map,1,{x:2286,y:-157, ease:Quint.easeInOut}) ); this.timeline.addPause() // this.timeline.add( TweenMax.to(this.map,15,{x:-57,y:778, ease:SlowMo.ease.config(0.9,0.3)}) ); The animations pauses correctly, but if i try to use resume() or play(). The animation doesnt move at all. Only works at this point if i call reverse() Any ideas what might be happening? thanks a ton alex

Hey guys, i'm trying to do something simple and that i've done before in a similar way, but for some reason it's not working on this project. I'm not sure where am i getting the syntax wrong. I just want to have a timeline to animate the rollover state for the button. Basically i'm going to have an animation for the <a> itself and another one for the span that is inside the <a>. does anybody see the error? http://codepen.io/anon/pen/gAolh Cheers, Thales

Hi there, i'm trying to do a basic animation for a button and it's not working when i put my code on my website. Here's the CodePen page(it works here): http://codepen.io/anon/pen/KnfLk When i drop that code in my website i get this: Nothing happens basically, and even the console.info doesn't work.

Hi - In a banner I'm working on, I have a secondary timeline which controls an object sliding up and down on my screen. The secondary timeline works properly, but I'd also like to be able to pause the main timeline when the secondary object slides up on the screen, and then resume playback of the main timeline once my object slides out of view. Here's my current code: <script> var tl = new TimelineLite(); tl.add( TweenLite.to("#studyDescription", 1, {top:20})); tl.to("bgMask", .5, {autoAlpha:1}); tl.pause(); var button = document.getElementById("openButton"); button.onclick = slideStudyUp; if (button.captureEvents) button.captureEvents(Event.CLICK); function slideStudyUp(){ tl.play(); } var closeButton = document.getElementById("closeButton"); closeButton.onclick = slideStudyDown; if (closeButton.captureEvents) closeButton.captureEvents(Event.CLICK); function slideStudyDown(){ tl.reverse(); } </script> I'm pretty sure that I just need to add something like "main timeline.pause()" to my slideStudyUp function, and "main timeline.play()" to my slideStudyDown function - but what's the correct way to reference the main timeline? Thanks!

Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. I have a timeline that I created. The timline is not really that important. Just in case though: var tweenArticle = new TimelineMax() .from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0) .from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0); This is the site I am trying to put it on: http://webshowcase.tk/wp1/?page_id=114 This is a wordpress site and what I am trying to do is affect every post on the page. When The article is in the viewport I would like to start animating just the elements in that article and if possible reverse but reverse is not super important at the moment. I can't seem to figure out how to get my timeline to play when the article is in the viewport. Any help would be greatly appreciated. Thank you.

I like to set pause on my timeline to help debug certain state. `timeline.addPause(1.3)` The issue is when I use `timeline.tweenTo(1.5)`, it skips the pauses.

Currently I can't find anything in the documentation to register a function to be called each time the playhead change. You can listen to `onUpdate`, but this function doesn't trigger when you `timeline.seek(2)` to a position. Any solution to be notified by every changed to the playhead without adding tons of timeline callbacks?

Greetings, I have been at this for a couple of hours now to no avail. I am trying to append some tweens to a timeline and use negative delays to offset them (they are the same animation otherwise). My problem is that the timeline is waiting each to finish before restarting, which is what I do not want Here's a link to what I have so far http://codepen.io/Zeaklous/pen/sGbku and my code: var timeline = new TimelineMax({repeat:-1}), electrons = document.querySelectorAll('.electron'), paths = document.querySelectorAll('.path'), atom = document.querySelectorAll('#atom'), startDuration = 2; for(var i = 0; i < electrons.length; i++) { var myDelay = -(i * 0.5); orbit(electrons[i], paths[i], myDelay); } function orbit(electron, path, delay) { var e = TweenLite.to(electron, startDuration, {rotationY:'-360', ease:Linear.easeNone, onComplete: function(){ //e.restart(); }, delay:delay }); //timeline.append(e); var p = TweenLite.to(path, startDuration, {rotationZ:'360', ease:Linear.easeNone, onComplete: function(){ //p.restart(); }, delay:delay }); //timeline.append(p); // The following line doesn't seem to add a negative offset... timeline.insertMultiple([e, p], 0, TweenAlign.START, -0.5); } atom.onmouseover = function() { timeline.timeScale(.2); } function TweenAlign() { } If you look at the demo it runs correctly the first iteration (before it's added to the timeline) but fails the next times Can you guys help me get this looking the way I'd like it to? Thanks