Search the Community

I'm making this thing: http://codepen.io/robbue/pen/645dff0dd2be4811590671525e340493 But I'm having some problems with the tweens not being completed, resulting in this (MBP Retina Chrome 34): Why isn't every tween completed? It's stops before reaching a value of 1/0. Is there a better way to do this?

Hi there. This is a straight forward question. What is the best technique for coding a replay button in Greensock AS3? Would TimelineMax be best? Could I see an example? Thanks in advance for any assistance.

Hello.. Is anyone else seeing this error in the console.. when trying to declare a new instance of TimelineMax() from the Tweenmax 1.11.5 CDN?? I see this happening, just for a simple tween test: http://codepen.io/jonathan/pen/eankc/ I get the following error in codepen and even locally for some reason: TypeError: this is undefined https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js Line 16 Thanks in advance to any who reply back **UPDATE** Its so weird.. now like 1 hour later and i don't see the error anymore, but the animation runs now... so weird ! I guess something was going on with the CDN... i guess whatever it was, its working again.. codepen might have been the issue too .. sorry

Hey guys. This is my first foray into TimelineMax. I'm trying to build an app that will take the same timeline and repopulate with another clip before it plays again. So far, the only way I've been able to make it work throws errors. Any advice? var elements:Array = new Array(mc0,mc1,mc2) var counter:Number = 0; var tl:TimelineMax = new TimelineMax({paused:true, repeat:0});; var mc = elements[counter]; function stopIt():void { tl.pause(); } stage.addEventListener(MouseEvent.CLICK, resume) function resume(e):void { tl.resume(); tl.to(mc, 1, {x:100, onComplete:stopIt}); tl.to(mc, 1, {x:300, onComplete:stopIt}); tl.to(mc, 1, {y:250, onComplete:stopIt}); counter = counter+1; mc = elements[counter] }

Hi, I have a simple question: Is there a way to alter the offset during animation? t1.to(contain, 1, {left:"-100%"},"+=4", "one") So in this case... to make "+=4" turn into "+=0"

I have three elements - el1, el2, el3. My goal is to animate these 3 elements: el1 - continuous animation, el2 and el3 - animate them two times one by one. What I mean is el2 passes two full circles of animation then stops, right after this el3 passes two full circles of animation then stops, right after this el2 passes two full circles of animation... and so on. So I did this in this way http://codepen.io/anon/pen/fuxqv But I'm sure that this is not the right way and I belive that TimelineMax should have a mechanizm to control this type of animation and I just don't know about this. Any help would be greatly appreciated! Thanks!

Hello everyone! Here is the link to my codepen: http://codepen.io/reggiegulle/pen/zCHyn As my code stands, it is fairly straightforward, and it does manage to accomplish what it was meant to do. It's just one basic timeline with buttons and all the following functions are grouped at the bottom of the code, like so: $("#debeersTopPanel").on("click", function(){ debeers.tweenFromTo("ringFadeIn","ringPause"); }); function ringBack(){ $("#BackButton1").on("click", function(){ debeers.tweenFromTo("ringFadeOut","ringToStart"); }); } $("#debeersBottomPanel").click(function(){ debeers.tweenFromTo("pendantFadeIn","pendantPause"); }); function pendantBack(){ $("#BackButton2").on("click", function(){ debeers.tweenFromTo("pendantFadeOut","pendantToStart"); }); } function debeersResume(){ debeers.play(0); I am fairly new at JavaScript, and so I am seeking some help on whether the code above can still become more elegant. The events on the timeline are mostly repetitive; could these repetitions be turned into iterations? I am still trying to get a better idea of objects and object arrays, and so I am not too sure whether those principles can apply to my codepen, or if other entirely different processes may be applicable. It's just that there may be a chance that more items will be added to my present drop down menu, and so any method of streamlining the coding (if there is any) would be very useful. I would appreciate any help. Thank you very much in advance! (Note: I mostly specialize in video, so if anyone has any questions about it, I would not hesitate to help out as much as I can)

Tweens offers many events to detect actions: onStart, onComplete, onReverseComplete... But there's no onReverseStart How would you detect the animation started in reverse?

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?

So I have a loop of lights lighting and diming - right now I have this happening in timelinelite with results that I find satisfactory. However, I'm wondering if any of you devs have a even more streamlined way of accomplishing this via timelinemax and an array? Can you let me know anymore details about the technic I'm demonstrating here? var tl = new TimelineLite(); tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ;

What's a better way to make a sequence like this shown here, but utilizing timelinemax? TweenMax.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1}); TweenMax.to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.25, delay:1.25}); TweenMax.to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3, repeat:3, repeatDelay:1.1, delay:1.1}); TweenMax.to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.35, delay:1.35}); TweenMax.to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1}); TweenMax.to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.25, delay:1.25}); TweenMax.to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4, repeat:3, repeatDelay:1.2, delay:1.2}); TweenMax.to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.37, delay:1.37}); After this series completes further animation will resume'.

Hi, I urgently need a way to draw say dots along an entire path of a TimelineMax. The path does not need to animate. It just needs to be drawn initially. Can anyone point me in the right direction? ANy help appreciated. Sample timeline: //create timeline self.llnTimeline = new TimelineMax({ delay: 1, smoothChildTiming: true, timeResolution: 0, onUpdate: function() { } }); self.llnTimeline.seek(0); self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, { left: 359, top: 998, ease: Linear.easeNone }), 0); // 1 self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, { ease: Linear.easeNone, css: { bezier: { autoRotate: true, type: "thru", values: [{ left: 338, top: 1099 }, { left: 257, top: 1114 }, { left: 47, top: 945 }, ] } } }), 12); // 2 self.llnTimeline.add(TweenMax.to(self.llnPlane, 22, { ease: Linear.easeIn, css: { bezier: { autoRotate: true, type: "thru", values: [{ left: 27, top: 836 }, { left: 304, top: -573 }, { left: 379, top: -1045 }, ] } } }), 20);

Hi I am trying to achieve a nice switching animation with hint for the user. <div class="messageBox"> <div class="start"> Please start by entering name of your chosen product. </div> <div class="pickup"> Perfect now pickup your item </div> <div class="selected"> Selected </div> <div class="notFound"> Nothing found, it's possible we are not having this for you yet </div> </div> Javascript code like this var transform = {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}; var anim = new TimelineMax() .set(".start", {visibility: 'visible'}) .set(".pickup", {visibility: 'visible'}) .set(".selected", {visibility: 'visible'}) .set(".notFound", {visibility: 'visible'}) .staggerTo(notFoundText.chars, 1,transform , 0.001, "s") .staggerTo(selectedText.chars, 1, transform, 0.001, "s") .staggerTo(pickupText.chars, 1, transform, 0.001, "s") .staggerFrom(startTypeText.chars, 1,transform , 0.001, "s") .staggerTo(notFoundText.chars, 1, transform, 0.001, "s2") .staggerTo(selectedText.chars, 1, transform, 0.001, "s2") .staggerTo(startTypeText.chars, 1, transform, 0.001, "s2") .staggerFrom(pickupText.chars, 1, transform, 0.001, "s2") .staggerTo(notFoundText.chars, 1, transform, 0.001, "s3") .staggerTo(pickupText.chars, 1, transform, 0.001, "s3") .staggerTo(startTypeText.chars, 1, transform, 0.001, "s3") .staggerFrom(selectedText.chars, 1, transform, 0.001, "s3") .staggerTo(selectedText.chars, 1, transform, 0.001, "s4") .staggerTo(pickupText.chars, 1, transform, 0.001, "s4") .staggerTo(startTypeText.chars, 1, transform, 0.001, "s4") .staggerFrom(notFoundText.chars, 1, transform, 0.001, "s4") anim.pause() And then when step is selected anim.play(0) // or 1/2/3 setTimeout(function(){ anim.pause() },1000) I' am doing probably some really wrong here. I did set up each step to last one second, but with stagger it seems that it is more depend on sentence length... so sometimes it's less then a second, but usually more. Another problem I have is with instructing anim to play exactly one second. I could not find any api support for this, so that's why setTimeout - but this doesn't work properly of course - it's not precise I'll bet there must be some more convenient way how to achieve something similar Thx a lot for help

I'm making the switch from Flash to GSAP HTML5 animation and want to really make sure I'm doing this the best way. Right within my html doc I have a series of animation that utilize TimelineMax so that I may loop the entire set of animations. I have a few questions about these. First of all here is the code: <script> window.onload = function(){ var tl = new TimelineMax({repeat:2, repeatDelay:3}); tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) ); tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) ); tl.add( TweenLite.from(season2, 1.5, {alpha:0}) ); tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) ); tl.add( TweenLite.to(packshot, 2, {alpha:1, ease:Power4.easeIn}) ); tl.add( TweenLite.to(holiday, 1, {alpha:1}) ); tl.add( TweenLite.to(starts, .75, {alpha:1}) ); tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) ); } </script> Is there a more optimized way to load these? I know that window.onload = function(){ isn't the best way - I heard that document.ready could be a good way but having a hard time getting that work. Further more I can probably scrap the TweenLite reference all together and just use tl.to, is that correct? Also right now I'm pulling in the entire TweenMax library in this manner: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script Is there a way to only load the select things that I need and therefore save on file size? Please advise. Apologies for the noob questions! Thanks in advance for any help!

I'm no expert with greensock, but I have done some (I thought) more complicated timelines than this one in the past, so I'm baffled as to why this doesn't work. I'm just trying to do the (admittedly overdone) thing where several rectangular top DIVs replace each other by exiting left and entering right at intervals. JSFiddle is here: http://jsfiddle.net/cheolsoo/uLNgX/ If you comment out the JS, you'll see the women doing yoga. That's meant to be the initial DIV. The problem is that once I uncomment the JS, that particular DIV is no longer the one that's initially shown. The timeline seems to work OK once it's gotten past the first few tweens. Any insights GREATLY appreciated!

Hi, Firstly, let me say a huge thanks to Greensock for providing such amazing tools over the years, I've been using your products since AS2 Tweenlite and they never fail to amaze me with their power and usability...thank you!! I have made a simple fiddle to demo the problem here : http://jsfiddle.net/x0b/cXR7L My situation is this: I want to have a main timeline that has 3 sections - an intro, a changeable middle section and an outro, in that order. Once the user has completed the middle section and the outro, they click a button and a new middle section replaces the current one, the rest remains the same. Once the button is clicked I pause(0) both the outro and middle section to reset their tweens, then kill them both so they get removed from the main timeline (incidentally - remove does not seem to do anything for me as the duration of the main timeline remains the same if I check it after doing remove - is this a correct behaviour?). Then I add the new middle section and the outro back to the timeline. The timeline is controlled by scrolling the output window and runs correctly initially; the green box moves down (intro) the blue box goes left 100px further than the yelow (middle section) and then they come back to their starting positions whilst the red box comes from 1000px to cover the green box (outro). The problems once the button is clicked are two fold 1) The intro runs ok, the new middle section runs ok, but then as soon as the timeline enters the outro, the blue box jumps out to 200px and the yellow box jumps to 100px. I guess this is because the outro tween has for some reason stored these values the first time it is run, even though it was killed. 2) If I invalidate() the outro timeline, the blue box glitch disappears but then the from tween does not work correctly, I presume this is because the invalidate means the timeline has forgotten where the from tween started from? So I'm kind of stuck between two problems and not sure whether I'm using the API wrong or the API can't do what I need. Can anyone please provide some insight? Thanks!

Hey all, I'm currently playing with the timeline and setting up a sequence of animations. So far i've used tl.to in my sequencing and all went good. I then wanted to implement .fromTo however that seemed to mess up my timeline. My objective is fairly simple, summarized in the following steps. 1. I do some initial CSS tweening 2. I fade up some text 3. I tween my div to the outer right 4. I change up some text 5. ISSUE: I now want to re-position my div to the outer left and tween it into center again. Ive set up an illustrative codepen example here: http://codepen.io/mrsgs/pen/IeLrF Note: uncomment line 15 to see the issue apply

Quick question: how would we set a repeat for a SteppedEase animation that's sitting inside a timeline? I noticed today that the repeat I had in this sample of code wasn't having any effect: var t1 = new TimelineMax(); t1.from("#object1", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 2, repeatDelay: -0.5 } ) t1.from("#object2", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 3, repeatDelay: -0.5 } ) Is there another way to declare the repeat, or would it be better off creating a set of functions that can set the repeat?

I'm using TimelineMax to create an animation. I add tweens to it with, for example, the to-method. I know it's possible to set a label to a tween on the same line as adding it to the timeline like this: tlMain.to(sky, 2, { alpha: 1}, 'skyIn') ...and how to timeoffset a tween in the timeline by using [label]+=[value] or [label]-=[value]: tlMain // MOVE IN SKY + SNOW 0 .to(sky, 2, { alpha: 1}, 'skyIn') // fade-in sky .to(snow[0], 2, { alpha: 1}, 'skyIn+=0.5'); // fade-in snow 0.5 seconds after moving in the sky But what I would like to archive is: - add tween W with label A - add tween X with a timeline offset to label A - add tween Y with a timeline offset to the last added tween (tween X) ánd setting a new label for this tween ('Label B') - add tween Z wich starts at exactly the same time as tween Y, so the timeline position is 'label B' So I would like to add a tween to the timeline, add a NEW label this new tween and set a timelineoffset to this new added tween at the same time. So no offset to the given label, but an offset to the last tween, while giving it a new label at the same time. I tried a lot and looked for it in the docs and videos (like http://www.greensock.com/sequence-video/) but can't find a solution to this. Hopefuly you understand my question Is this possible?

Hi, I'm new to gsap and playing around with grouping animations. I'm struggeling with following: var mtl = new TimelineLite(); function hufPerspective () { var sentence = Huf.html().split(""); var tl = new TimelineMax({repeat:1, repeatDelay:2, yoyo:true}); TweenLite.set(Huf, {css:{perspective:500, perspectiveOrigin:"50% 50%", transformStyle:"preserve-3d"}}); Huf.html(""); $.each(sentence, function(index, val) { if(val === " ") { val = " "; } var letter = $("<span/>", {id : "txt" + index}).html(val).appendTo(Huf); tl.to(letter, 1, {autoAlpha:1, ease:Back.easeOut, rotationX:360, transformOrigin:"50% 50% -20"}, index * 0.05); }); return tl; } mtl.add(hufPerspective(),1); mtl.play(); I can't this getting run. If I remove the 'return' the animation plays as expected, but with the retunr nothing happens. What is my mistake? Thanks. Olaf

Hi guys, I've been trying to work this out but just can't get my head around it. The following needs to happen: - 3 Images - 4 Positions (with 4 values. X, Y, width and height) - Click on the next button - Images rotate. 1 goes to position 2, 2 to 3, 3 to 4, and 4 to 1. My solution (that doesn't work) was as followed: var tlTelefoon = new TimelineMax(); var positions:Array = new Array (new Array(267,136,386,520), new Array(236,138,339,456), new Array(204,139,255,343), new Array(420,134,377,540)); var currentPhone:Number = 1; var phone = new Array("toestel1", "toestel2", "toestel3", "toestel4"); btnNext.onRelease = function(){ if(currentPhone < 4){ currentPhone++; } else{ currentPhone = 1; } animatePhone(); } animatePhone = function(){ for (var i = 0; i < phone.length; i++) { tlTelefoon.to(toestel[0], 1, { _x:positions[0].x, _y:positions[0].y, _width:positions[0].width, _height:positions[0].height}) .to(toestel[1], 1, { _x:positions[i].x, _y:positions[0].y, _width:positions[0].width, _height:positions[0].height}) .to(toestel[2], 1, { _x:positions[i].x, _y:positions[0].y, _width:positions[0].width, _height:positions[0].height}) .to(toestel[3], 1, { _x:positions[i].x, _y:positions[0].y, _width:positions[0].width, _height:positions[0].height}); trace(toestel1); } } In short: - Button is clicked, var currentPhone increment with 1. - animatePhone function is called. - every Phone their values (x,y,w,h) should change an should animate to those spots. Help is very much appriciated! Just can't figure this one out. Maybe I'm just working on it for too long and don't see stupid mistakes. If so, please say so. Thanks! Youri

Hello, UPDATE : I found this answer http://forums.greensock.com/topic/7694-tweento-duration/ that works well. Sorry for the duplicate question. I created a timeline with labels and tweens. It's basically 4 slides (100% height) that move up or down. I have a top menu and when I click on an item I want to move the playhead to the right label so i'm using the myTimeline.tweenTo('labelName') which is working fine. But let's say I'm on my first label and I want to fast forward to the last one when I click on the last menu item. When I do a tweenTo('lastLabel'), it takes a long time before getting there because it's doing all the transitions (with easing). Is there a way to "skip" the transitions, delays, duration to go to the last label. I could change : timeline.timeScale() TweenLite.defaultEase = Linear.easeNone but I was wondering if there was an easier way. Thank you.

Hello All, I am developing an app on android using phone gap. I am using timelinemax for animation. My animation is like this : one object is animating along with scroll animation. Animation works fine after scroll is completed. when both run simultaneously then object animation is poor. Is there any workaround for this ? Android Tested : 4.0 to 4.2 My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ? Any help would be appreciated.

hi, i have one doubt regarding adding animation array in timelinemax. Is it efficient if i add array of animation in timelinemax or i add one animation at a time? ..What will it make difference?

How do I execute a function after an animation has completed? I've got a simple animation: I grab an element, and then I animate it. Lets say my animation function is called changeState(). I want to do this sequence: 1. changeState() 2. selectNextElement() 3. changeState() selectNextElement() should only run once changeState() has completed it's animation sequence. Here's my stub for changeState: // get current block and animate it function changeState() { var currentBlock = $(".current") ; // colortween the current block var tl = new TimelineMax() ; tl.to( currentBlock, 1, { backgroundColor:"rgb(205,151,20)" } ) .to( currentBlock, 1, { backgroundColor:"rgb(152, 129, 74)" } ) ; }