Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

9 Newbie

About cmal

  • Rank

Recent Profile Visitors

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

  1. For what its worth… When I was first trying things out, I thought that maybe what I was looking for was actually supported but undocumented, so the first thing I did was try both of the following: snap({value: 500, radius: 100}); snap({values: 500, radius: 100}); That being said, if I was coming in totally fresh I'm not sure I'd look at snap({value: 500, radius: 100}) and assume that meant that it would snap to any increment of 500 – I'd probably assume it meant that it would only snap to a value of 500 and only if it was within 100 of it (400 – 600). I think this is probably a much bigger API change and therefore rules it out, but this was the most intuitive syntax to me when I was first thinking about this: snap(500, { radius: 100}); It looks similar to the default usage of the function, which uses incrementing values, so it is familiar in that regard, and it treats the radius as an option that you just mix into the function. I think for that to work you'd have to significantly change the API so that the first parameter could alternatively be an array, which would make the function consistent when used with either single incrementing values or an array of values. But that's a pretty big change.
  2. While snap is obviously a lot shorter, I don't think it communicates that the value repeats as clearly as increment. And on a much more subjective level, seeing the word snap twice that close to each other in the same function feels weird.
  3. Been getting a lot of use out the new GSAP utils and I love them. I did run into a use-case with the snap() util that doesn't seem to be covered, and it seems like something that would be broadly useful. So consider this a feature request. I'd like the ability to use the radius parameter without needing to provide an array of values. For instance: gsap.utils.snap({ value: 500, radius: 100}, x); For examples of expected behavior: If x is 400, it would snap to the closest increment of 500, which is 500 If x is 300, it wouldn't snap to any value, because it isn't within the radius (100) of any increment of 500 If x is 950, it would snap to the closest increment of 500, which is 1000 Perhaps this was omitted for performance reasons or something similar, but this is how I'd most likely use the radius property the majority of the time if it was an option. Thanks!
  4. cmal

    DrawSVG with webpack

    Actually, appears I was able to resolve this just by importing DrawSVGPlugin.js from the commonjs-flat directory instead of uncompressed.
  5. cmal

    DrawSVG with webpack

    Same issue here. Using npm for all non-Club Greensock imports.
  6. http://codepen.io/anon/pen/bjKED
  7. 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?
  8. cmal

    Return to original value

    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?
  9. 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 } )
  10. 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();
  11. 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.
  12. 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.