Jump to content

Search the Community

Showing results for tags 'Timelinemax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. 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.
  2. Hi, I am trying to animate two div in the same ScrollScene simultaneously but only once has animation, the second is not animated. I just made a fiddle for this problem, I have other ScrollScene before and after. Codepen URL: http://codepen.io/dhenriet/pen/qtsgi
  3. Have a sequence of overlaid images, am animating their opacity. The animation is looped, but pauses mysteriously for three seconds or so at certain points. Frustatingly the codepen does not recreate the issue - using coloured boxed only, it seems to proceed without pause. Am using image files each 590 kb (1024 x 768). Please note - this is designed for use as a local site only. Is this something to do with the browser cache? Am using Chrome on a Mac. The overlay of CSS animation does slow it down, but removing it does not rid the pausing issue. Alternatively, could it be that the CSS opacity is somehow reverting to the pre-animated state? Developer tools shows that the animation processing continues, during the pause in which it does not appear on screen. thanks for all help
  4. Hello, I am have a simple animation that hides and shows the navigation. I made this into a TimelineMax sequence where on mouseenter it plays the time line, and on mouseleave it reverses the time line. With out setting a timer for 2 seconds, how can I delay the start of the reverse when the user rolls off? Here is what I currently have. var navTL = new TimelineMax(); navTL.to( $navMenu, 2, { alpha : 1, left : 0, ease : Strong.easeOut }, 'start' ) .staggerTo( $navMenu.find( '.top-btn' ), 1, { alpha : 1 }, 0.2, 'start' ); navTL.pause(); $navArea.on( 'mouseenter',function ( e ){ navTL.timeScale( 1 ).play(); } ).on( 'mouseleave', function (){ navTL.timeScale( 3 ).reverse(); } ); I tried adding things like navTL.delay( 2 ); to the mouse leave function And tried adding a repeat delay to the time line its self. But since I am not yoyo-ing that doesn't really come into play. I am looking for a GSAP solution to this. I can make a settimeout function but I don't think that is the cleanest way. Thanks in advance for your help. Jermbo
  5. Hi! Is it possible that the onComplete and totalDuration methods of TimelineMax doesn't work at all? version 12.1.5 I have nested TimelineMax instances all has totalDuration = 0, the nested onComplete callback functions doesn't get called. The main TimelineMax onComplete function is triggered immediately though. Or I missed something in the last few months.. Thank you. Gergely.
  6. I don't know. What am I doing wrong? My code is essentially like this: var tl = new TimelineMax({paused:true}) tl.to($("#pin"), 1, {x:455,y:198, onComplete:myFunction, onCompleteParams:["params"]}) .addLabel("play_from_here") .to($("#pin"), 1, {x:737,y:307}) tl.play(play_from_here) using play(), resume(), seek(), it doesn't matter, it always trigger all events on the way.
  7. Hi, I'm still new to GSAP and considering that I couldn't find anything helpful, I suppose that I'm missing something obvious. Basically, I have a timeline which I need to kill/clear, then rebuild it. The new tweens in the timeline have the same target as the old ones, although they might have different properties. This is the simplest demo of my problem: http://codepen.io/nyordanov/pen/gAcjI You will see that #test gets stuck. What is the correct way of doing this?
  8. Hi, I'm trying to run a sequence with multiple objects using a single TimelineMax instance, then moving between different labels on the timeline. Mostly this works well, but if I add another object to the sequence, with a delay, going to the specified time doesn't reset the objects properly. E.g. tl.insert(TweenMax.to(obj1, 1, {x:100, y:100}), 0); tl.insert(TweenMax.to(obj1, 1, {x:200, y:100, delay:1}), 0); //At this point tl.gotoAndStop(0) will reset the animation fine. if I add a tween of another object to the timeline, which has a delay also, then tl.gotoAndStop(0) doesn't work. E.g. tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}, 0)); Without the delay parameter, the timeline will reset itself fine if I call tl.gotoAndStop(0). Is there a bug in TimelineMax, or have I done something wrong?
  9. 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?
  10. 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
  11. 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
  12. Hello, Is somewhere a more minimal example of tweendeck aviable than this one? Thomas131
  13. 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);
  14. 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.
  15. 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 --
  16. 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
  17. 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
  18. 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(); };
  19. 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?
  20. 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!
  21. 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
  22. 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] }
  23. 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"
  24. 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)
  25. 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?