iliketoplay

Hi, there are some concepts you should look into: First one is repaint/reflow of the document. You are trying to read scrollHeight etc. like variables, but this is super slow - so only do this when needed (move logic like this into a resize function) Second one is "gsap.set" vs "gsap.to" and overwriting tweens. There is a lot in the docs about that. Good luck

Hi, have a look at the transform-origin (css) property. If you set this to "0 100%" it will scale upwards. You can also do this simple animation with css only.

Hi, can you describe how this is slow? Is the animation slow (performing) or is there a delay before the animation starts? You could optimize a little by doing this: middBttn0.addEventListener("mouseover", midNavHover); middBttn0.addEventListener("mouseout", midNavOut); function midNavHover(e) { console.log('hover'); TweenMax.to( middBttn0, 0.5, { backgroundColor:"#9fc73a" }); } function midNavOut(e) { console.log('hout'); TweenMax.to( middBttn0, 3, { backgroundColor:"#e6e6e6"}); }

Thanks for the feedback I can't turn the additive animations off on the site. But I made this pen a short while ago. I based much of my code on your examples (thanks a lot for those). I did some modifications, but the concept is the same. The only thing making this hard to duplicate for other projects, is the hardcoded parameters (x, y, scale) - it would be nice to have all parameters excepted and even some parameters without the additive approach. But that's a nice weekend project when I have the time!

Hi, I don't mean to spam the forum, but I recently finished a project where I implemented an additive animation approach. It was a bit difficult, but really worth the effort. Thanks to OSUblake (and the rest of you in this thread) for creating some great examples to learn from. This is the site: http://www.beoplay.com/landingpages/portraits Try scrolling quickly and you will see the background image animations (zoom and pan) blend into each other, instead of overwriting (which would be normal behaviour).

Hi, actually your example is just what I mean. You either use additive or not - you can't mix it. It's not that pretty I know, but it's one way to go But it would be nicer to have it baked in of course.

Hi Jack. Thanks for joining in and for considering this in GSAP Personally I rarely need any other overwrites than the default in TweenLite. In terms of performance, wouldn't it be an idea to consider forcing overwrite:"add" for properties that should be capable of overwriting in the future - I think that's a fair price to pay for the feature? So you can never start a tween without that overwrite mode and later overwrite with "add", you will need that overwrite mode from the very first tween. In that way you can completely separate the calculation methods, so you don't damage overall performance of the engine. Just an idea. As for file size, if this could work as a plugin, it would be completely optional to load. But I guess that's hard with something that taps into the heart of the engine? Thanks to all of you for exploring this and sharing your thoughts. Some great new knowledge here

Fantastic amount of work you put into this - thanks a lot. And I agree it's a game changer - I think many others will too when they start understanding the concept. Great demo In my opinion (and I have been using GSAP since the Flash days) this feature is just as important as staggers, timeline and textplugin. So fingers crossed that it will make it into a future release

Here's the video I think: https://developer.apple.com/videos/play/wwdc2014-236/

Thanks, I know (been using GSAP for years) the code was real quick and dirty. But thank for the heads up

Great work Thanks for sharing this. Seems like you're on to something with this solution. However, have you notices the easing - doesn't look like an easeOut? Also, I'm aware of various ways we can achieve this, you can also adjust the tween time depending on the distance to the target to have more realistic effects. But ultimately I'm requesting this as a built-in feature.

Thanks. I might get close to something looking good with that But ultimately I'm requesting this to be built into GSAP, just like delays, staggers, timeline etc. I think it's an important feature and many other platforms are integrating it (like some of the React animation tools).

Also the Bezier approach has small problem in my opinion: - If you tween a value from 0-500, then halfway in tween it to 300 instead - the object will move too far and go back a little. You can try this in your demo too. The ideal situation would be to slow down instead - I think I made a small demo here: http://codepen.io/iltp/pen/yYbNbJ I'm not sure what's the best and most realistic looking effect would be. Slowing down would maybe be too drastic - but on the other hand this bezier seems too "effective".

Yes, these cannot blend any animations, they simply stop current (or future) tweens.

That's actually a really nice idea. Not super easy to use though, but it does the job However you need to manually do this for all tweening properties - it would be nice to have this automated.