Simple animate with code


#1

Forgive me if this seems simple. I want to animate an elements x+y position or alpha using a button and javascript and not the timeline.

For example, on click move element x position to 300px.

Have attached a template file if anyone can let me know that would be great!
Thanks!codeanim.hype.zip (21.0 KB)


#2

The new Get / Set APIs should make short work of this task…

hypeDocument.setElementProperty(element, propertyName, value, optionalDuration, optionalTimingFunctionName)

The “element” is the ID of the element, or it can be a dynamic event – such as the element that was clicked.

The “propertyName” here would be “left” for “x” and “top” for “y”. “opacity” can also be used as a property.

The API Documentation has more information.


#3

Thanks Michael…

I tried adding this script to my button but it did nothing… not exactly sure how to simple implement this.

hypeDocument.setElementProperty(b1, left, 200, optionalDuration, optionalTimingFunctionName)

Thanks for your time.


#4

Well, you didn’t set an “optionalDuration” or “optionalTimingFunctionName”

If you don’t want to set them, then remove them. Otherwise…

“optionalDuration” is the number of seconds, such as “1”.
“optionalTimingFunctionName” is the transition type, such as “linear” or “easeinout”

The documentation is available at the bottom of a JavaScript window.


#5

Not sure what Im doing wrong… have added the below and it does not work.

hypeDocument.setElementProperty('b1', 'left', '200', '1', 'linear')

#6

No problem, have figured it out… my last question is, can I animate multiple properties for an element…
So if I wanted to animate the left, top and alpha. Can this be done?


#7

no worries again, you were right… its super simple :slight_smile: Thanks.