Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'timelinelite'.

  • 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. I created a simple timeline following a tutorial, but the animation doesn't run and I keep seeing this in the console: Uncaught ReferenceError: TimeLineLite is not defined Here's my pen: http://codepen.io/omarel/pen/mPEmpe
  2. I have a timelineMax that calls a pause function on another timeline. Right now the function is called and the timeline (a looping sprite sheet) stops immediately. Because this second timeline is a looping sprite animation, I'd like to have it ease to a stop instead of just stopping. Is this possible? Here's some sample code: //THIS IS THE LOOPING SPRITE ANIMATION var TL = new TimelineMax({repeat: -1, repeatDelay:-1}); TL.to("#car", 0.4,{backgroundPosition:"-800px 0", ease:SteppedEase.config(4)}); TL.set("#car", {backgroundPosition:"0 0"}); TL.to("#car", 0.4,{backgroundPosition:"-800px 0", ease:SteppedEase.config(4)}); //THIS IS THE MAIN TIMELINE tl2 .to("#car", 2, { scale:.5, x:"115", y:"-10", ease:Power3.easeOut},"-=.75") .addCallback(stopWheels, 10, {ease:Power3.easeOut}) function stopWheels() { TL.pause(); // ** WOULD LIKE THIS TO EASE OUT TO A STOP } Thanks!
  3. Good afternoon, I've been working on this animation to show a number rolling into view, as you might see on a digital altimeter. My solution was to add pauses in the timeline so that the rolling number would pause for a moment when changing over. The animation works as I would like it to at first, but when the animation begins to repeat, it appears to ignore the .addPause's that I have added. I'm hoping that there may be a more elegant solution to my desired animation, or that someone may be able to help me understand why the pauses disappear when the timeline repeats. Thanks!
  4. Hi, I extract a part of an animation in the Codepen. If you read the animation (drag to the right) it's OK, but when you drag to the left, the element is visible. Why ? Is it a bug or a feature ?
  5. I have created a "pulse" animation using two staggerTo animations on TimelineLite. Initial play works well. However, restarting the timeline (on hover) plays all animations at once. I suspect it ignores initial delay values created by staggerTo? What am I doing wrong? Is there a better way to create this animation?
  6. Hello, What I am trying to do is combine the DrawSVG plugin with this awesome pen, so that a line can be drawn based on the location of the browser scrollbar. Ultimately I would like to make the dotted line reveal with the rocket ship, so that it appears as though the rocket is leaving the line as a tail behind it. What I hoped to do was create 2 timelines so that I could match up the timings of the rocket and the line reveal. What I can't seem to do is get the DrawSVG plugin to respond to the custom code which links up the timeline to the scrollbar. I was also thinking there might be some simpler way to do this by revealing the line with a mask, but I was not able to find any methods which might work with the browser scrollbar. I'd really appreciate any tips, similar projects, or help you might be able to give. Thanks a ton, Savana
  7. var tl = new TimelineLite(), feed = $('.feed'); tl.to(feed, 0.35, { alpha: 0, ease: Power3.easeInOut, onComplete: function(){ feed.empty().html(response); }}); Can anyone tell me why this would fire immediately?
  8. It seems that one of the advantages of nesting Timelines is so you can re-use an animation, but if I try to .add() or .append() a nested timeline twice, the first one is ignored and only the last one animates. I forked Carl's "Use .add() to Nest Timelines" codepen (thanks Carl, you rock) and simply repeated one of the .add() lines, changing the JS from: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) .add(box3Timeline); to: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) // this won't animate when there's a duplicate below .add(box3Timeline) .add(box2Timeline); // comment this out and the earlier one will animate But apparently if you repeat any nested timeline .add(), the first instance will no longer animate, only the last one will. Also I noticed that the parent timeline does wait for the duration of the nested timeline as if everything's running fine, which makes me think it's some kind of rendering or overwrite issue. I'd love to understand what the problem is so I can figure out a solution or a workaround. Thanks!
  9. Hello! I am building a timeline visualizer, that you can easily connect with any timelines you've made with gsap. The idea is to represent the timeline visually, and let the user scrub through it. It's easy to visualize the labels, since there is a _labels property on each timelinelite instance. However, what I would like to know is: Is there any good way to get a reference to all tweens within a timeline, and all function calls? I'd like to know the time and duration of all tweens within a timeline so I can represent them visually, and also the time and name of all function calls within a timeline. Is this possible? Thank you. /Alexander
  10. Hey all! I'm trying to animate some pagination elements we have on a company site redesign and am running into some scoping issues (I think). I will start by saying my JS-fu is not great so it's highly possible this isn't so much a GSAP problem as it is a jQuery problem. You can see the core HTML / SCSS here - http://codepen.io/geebru/pen/avRbzw/ And the JS I'm attempting here: // Pagination // Get pagination items function pagerAnimate(play) { console.log("pagerAnimate Activated"); var $this = $(this); var pagerIcon = $this.find('.pagination__icon'); var pagerArrow = $this.find('.pagination__icon__arrow'); var pagerFill = $this.find('.pagination__icon__fill'); var pagerInfo = $this.find('.pagination__info'); var pagerTimelineCore = new TimelineLite(); pagerTimelineCore.to(pagerIcon, '.3', {scaleY: '2'}) .to(pagerArrow, '.3', {scaleY: '.5'}, '-=.3') .to(pagerFill, '.3', {x: '0'}); if (play === 'play') { console.log("pagerTimeline Play"); pagerTimelineCore.play(); } else if (play === 'reverse') { console.log("pagerTimeline Reverse"); pagerTimelineCore.reverse(); } } $('.pagination--previous').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); $('.pagination--next').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); Basically what I'm trying to achieve is to run the Timeline (forward or backwards) based on hover. The tricky part was getting the $(this) declarations per pagination (previous and next) and playing it forward on mouseIn and reversing on mouseOut. The console.log's in there are firing properly, but nothing is animating and I'm getting no errors. Any help would be awesome as GSAP is saving my butt on some of the designer requested animations on our site Thanks! PS - Apologies if this has been asked, but my Google-fu and searching here led me nowhere.
  11. Hey all, I'm trying to make an interactive musical example where using absolute coordinate in SVGs proved to be too cumbersome so I've switched to a TimelineLite where I can use only relative coordinates but have the possibility to rewind to certain states, obviating the need for absolute coordinates. This works fine, but it would be nice to be able to animate seeks to certain positions in the timeline. In the attached codepen, seek simply resets the timeline to the indicated point (0), but it would be nice to simultaneously move all of the objects to this point without having them abruptly go there or traverse the timeline backwards. Any ideas how to accomplish this? Thanks! ~Mike
  12. Hi All, Hopefully someone can point me in the right direction. I'm sure there's a fairly simple solution but i've yet to find an example (probably too remedial!). Situation: I have an infographic where animated elements are controlled by a timeline slider. That part works fine. What I need to do now is have two text items update using the same slider. For example, first item has a minimum text value of 47 (always whole integers), a maximum of 91 (range?) - so when the slider handle is all the way to the left the html text reads 47, all the way to the right reads 91 and movement of the handle in-between the two extents +/- the text value. The second item is exactly the same however uses a different range (0.9M > 2.3M) The CodePen (linked) is similar to what I want however the value it is based upon time rather than set min/max values. Hope that makes sense. Happy to cobble together a more relevant CodePen if needed. Thanks in advance for any help / pointers / codepen examples! tome
  13. I know this might sound like a dumb question but is there an alternative to calling TimelineLite or TimelineMax without the constructor method. Some of our clients have strict vendors that serve their advertisements and won't allow constructor methods. So this essentially means we can't use GSAP because to invoke it means using var tl = new TimelineLite( ); and for whatever reason these systems don't like it. Any suggestions perhaps using Object.create( ) ? It's not a huge deal if there isn't an alternative but I prefer to use GSAP it makes banner development a breeze and we aren't allowed to use jQuery either so GSAP is the perfect solution. Thank you
  14. Hey, so I want to do what the title says: make a title slide in and then slide out with timelineLite. My code is in this jsfiddle. I know that, because I remove the top property, the title goes down, but what I wanted was that that going down was part of the transition, and not an instant thing, like it it is now. Is there a way to make this work? Thanks! (By the way, I'm new in the forum, so I'm sorry if I made any mistakes asking this question.)
  15. Dear GSAP developpers, First of all, thanks for your library, which is now the only source of animation for the website I'm coding. Despite all my efforts, I can't find a way to work around my wish to use the same tween in multiple timelines. Yes, I can easily play a Tween and reverse it whenever I want (see the Codepen)... Yes, I can easily create a Timeline for one specific situation... But no, I can't find how to control a tween being played in a timeline from another timeline ! This Codepen's HTML describes what I would like to achieve. The buttons perform as I expect them to, except for the sequence requirement (#hero1, THEN #hero2). Obviously, I would like to use a TimelineLite for each sequence (using delays is not an option if the number of tweens involved increases), to allow the opening/closing of each #hero to be reversed midway if the user decides so. I guess my trouble comes from this (found in FAQ) : Any idea on how to get the behaviour I describe in the codepen's HTML ? [EDIT : I initially came to GSAP to avoid using callbacks, please don't tell me that's the solution :/] [EDIT : I just realized the problem as I put it is easy to solve. What I need is to AVOID at all costs using more than one tween for each object I work on. No problem with maniuplating in any way the tweens I declared, though. This forked codepen doesn't work, due to the funny behaviour when you quickly click on buttons]
  16. I would like to set the 'top/left' coordinates of an element in a TimelineLite using variables set in a prior call (see below). When I use the code below (a simplified version of my code) I get the following error: 'ReferenceError: Can't find variable: finalleft'. I have also tried using window.foo to set the variables which also did not work. Any ideas on how to get this to work? var problemtl = new TimelineLite(); problemtl.to(step1, 1, {alpha:1}) .to(step1, 1, {scale:.8, left:300, top:300}, '+=0.5') .call(function(){finalleft = 500; finaltop = 100}) .to(step2, 1, {alpha:1}, '+=0.5') .to(step2, 1, {scale:.8, left:finalleft, top:finaltop}, '+=3');
  17. phillip_vale


    Hi there, I am trying to copy exactly what the animator is achieving in this clip. http://greensock.com/sequence-video I need to create a HTML5 banner ad for a client. Unfortunately, I need a bit more control than just using Tweenlite delays and overlaying different animations. TimelineLite seems to offer the answer that I need and I thought that this tutorial was offering the solution. However, although my banner works as a simple animation as soon as I convert the code similar to that in the tutorial it ceases to work. My code looks like this... <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script> <script type="text/javascript"> var tl = new TimelineLite(); tl.from("#heading", 1, {left:-280, autoAlpha:0}) .from("#button", 1, {left:-280, autoAlpha:0}) .from("#tandc", 1, {autoAlpha:0}) </script> Do I need to include a <script src= for TimelineLite? Am i missing something really obvious? Thanks in advance, Phil
  18. Hi Carl, I want to execute a moderately difficult timelinemax anumation. Every time I check out http://greensock.com/position-parameter I see the Visualizer. It reminds of Flash and I start getting illusions of an After Effects Timeline visualizer. Any news on this? Is it up for sale as a plugin? I would pay. I need to stop the illusions.
  19. Hi, So I have this code: var toggleInfo = function(){ var info = new TimelineLite(); $('.info-open').click(function(e){ e.preventDefault(); info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false}); info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false}); info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"}); info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.staggerFrom('.contact li', 0.4, { css: { transform: "translateY(-30px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.from('.info-close', 0.2, { css: { transform: "translateY(-60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3d: "auto"}); }); $('.info-close').click(function(e){ e.preventDefault(); info.reverse().timeScale(2); }); } And it works fine the first time i click the triggers. However, when I click "info-open" again after I have clicked "info-close", it fires info.reverse(). This is an overlay im toggling and the first open and close works, but when i want to open it again it only fires the reverse animation thus closing the overlay.
  20. Hello, I'm pretty new to JS, but worked for many years with Flash AS. One issue I'm running into are Linter problems in my code editor "Brackets". My animation runs fine and Chrome also has no errors. But I really would like to get rid of all these Linter probelms showing up. I've loaded jquery and TweenMax libraries in my main html file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <script src="main.js"></script> In my "main.js" I have: var videoPanelTl = new TimelineLite(); Now this Linter problem that shows up: "'TimelineLite' is not defined. - W117 -". More problems show up when using "$" , or easing "Back" for example. They all show up as "is not defined". Seems like my JS file doesn't even know that TweenMax has been loaded in the html file? I'm also not getting any code hinting for TweenMax - probably for the same reason. I've searched for many hours on the internet since it seems a pretty basic question but couldn't figure it out. Is there a way to fix this? I would really appreciate any help.
  21. Hi, I'm having trouble getting the revert() function to work after the following SplitText Timeline Tween with a random character order... http://codepen.io/GreenSock/pen/HafFE Can anyone help me out? Thanks! ~ Kyle
  22. Hello, I have a little problem understanding the function of reverse TimelineLite. If someone has 5 minutes to help me understand, would be nice. $('#plop').on('click', function() { $(this).toggleClass('is-open'); // Animation var animNav = new TimelineLite({ paused: true }); animNav.to('#nav', 0.2, { x: 100, opacity: 1, ease: Sine.easeInOut }) .staggerTo('.nav-link', 0.1, { opacity: 1, ease: Sine.easeInOut }, '0.1', '-=0.15'); if ($(this).hasClass('is-open')) { animNav.play(); } else { animNav.reverse(); } return false; });
  23. I might be just having a brain fart, but is there a simple way to tell a TimelineLite instance to play, and stop when it gets to x% of it's total duration? Just for context, I have gauge that's an svg, and I'm using drawSVG to animate all of the elements of a specific class name to indicate how full the gauge is. So if it were, say 75% full, I'd only want the Timeline to animate to 75% of the total. In the attached codepen example, only only some of the rays on that icon would animate. There might be a way better way to do this - I'm very open to suggestions!
  24. this is my coding sample: var timeline:TimelineMax = new TimelineMax(); timeline.staggerTo([mc1,mc2,mc3],1,{onComplete:Function}, 1); i want each mc to have a different function. is it possible?
  25. Hi ! I'd like to know if anyone has already used TweenLite or TimelineLite server-side with Node.js. If not, is there a way to do so ? A GSAP NPM module would be something great. Thx