Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by cmal

  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();
  13. 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.
  14. 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.
  15. 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.
  16. 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?
  17. @rhernando Fast answer and exactly what I was looking for. You rock.
  18. 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?
  19. 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?
  20. As usual, a great response in record time. Thank you!
  21. I should add the reason why I, or someone else, might want to do this. I have an EnterFrame event set up to animate based on the value in an array. And to make this animation smooth it would be easier to use TweenLite.
  22. Is there a way to tween a value that is not something like x, y, width, or height? As an example: Let's say I have an array: var myArray:Array = new Array; myArray[0] = 5; I want to change the value of myArray[0] over time, let's say from 5 to 10, and I want the values to tween over time just like the Y value could tween in a typical TweenLite example. Is it possible to do this?