Jump to content
Search Community

Clemorphy

Members

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by Clemorphy

    Tween strangely changing his From value before going to his To value

    in GSAP

    Posted

    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 😁

    Tween strangely changing his From value before going to his To value

    in GSAP

    Posted

    @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 : 

    See the Pen xxJPKRN by clemorphy (@clemorphy) on CodePen

    Tween strangely changing his From value before going to his To value

    in GSAP

    Posted

    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?

    See the Pen GRBMaYE by clemorphy (@clemorphy) on CodePen

    X and Y relative to transformOrigin

    in GSAP

    Posted

    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.

    Using TweenLite / TimelineLite server-side with node.js

    in GSAP

    Posted

    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.

×
×
  • Create New...