setElementProperty animation problem: tween not working?

Using JavaScript with Hype
1

Hi folks

I am trying to make a big image animate (larger than the stage) to different positions. I have the ‘left’ and ‘top’ positions in an array of objects and a button that activates a javascript function that moves the image with the setElementProperty.

The first time the button is clicked it works fine: the image animates fine with the nice easing effect. The second time the button is clicked (and the next positions in the object array are called to the ‘moveImage’ function the animation stops working. After the specified time for the animation the image simply insta jumps to the new position. The easing animation is gone. (unless you press the button before the it reaches its destination: then it will animate to the next postion in the array just fine).

Is this a known issue? Is it because the image is bigger than the stage?

Here is my source file. The objects and array is in the head html and the setElementProperty is in the script called moveImage

Hype-animation-problem.zip (1.5 MB)

2

Took me a minute to spot that.

You have the numbers as text/strings.

They need to be numbers. i.e -128 not “-128”

Also try not to call an element by it’s id directly. Use the getElementById()

This way you now you are returning an element and not something else that may have the same var name.

2 Likes
3

Oh boy! Thanks! It really confused me that the first click works, but it does make perfect sense that the numbers should not be strings. Thanks for the help :slight_smile:

1 Like