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

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. @Thomas Günther Thank you so much! That is exactly the solution I was looking for and works great. Really saved me some digging!
  2. I found a Codepen created by Greensock that exactly matches the behavior I'm looking for on a project, using Flip with onEnter and onLeave to filter items very smoothly. The only problem is that any DOM content that follows the parent of the Flipping elements will be incorrectly positioned during the Flip, which causes some unsightly overlap. I'm not exactly sure how to remedy this, or even if it can be remedied using this approach. Any suggestions? Here is a Codepen demonstrating the issue. The only change made to the original Codepen example is the addition of a sibling container to demonstrate the overlap clearly. Thank you!
  3. 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.
  4. 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.
  5. 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!
  6. Actually, appears I was able to resolve this just by importing DrawSVGPlugin.js from the commonjs-flat directory instead of uncompressed.
  7. Same issue here. Using npm for all non-Club Greensock imports.
  8. http://codepen.io/anon/pen/bjKED
  9. 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?
  10. 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?
  11. 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 } )
  12. 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();