Clemorphy

Still happening occasionally. It's less noticeable with this code, because it's happening less often. This code starts only 1 Tween for all the bars, while previous code starts 1 Tween per bar. Less Tween = less probability to appear.

Yeah, replacing repeat: -1 with "calling again on onComplete" fixed the issue. I still don't understand why I was having this little issue with repeat ?‍♂️ Thanx again @Rodrigo

Thanx @Rodrigo First, your codepen doesn't have the issue I was having. So it's a good thing ? Basically, you're replacing the repeat functionnality with calling the function again with onComplete. I tried earlier to create a function, not exactly like you did, but I was still using repeat : -1, and it didn't fix my problem. So I'm gonna try to recreate the function the way I did, and not use repeat but use onComplete instead. That should work. And if it doesn't, I'll just use your version as is ?

@mvaneijgen by "jumping" I mean that, sometimes (not systematically), a bar is instantly set to a random height before starting his Tween to his To target value. I just tried animating scaleY instead of height, but sadly the same issue occurs. Plus scaling the divs is stretching the border-radius I have on top of the "bars". Here is the codepen using scaleY : https://codepen.io/clemorphy/pen/xxJPKRN

Hi In my codepen example, when mouse enters the red area, I start 5 tweens, one on each grey bar in the green area. When mouse leaves the red area, I kill all the tweens. Each bar is supposed to grow/shrink to a random value (height css prop), and then when it's finished, repeat this to another random value. It is working almost correctly. The only thing that bothers me is, when you leave the mouse in for a few iterations, sometimes a tween will randomly change his From value before going to his To value. This is making some of the bars randomly "jumping". I am using repeatRefresh: true, and from what I understand, it is supposed to force the next loop using current values as From values. So why are some of these animations still "jumping"? I also tried to use immediateRender: true and overwrite: true, but it changed nothing. Any idea?

Hi I am just not sure if x and y properties are supposed to be relative to transformOrigin. Let's say I have a simple div, width 200px, height 200px. If I am right, by default, transformOrigin is set to "50% 50% 0". So if I rotate my div, the rotation is relative to its center. Fine. But if I set x and y properties of my div (with TweenMax.set()), the position is always relative to its top left corner, and not to its transformOrigin. 1) is it the expected behaviour ? 2) if yes, is there a way to change the origin point for x and y properties ? Without having to set margin-left : -100px and margin-top : -100px Thanx.

Actually I want to handle the mechanics of an online game directly on the server. And in order to change enemies positions, I need to tween some values server-side. Enemies have a path (chaining tweens), and they can slow down or accelerate on this path. So TimelineLite would be really appropriate for this. But for now I don't know how to deal with TweenMax.js file. In node.js you can't simply include a JS file. There is a "require" method but it only works with modules, which are built in a specific way, with some exported functions and vars (http://nodejs.org/api/modules.html) There are some modules related to tweening (https://nodejsmodules.org/tags/tween), but none of them seem to include the same functionalities as TimelineLite.

Hi ! I'd like to know if anyone has already used TweenLite or TimelineLite server-side with Node.js. If not, is there a way to do so ? A GSAP NPM module would be something great. Thx