Jump to content


  • Posts

  • Joined

  • Last visited

About cmal

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

cmal's Achievements


Newbie (1/14)



  1. Actually, appears I was able to resolve this just by importing DrawSVGPlugin.js from the commonjs-flat directory instead of uncompressed.
  2. Same issue here. Using npm for all non-Club Greensock imports.
  3. http://codepen.io/anon/pen/bjKED
  4. I feel like I'm still not really getting how to accomplish the timing I'm after with labels and offsets. Take the following example: new TimelineLite() .to(myElement, 6, { x: 200 }); .addlabel('otherStuff+=3') .to(anotherElement, 3, {rotation: 360}, 'otherStuff') .to(myElement, 3, {y: 60}, 'otherStuff') .to(thirdElement, 3, {rotation: -360}, 'otherStuff') Here's what I would expect to happen here: myElement changes x position for 6 seconds 3 seconds pass The remaining 3 tweens all happen at the same time (coinciding with the location of the 'otherStuff' label) But this isn't what happens. How can I accomplish something like this?
  5. I'm not opposed to storing the original value on the element, but I think where that could become cumbersome is if I'm using something like staggerTo() to tween lots of different paths at once. In that case, is there a way I can grab that .originalValue off of each path as I'm staggering through it?
  6. After performing a bunch of different tweens on an element, is there a shortcut to tween back to the original value? Here's an example… var myPath = document.getElementsByTagName('path')[0] var strokeLength = path.getTotalLength(); myPath.style.strokeDashArray = strokeLength; myPath.style.strokeDashOffset = strokeLength; var tl = new TimelineLite .to(myPath.style, 1, { strokeDashoffset: 0 } ) .to(myPath.style, 1, { // Ideally, I could return to the pre-tweened value here // without needing to look it up again (or store it in some other way) strokeDashoffset: X } )
  7. To keep things well organized, I'm constructing a TimelineLite that is build from other timelines and combining them using `add`. However, using tl.timeScale = 2 doesn't seem to have any effect on the parent timeline. Is this because timeScale doesn't actually affect all levels of the nested timelines? Example Code: var tl = new TimelineLite( { paused: true } ); tl. timeScale = 2; tl.add(new TimelineLite().to(…).to(…)); tl.add(new TimelineLite().to(…).to(…)); tl.play();
  8. cmal

    Tween to original CSS

    Saracen, you're right, that should work. If anybody else knows of a way to get TweenLite/TimelineLite to tween back to an elements original state (prior to any tweens being performed) without using "from" please let me know, as I would still have a lot of use for that.
  9. cmal

    Tween to original CSS

    Actually, looks like I misread your comment. But I tried your idea and staggerFrom doesn't seem to work. As far as the staggerFrom is concerned, the current values are the result of the first staggerTo, not their original values as set by the CSS.
  10. cmal

    Tween to original CSS

    Hi Saracen, two reasons: As you can see from the CSS I included, each of the elements has a unique opacity set in the CSS. staggerTo tweens each element to the same opacity, so this won't work. It'd be nice to keep these values in the CSS with the rest of my styling for these elements.
  11. Is it possible to tell TweenLite to tween a CSS property to its original value? For instance, let's say I have the following CSS: .box-1 { opacity: 0.8; } .box-2 { opacity: 0.6; } And then I apply the following TimelineLite animation: tl = new TimelineLite(); tl.staggerTo(['.box-1, .box-2', 1, {opacity: 0}, 0.5) .staggerTo(['.box-1, .box-2', 1, {opacity: ???}, 0.5) I want to restore each of these elements to its originally set opacity, but still be able to use staggerTo and keep the value in the CSS. Any shortcuts here?
  12. @rhernando Fast answer and exactly what I was looking for. You rock.
  13. I have the following TimelineLite animation: tl .add(TweenLite.to(el, 0.1, {scale: 3.0})); .add(TweenLite.to(el, 0.3, {scale: 1.0, ease: Power2.easeInOut})); As you can see, the animation ends by returning the scale to its original value. The problem is that the "scale" is still being set in the inline "style" in the HTML, and this is interfering with a CSS :hover state I have set. So the question is: is there a way to have TweenLite intelligently remove any inline styles if the end value is equal to the original value? And if not, is there a good workaround for accomplishing the same thing?
  14. Took a look at endArray plugin, very nice. Is there a way to use it to tween values at specific slots in an array (like myArray[3]), rather than tweening every value in the array at once?