Search the Community

I have a situation where a slideshow is dissolving between images. I am using TimelineMax and allowing the slideshow to loop endlessly. I need to give the user the ability to pause and restart the slideshow... easy enough using pause(). However I would like to make sure that if an image has already started tweening (dissolving into the next image), that the tween doesn't pause part way through... resulting in two semi-transparent images on top of each other. Is there a way to pause the timeline but allow any existing tweens to complete first?

Hello, I want to add a class to an object on a specific position in the timeline. tree.add($('#map-container').toggleClass('show-map'),3); didn't work. (tree is a timeline) How can I make something like this? Thanks in advance: Thomas131

Hi, thank you team greensock for the terrific work you're doing! I'm a big fan of your engine and your support! In my project I'd like to go forth and back on the timeline of a movieclip (which has a bitmap on each frame) while scrolling with my mouse wheel. For that I am creating a frames-based tweenMax and adding it to an also frames-based timelineMax. Then I am using the "tweenTo" method to go forwards or backwards on the timelineMax according to the values I create while scrolling. Tweening forwards seems to work, but it wouldn't tween back when the value decreases again. I attached a demo file with a simple rectangle moving to the side, instead of the bitmaps, on each frame. As you might have noticed I am quite new to actionscript, so I am really happy if anyone would like to give me a hint. Greetings from Germany elsa DEMO.zip

Hello, Is somewhere a more minimal example of tweendeck aviable than this one? Thomas131

Hi I wonder if there is a way to make a call onStart with the element getting animated. /HippieSvin var arr:Array =[classWithOtherStuff,classWithOtherStuff,classWithOtherStuff]; var tm:TimelineMax = new TimelineMax(); tm.staggerFrom(arr, 0.5, { delay:0, y:'200', ease:Quad.easeOut, onStart:ElementInArr.doSomething}, 0.1);

Hi, I have multiple small timelines added into a main timeline. And main timeline is controlled by a slider control and play pause buttons. The small timelines can be a text animation with a read time wait, or an image animation. This is my set up for text + image animation screen. I want to add a timeline to main timeline of an animation which keeps on repeating itself for the wait read time of a text animation timeline. Is there anyway to repeat an animation or play an animation in a loop for X amount of time (in seconds)? Thanx.

I'd like to tween a CSS value, say a div background color, through multiple colors based on scroll position -- as if I could set up a gradient of colors (for instance a spectrum/rainbow). My thought was to set up tweens on a TimelineMax and then check on each scroll update as to percentage scrolled and seek to that percentage position on the TLM. I can do the grunt work, but I'm curious to know whether using TLM in this way would even be possible -- any help appreciated --

Hi Folks, I cobbled my way into translating this character-swapping transition from a previous version that was AS3. This works OK, but it's not quite as smooth as the Flash version was. Also, I think better programmers could make it more efficient. here's my codePen: http://codepen.io/PawleyBoboli/pen/srEmB?editors=001 This seems like it is completely do-able with SplitText and TimelineLite or Max, but I struggled to come up with a solution with those tools. I appreciate any tips or insight. thanks, --Kevin

I created a codepen here : http://codepen.io/keldon/pen/cGzid/?editors=011 My 'player' has a property 'timeline' which is a TimelineMax. It is created paused and I have the player.timeline.play commented out on line 72. My question is : why does the the '.add' call on line 142 immediately execute? I would think it wouldn't execute until the parent timeline reaches the frameLabel 'frameDragon1'. Thanks for any help, Keldon

Hey forums, I've just started using TimelineMax and have put together a small sequence. But when I click to play it in reverse there is a small 1 second delay before it moves any animation yet when I click to play it forward there is no delay. This is what I have got. var aboutMenuTimeLineIn = new TimelineMax({paused: true}); buildMenuTimeline(); function buildMenuTimeline(){ var menu = $('.popup-menu-container'); var overlay = menu.prev(); aboutMenuTimeLineIn.to(overlay, 0.3 ,{autoAlpha: 1}) .to(menu,.5, { autoAlpha: 1, top: 0, ease:Quint.easeIn}) .to(menu,.5, { width: 800, ease:Quint.easeIn }) .to([menu.find('.menu-option'), menu.find('.menu-close-box')], 0.1, { autoAlpha:1 }); } self.openMenuPopup = function(){ aboutMenuTimeLineIn.play(); }; self.closeMenuPopup = function(){ aboutMenuTimeLineIn.reverse(); };

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?

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.. 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"

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)

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!

Hi, I'm tweening a timeline to a label but there doesn't seem to be any way of controlling the duration myTimeline.tweenTo("zoom1"); I want something like this, 3 seconds TweenMax.to(myTimeline, 3 ,{tweenTo:"zoom1"}) Is it possible?

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!