jniac

It seems that we cannot animate the "r" attribute of the circle, or i'm doing something wrong. Ok. It seems that, by default, you can only tween attribute that make sense for the CSS (element.style, eg:"fill"). However native attributes of svg element could be animated using the attr{ } syntax. http://codepen.io/jniac/pen/PzQZgP

here's the full website : http://www.jugglechallenge.com/challenge Is there any way / chance to figure among your showcase ? Should I apply somewhere ?

Interesting stuff. The spring ease is quite impressive ! i'll keep an eye on it. I was, and i'm still, a flash developper. To be honest, not really a flash developper, because it was not my job, i was designing and prototyping flash website for the advertising industry some years ago. But, even if i wasn't full time programming, i always liked to play with shapes, colors with code. Needless to say that i quickly adopted TweenMax. More than an useful tween framework, Greensock was a inspiring way of thinking. What is an animation ? What i would like to do with ? The great range of parameters and options was and is still a good base to try defining a interactive animation. A f***ing interactive animation which could ever be paused, reversed, canceled at any time. Far more complex than at first sight. Once the core class (com.greensock.core.)Animation inspired me a strong class for handling navigation through an app (nested timeline with self progression ratio etc.). These days i finally achieve to produce my first WebGL / ThreeJS / GSAP experience. The final website is not online (but will be soon). The delay was quite short and i had all to learn (canvas, SVG, css, prototype...). I got a fright last night: no more time to understand how to change CSS / SVG attributes dynamically, well, finally i referred entirely on TweenMax reporting to another day test and learning. This is the standalone experience, all the tweens are made with GSAP: http://hipoly.fr/tmp/wms/hexasphere/ Thanks guys to help reconverting myself from AS3 to Javascript!

Interesting stuff. The spring ease is quite impressive ! i'll keep an eye on it. I was, and i'm still, a flash developper. To be honest, not really a flash developper, because it was not my job, i was designing and prototyping flash website for the advertising industry some years ago. But, even if i wasn't full time programming, i always liked to play with shapes, colors with code. Needless to say that i quickly adopted TweenMax. More than an useful tween framework, Greensock was a inspiring way of thinking. What is an animation ? What i would like to do with ? The great range of parameters and options was and is still a good base to try defining a interactive animation. A f***ing interactive animation which could ever be paused, reversed, canceled at any time. Far more complex than at first sight. Once the core class (com.greensock.core.)Animation inspired me a strong class for handling navigation through an app (nested timeline with self progression ratio etc.). These days i finally achieve to produce my first WebGL / ThreeJS / GSAP experience. The final website is not online (but will be soon). The delay was quite short and i had all to learn (canvas, SVG, css, prototype...). I got a fright last night: no more time to understand how to change CSS / SVG attributes dynamically, well, finally i referred entirely on TweenMax reporting to another day test and learning. This is the standalone experience, all the tweens are made with GSAP: http://hipoly.fr/tmp/wms/hexasphere/ Thanks guys to help reconverting myself from AS3 to Javascript!

You may have not understood the question, but you managed to provide the answer ! staggerTo was the keyword, thanks for that

Of course a for loop do the job... var objs = [...]; var values = [...]; for (var i = 0; i < objs.length; i++) TweenMax.to(objs[i], d, { myValue:values[i] }); But we have to declare two arrays first, a single line would be more elegant!

This had to be discussed but i can't find a topic about it. Is there a way to do something like : var obj1 = { myValue:random }; var obj2 = { myValue:random }; ... TweenMax.to([obj1, obj2, ...], d, { myValue:[value1, value2, ...] }); when at the end : obj1.myValue // value1 obj2.myValue // value2 ... ?

And he told me something !!! It was... well... i can't even remember ! But that must be brilliant, i should take some notes, if only... but believe me ! He was right there, in this topic. Maybe a little seriously, have anyone tried to work on speed rather than position ? A tween on derivative and not on value. After Effects, once again let you do this. And sometimes it's useful. But it's usefull with a graph, maybe not with a script. Eg, doing a tween by defining a uniform acceleration... hm... in a way... let me think about it again.

I'm quite a noob with a lot of things, i'm used to develop in my own neck of the wood (which is a bad habit), so i'm a noob with english, with community rule and habits. So i just notice that 'Jack' should probably be the 'Jack', founder of TweenMax ! Thus your announcement of exciting plans just boggles in my mind. I suppose there are no news about what / when / what for this is about ? For my part, if i was brave enough i would develop a TimeLine Visualizer that will allow to offset tween, edit ease and so on... Am i quite close to thoses secrets things you're developing ? Anyway, all the best to your adventure.

@OSUBlake You're right Cubic-Bezier is a great way to get asymmetric curves ! I totally forgot that solution. Thank you for reminding me.

Well with your secret plans you tease me ! May be i wasn't clear enough. It wasn't a question a power, it was a question of... well... of asymmetric easeInOut curve. In a transition, the way of PowerN.easeInOut performs, you always have the same time of acceleration and deceleration. Sometimes it's better when it's not the case. In After Effects a good motion designer, working on speed graph, would always give more acceleration than deceleration because the animation will looks generally more dynamic this way, like a dancer which gives strong impulse and then soft cushioning. So my purpose was about a formula that will offer this opportunity to change the InOut ratio (and not the power ratio, which is also the case but not the main trick). I've been testing performance in CodePen, it seems that FineEase has about the same performance than Power3.easeInOut.getRatio (sometimes x1.3 slower, sometimes x0.7 faster). http://codepen.io/jniac/pen/aNeKaz?editors=1010

I think it could be a great feature to allow fine ease function which could be less optimized but will enable some transition that are actually hard to perform. Well, i'll give an example : Quite often i feel the need of a transition with a short and strong acceleration followed by a long and smooth deceleration. Power[0,1,2,3,4] currently only let me choose similar acceleration and deceleration (PowerN.easeInOut). Why not embed a function that permit custom InOut ratio ? (cf codepen) This function could be something as following : function FineEase(i, p) { // i: inflection // p: power // x: value return function(x) { return x < 0 ? 0 : x > 1 ? 1 : x < i ? 1 / Math.pow(i, p - 1) * Math.pow(x, p) : 1 - 1 / Math.pow(1 - i, p - 1) * Math.pow(1 - x, p); }; } Gimme your feedbacks !

You might have been stupid, i'm at least as stupid as you were. So i'm glad you posted your problem (and resolve it), cause it was mine too. thanks