Search the Community

Showing results for tags 'timelines'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 7 results

  1. I am having problem to understand how to bind multiple animations into one variable which is in nest timelines. What I would like to achieve is a looping variables like this codepen: But with multiple animations for one/first variable (box1Timeline) like this, mentioned by @OSUblake Kindly assist, thank you!
  2. I'm new to GSAP but trying out TimelineMax and am having difficulty getting the onComplete function to work properly. Basically I want to trigger another timeline after one is finished playing. Here's the pen. Backstory: I encountered this issue with a more complex snippet inside ScrollMagic. So... wondering if I ran into a bug? Thanks for your help hive!
  3. Can 1 timeline, be added to multiple other timelines? I've added 1 timeline, to two different timelines, and only one instance of the added timeline is firing. If not, what is the best workaround for this scenario? Thank you, and thank you for such an amazing product.
  4. I find it easier sometimes to create two timelines rather then one for complex animations. I know I can make one timeline out of it, but my head is spinning as it is. Wondering if there is a performance hit of any sort using two timeline instead of one. I will have two object moving at once regardless. Thanks
  5. spacewindow

    Start paused timeline from other timeline

    Hi team, this should be an easy one. I have two timelines the main timeline (mainTL) and a separate 'loop' timeline (overTL), which is paused, but not added to the main Timeline. I want to cue overTL to start at a specific point on the main timeline. But I can't find what the syntax is to do this – just to move ahead was forced to use the onComplete callback to play 'overTL'. var overTL = new TimelineMax({paused: true, repeat: -1}); var mainTL = new TimelineMax(); overTL .to('#element', 1, {property:value}) (etc...); // MY FUNCTION FOR PLAYING IT so I can use it from mainTL function playIt(timeline, offset){; } mainTL .set('#neon', {scale: 0.1, transformOrigin: 'center center'}, 'startDust') // CUE overTL at this point .set({}, {onComplete: playIt, onCompleteParams:[overTL, 0]}, 'startDust') .to('#neonfade', 1, {opacity: 0},'startDust+=0.3') (mainTL continues ...); I created a function to do it, but just wondered if there is a more straightforward way to get this working in Greensock? There must be!! Kind of like what I used to do in flash where you would start a movieClip loop at a specific point in your main animation. I would like to be able to completely cue this timeline from the main timeline as needed – pause, reverse, seek etc. But obviosuly don't want to have to write a custom function for each of these if its already part of the plugin. Sorry I'm sure this must be obvious, thanks.
  6. anthonygreco

    Nested Timelines

    Hi all, I've recently created a long animation by way of manually adding a whole bunch of individual tweens to one timeline along with delays so that everything lines up. I've since realized that nested timelines is the better way to this, especially since 98%of the animation I'm building is extremely sequential, though I should say that there are some places I'd like one timeline to overlap another, but I believe I can simply use an offset (instead of delays) on individual timelines that need a slight shift forward or back in the timeline. So i understand the concept here, but in my implementation I'm not getting sequential animation of the sequence. Instead I see everything run at once in sync. Here's a jsfiddle showing how I'm building the individual and main timelines. It may seem like there's a lot going on, but you can probably disregard most of the first few vars at the top of the fiddle (which are just param data and drawing methods), the timeline specific logic is at the bottom. I should state, that while there are two of the "banners" displayed there, which should animate sequentially, the elements of the banner should also be sequential. Looking at the structure of the json data (arrays split based on where they should live in a nested timeline) you'll see I want the first line (top left corner) to animate then the top box line and the bottom box line together then the text and the last line (bottom right corner) animate. Making a total of 3 timelines for each banner. Again, I know there may be a bit of code here but I've stripped this down as far as I can get without leaving all of the aspects in for everyone to understand what the goal is. Feel free to ask me for me questions for more clarity anywhere, etc.
  7. spiderstave

    Timeline scrubbing will not reverse in IE8

    Hello, Thanks for porting GSAP to JS! I used it for years in AS and was really excited to start using the JS version. I've already deployed it to several projects with great results. I have run into my first road block, however, and I'm hoping someone may be able to assist. I've created a timeline animation that is controlled by a jQuery UI element (draggable). It works great in all browsers except, you guessed it, IE8. In IE8, the timeline will scrub forward with no problem, but will not scrub backwards in the timeline. I've confirmed that the value I am sending to progress() is properly decrementing, and I'm not sure what else I can do. My code is below: tl = new TimelineLite(); // Create a TimelineLite instance // Construct timeline from gallery items $gallery.find('img.nfu-gallery-item').each(function(){ if(!$(this).hasClass('first-item')){ // Do not include first item, fade in not needed$(this), 1, {opacity: 1, delay: 1}, '-=0.5'); } }); tl.progress(0.5); // Move timeline to 50% tl.pause(); // Pause timeline // Update timeline position var timelinePosition = function(handlePos){ percentLocation = (handlePos / sliderWidth); tl.progress(percentLocation); } // Create jQuery UI draggable element for slider $handle.draggable({axis: 'x', containment: $gallery.find('.nfu-gallery-slider'), create: function(){ $handle.css('left',sliderWidth / 2); // Create UI element at middle of slider }, drag: function(){ timelinePosition(parseInt($handle.css('left'))); // Update timeline position when UI element is dragged } }); Does anyone have any thoughts on why the timeline won't scrub backwards in IE8? Or, perhaps an alternative approach to take for IE8 that will achieve the same effect. Thanks in advance!