erikb

And what is the recommended way of getting transformOrigin ?

(I would like to avoid doing the equivalent of the type of technique described here : http://css-tricks.com/get-value-of-css-rotation-through-javascript/ )

Is there a way to use greensock to query a css transform attribute (e.g. scale) that has been tweened ? For example, on chrome, transforming scale modifies -webkit-transform. I want to pull out the value of 'scale' from that tweened matrix.

Thank you, tl.reversed() ? tl.play() : tl.reverse(); is what I needed. I assumed calling reverse would reverse whichever direction the playhead was currently moving. I think this is a valid assumption, but now I understand the library better.

In this shabby codepen of an example, I can click the button to reverse my animation once. Subsequent clicks have no effect. How do I allow for more reversals while the tween is animating? http://codepen.io/anon/pen/pBory

I figured out what was going on, and regret taking your time. Let me explain what I did in pseudo-code. Hopefully it is helpful to someone else. var myTL = new TimeLineLite( ); myTl.add( TweenLite( $('.something'), 10, { opacity: 0, onComplete: function( ) { myTL.pause(); } }), 0 ); myTl.add( TweenLite( $('.something'), 10, { ​ opacity: 1, onComplete: function( ) { console.log( "do I get called?" ); } }), 10 ); myTl.eventCallback( 'onComplete', function() { console.log( "all done!" ); }); myTl.progress( 1, false ); The pause in the first callback prevented the second callback ("do I get called?") from firing. Confusing me was that the timeline's onComplete ("all done") was called.

Can I call progress to jump to the end of my tweenlite, but fire every callback and complete every embedded tween from where I am to the end? The second parameter to progress is properly calling my tween's onComplete callback, but we are jumping over embedded tween's callbacks and behavior (which play and fire just fine when we are playing normally).

The spans which will be enlarged might not all be next to each other... and the text in a given paragraph's text might be animating to different positions, or changing mid animation. Keeping granularity at the span level is preferred.

Thanks Rodrigo -- It is nice to see an animated version of the demo. But what I am trying to solve is preventing the orange spans from overlapping when transformed. Instead I want to have the orange spans of text to animate to the same position as where the words are when the whole paragraph scales up. Does greensock have code which helps compute those transformations?

I want to make some spans in a paragraph scale up the same way the parent div would scale up. Here is a demo showing the naive implementation -- notice all of the enlarged words jumble together: http://jsbin.com/yamatuke/1 Before I dive into the css to accomplish this, I thought that perhaps greensock's libraries already handle this?

Thanks jonathon! Looks like there is a related thread here regarding animating pseudo-elements: http://forums.greensock.com/topic/6133-is-it-possible-to-tween-css-pseudo-elements-like-after/ And an example here: http://codepen.io/jamiejefferson/pen/ibHAt Hopefully I can cook something up.

Thanks for the example Rodrigo. However, I was hoping to change the selection color of an input, not the background color. In my browsers, the default input selection color is light blue. Any ideas if that attribute is tweenable?

This seems to work... anything wrong with this approach? myTween.seek( '-=0', false );

Is there a shorthand to jump to the end of a timelinelite instance (and fire all of its onComplete listeners)? The best I can think to do is do the math noting that starts and the full durations of the timelinelite's timelines and seek to that time. But I imagine there is an easier way.

Can I use greensock tools to animate the rgba of the 'selected text' color in an input field?

Thanks for your thoughtful response. I was just fiddling around with your examples and came across the glitch. Should I need to implement this behavior, I will be sure to use this updated version (or look to see if this fix has landed on your github repo).

I have some underlined text I am splittexting and then staggering. The blankspaces with underlines are just sitting still. Can I tokenize them too?

http://codepen.io/anon/pen/qlspD When I run this fork, it often misses the last period in the sentences. Sometimes it misses a few of the last characters. What's going on here?

yoyo -- cool. That'll do. Thanks. This was helpful too: http://forums.greensock.com/topic/2144-tweenlite-yoyo/

I want to animate many divs 'jumping' and landing back at their origin. I would like it to look smooth, preferable using one easing function (graceful jump up, hang... and graceful landing). A few ways I have thought to do this: 1. Make a timeline, and put two tweens in it. However, because there will be two easing functions, this might look odd. 2. Tween to the jumping-to position, then reverse back. Same problem applies here. Also, I am not sure how to succinctly write 'only jump once'. Is there a better way?

With tweenlite, can I change the destination values of an existing tween?

For example, see this problem reported on iOS devices: http://stackoverflow.com/questions/17824060/ios-safari-runs-out-of-memory-with-webkit-transform

http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/#comment-1112648601 > The GPU bottleneck is a reality on heavyload animations. I think it would be helpful to explore this claim in more detail so as to help developers understand which tools make sense in which scenarios.

In a project, I have only one tweenlite instance tweening at one time. Each time, the tweenlite instance is tweening different values. The instance is assigned to a class variable. Currently, I instantiate a new Tweenlite instance every time, assigning it to that one instance every time. I am wondering if it would be better to 'gut' the existing tweenlite instance and reuse it? Is there a best practice for doing this? I looked at kill(), but am not sure where to go from there.

Option 1 works great. Thanks for the suggestions.