Jump to content


  • Posts

  • Joined

  • Last visited


0 Newbie
  1. Is it possible to delay the start of animation when the .play() method is invoked? E.g. I have an animation that is paused: tlAnim = new TimelineMax({paused:true}); tlAnim .from($intro, 0.5, {css:{scale: 0}, ease: Power2.easeOut}) .from($img, 1.5, {opacity: 0, rotation: -180, ease: Power4.easeOut}); At a later part, when .play() is called, I don't want the animation to start right away. Maybe there's a .50 seconds delay before it starts. Do I add something to the .play() method? Or do I indicate it inside the tlAnim timeline?
  2. I have some triangle SVG shapes that change color when I click a button. Currently, there are three color combo states: default, color 1, and color 2. Then two buttons button 1 (for color 1) and button 2 (for color 2). However, whenever I click button 1 (this is for color 1) right after clicking button 2, the triangles always revert to the default colors first before morphing into the new colors. What I'd like to happen is for it to morph from button 2 / color 2 state (if ever I'm coming from this state). The animation transition is more consistent and smoother this way. Not sure what's the issue. I have attached a codepen to demo the issue. Thanks.
  3. I have 3 buttons that trigger an animation each. When you click any of the buttons, the previous animation will be reversed while it plays the next animation. However, I'd like to make it so that the reverse animation executes first before starting the next one. Currently, the two animations overlap. How do I solve this issue? Thanks!
  4. I have, say, 3 buttons that will trigger an animation each. However, when I click one button, I'd like to reverse the last played animation before starting the new animation. I can manually declare all the timelines and reverse it but it isn't practical and I'm sure there's an easier way to just select the last played animation. Not sure if this is Greensock related or solely a jQuery problem. I'd appreciate any help. I provided a codepen demo. Thanks!
  5. I am trying to make an arrow flip horizontally using SVGMorph... however, it doesn't look like it's flipping. I tried changing the ShapeIndex but there's none that will make the flip look natural. Codepen: http://codepen.io/anon/pen/dGbOLZ Is there a better technique to do an SVG flip that will work on all browsers?