Jump to content

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

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
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. I'm trying to do an autoalpha switch with a navigation. To prevent the page from getting too crowded, I'm tweening autoalpha for the appropriate content when the nav element is clicked. I've created a loop to create the timelines and listeners, and then calling the timelines on the appropriate "titles" click. Right now, the tween works if you click the titles once each, but if you try to switch back and forth, the timelines are no longer tweening.
  2. Hi, I have a basic timeline that tweens the opacity of list items in various ways. When certain things happen on screen I need to clear the timeline completely and also reset the elements back to their original starting values. 1st attempt: Just using restart() on the timeline expecting it to clear the existing inline "style" attribute. The timeline restarts nicely but it starts with the current inline values of the elements (eg: style="opacity: 0.89434") which ruins the animations because all the timings go off. 2nd attempt: Using invalidate() on the TimelineMax object to clear th
  3. I'm trying to get my flicker animation to start after the opacity part of the tl tween. Problem is I can't just append it to the end, because I've got more tl tweens running while the flicker animation is happening. As you can see in the tween, it doesn't look like my function is firing at all. Any ideas? Codepen updated: http://codepen.io/kathryncrawford/pen/YyoyLz
  4. I'm trying to create a flicker effect (eventually intended for some christmas light images) that will flicker the light off and on on repeat, and with a yoyo effect so there isn't a jump between opacity:1 and opacity:0 when the tween repeats. Right now, nothing is happening in my codepen and I'm not really sure where I went wrong!
  5. How can I make this work? I want to pause, clear/reset my TimelineMax from this onclick function call. I'm getting an "Uncaught SyntaxError: missing ) after argument list" when I run the console. Is what I'm trying to do correct or possible? <div class="nav"><div class="arrowDown"><a href="#slide03" onclick="init03(); init02(tl2.pause(0); tl2.clear(); ); "></a></div></div> </div> An abbreviatated JS version of the init02() function has this: function init02(){ var tl2 = new TimelineMax(); tl2.to...
  6. I've created a 3D bar in illustrator (see codepen). Now I want to animate it with TweenMax (or TimelineMax) as if it's building up from the bottom to the top. I tried a couple of things to make this happen, but without any luck. - Created a clipping-path and then try to change the Y coordinate of the 3 polygons (or wrapped them in a <g id="bars"></g>) - Tried to animate the points of the polygon (http://greensock.com/forums/topic/8565-animating-svg-polygon-points-using-attrplugin/) I hope someone can help me with this. This is the end result what I need to crea
  7. When I'm animating along a bezier curve, the object being animated slows down towards the end of the curve - you can see this very clearly in the attached Codepen which draws a series of dot along the curve to visualize it. The dots are more tightly clustered towards the end of the curve. Is there any way of changing this? I've tried changing the timeResolution but it doesn't fix this.
  8. GSAP Bezier Curve ViewerI've been working with bezier plugin quite a bit recently and made a tool to help visualize the curves as creating them blind is no fun! At its heart it's just this function, which should work to visualize any tween (uses jQuery): let visualizeTweenMaxBezier = (tween, steps) => { for (let i = 0; i < steps; i++){ tween.progress(i/steps); $("body").append("<div id='point" + i + "'></div>"); $("#point"+i).css({ position: "absolute", width: "2px", height: "2px", "background-color": "#7F7F7F", top: tween.target.cs
  9. 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 movem
  10. Hi! I'm curious if there's a good way to manage changing durations. I don't have code snippet handy atm, but the situation is this: We have a series of animations/scene. There's the intro timeline, the waiting timeline, and the outro timeline. It's a loader scene. The intro and outro are their own var'd new TimeLineMax(), with a series of tweens. These animations have static duration, e.g. the intro takes one second, and the outro takes 2 or whatnot. The waiting timeline is a repeating series of .to()'s saved into a var'd timeline. The total time is variable based on bandwidth and
  11. Hi there, long-time lurker, first-time poster. I have an obnoxiously complex set of dynamic banners (content pulled in through a feed) where there are dozens of different static elements that can be called depending on one of the variables passed into the feed. I'm using TimelineMax to animate them. There are 2 timelines running simultaneously: one with foreground content, and a background animation. The elements being tweened on each timeline are mutually exclusive and the timing doesn't relate. They should both start on load and play independently. The whole thing is MUCH more co
  12. Hi there, I have the following TweenMax sequence: expandedAnimation = function() { var i = 0; var a = 1; var d = 2.25; var t = 0; var o = 4.25; TweenMax.set('#dc_logo', {alpha:a}); TweenMax.set('#videoContent', {alpha:i}); TweenMax.set('#exp_txt1', {alpha:i}); TweenMax.set('#exp_txt2', {alpha:i}); TweenMax.set('#exp_txt3', {alpha:i}); TweenMax.set('#exp_txt4', {alpha:i}); TweenMax.set('#exp_txt5', {alpha:i}); TweenMax.set('#exp_txt6', {alpha:i}); TweenMax.set('#exp_txt2_1', {alpha:i}); TweenMax.set('#exp_txt2_2', {alpha:i}); TweenMax.set('#exp_txt2_3', {alpha:i}); TweenMax.set('#exp_tx
  13. Hi If you've read this thread you know I've been trying to animate SVG masks. From what I gather, this is only possible by manipulating the SVG attributes directly, not with CSS transforms – which makes it easy for things like a circle's radius, but less so for rotation. Here's how I've attempted to do it (you can check the linked codepen): tl.staggerTo(el, 1, { cycle:{attr:function(){ var a = {cx:0, cy: 0}; a.cx = Math.cos((tl.progress() - 0.5) * 2 * Math.Pi) * 20; a.cy = Math.sin((tl.progress() - 0.5) * 2 * Math.Pi) * 20; return a; }}, ease: Linear.easeNone }) The goal i
  14. I'm a little confused about how to return a timeline for later use. I have a number of elements that I am looping through and playing my timeline on, however, I need to return the timeline outside of this loop, so that I can call the .kill() method on it, inside of another function. So my functions looks like this: dtnavs = { runStuff: function(){ dtnavs.cellFloatyTweens(); }, killStuff: function(){ // not sure how to kill the cellFloatTL here? }, cellFloatyTweens: function(){ dtnavs.cell.each(function(){ cell
  15. Hi all - this is my first post on GSAP, hope you guys can help me. Love GSAP by the way, it is awesome. I'm using Reveal EventListeners (https://github.com/hakimel/reveal.js#slide-states) to trigger timeline sequences. These sequences are a combination of staggerFrom and from, and I use DrawSVG with Yoyo sometimes too. I found this example that pretty much matches my setup: http://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js Here is one of the sequences, they all follow the same structure: Reveal.addEventListener('sl
  16. This may be more of a feature request, but I'd like to be able to remove items (TimelineMax.remove()) and insert new items (TimelineMax.add()) by position. So if I have a TimelineMax that contains 5 TimelineLite animations, and I want to update the third TimelineLite assuming a zero index: TimelineMax.removebyposition(2); TimelineMax.addbyposition(myNewTimelineLite,2); Looking at the documentation I can't find a way to do this. I was just wondering if anybody here had any insight in to if this was possible or a planned feature? Thank you! Dan
  17. Guest


    Hi all, This may not look like a gallery at the moment but i problem there is a method to my madness. Just wondering what the best way to make only the div that is being hovered over animate instead of all of them at once. Thanks, Phil
  18. Hi guys, I'm having problems implementing the onCompleteAll function within my TimelineMax animation. My code looks like below var tl = new TimelineMax(); tl .from('.text1',0.5,{opacity:0, y:'+=10'}) .to('.text1',0.5,{opacity:0},'+=3') .from('.text2',0.5,{opacity:0, y:'+=10'}) .staggerFrom('.footer',0.5, {opacity:0, y:'+=10'},0.2, addBirdEvent) function addBirdEvent(){ console.log('footer animations done') } Problems are: The stagger animation runs immediately. I'm expecting it to run after the previous animation ends. The addBirdEvent (which is my onCompleteAll function) also runs
  19. This is just a question about capabilities. I'm animating a site that is using the bezier plugin to move 4 small circles along outside of a single larger circle. I've got the animation working fine, I was just wondering if there was a way to have the plugin recognize the coordinates based on percentages relative to the parent or if this would just be too much of a strain on the browser(i.e. would it just bog the whole deal down because it would have to recalculate the path everytime the browser resized)?
  20. Hi there, Sorry if this is a stupid question. I am trying to pause a function and only start it when an onComplete happens in TimelineMax. The function works perfectly except that when it plays it is off screen because it is firing as soon as the animation starts. <script> var tl = new TimelineMax () tl .from("#txt1", 1, {right:-280, ease:Power2.easeInOut}, "+=4") .from("#counter", 1, {right:-280, ease:Power2.easeInOut, onComplete: startCounter}) .from("#txt2", 1, {right:-280, ease:Power2.easeInOut}) .from("#logo", 1, {top:250, ease:Power2.easeInOut}) .from("#tag", 1, {right:90
  21. Hi there, This could be a weird question but is it possible to onComplete:50%. Ideally I would like to trigger some animations when an animation is 10%, 20%, 30%, 40% complete etc. The below code is wrong but i thought i would post it as a talking point. .from("#animation", 20, {left:990, onComplete50%: stopFunction}) What is the best way to do this? Thanks, Phil
  22. hi there~~ all I want just repeat all. but I havd no idea, how to make all items repeat at same time. gsap2timeline.html
  23. I have try to embed this to my webpage but its can't work with my webpage. always change my ohter li make they Disappear index.html bootstrap.min.css styles.css
  24. AFAIK, the only way to apply an easing function to a timeline is to tween the .progress() of that timeline. It's great that this works but it would be really handy to have direct support to specify an easing function to a timeline. Not sure how involved that feature would be.
  25. I'm trying to build a system from your slider animation example. I'm getting performance problems where onUpdate keeps being called even when the timeline isn't supposed to be running. To see this most clearly, I just took your example and added a display of the timeline's progress. Move the slider anywhere except the leftmost position then let it go. The progress keeps drifting: http://codepen.io/thunderkid/pen/YyPjJW It seems that the timeScale is set to 1e-10 instead of zero. Is there a way around this? Thanks.