Extend Tumult Hype with JavaScript: hypeDocument.extensions

Extension Project
17

↑ extension index

hypeDocument.setElementProperties

Sets multiple properties in one go (with the optional possibility to animate them)

20180412-dj7ka

/**
* setElementProperties v1.1
* @param {Element} target to be animated
* @param {Object} object with properties to be animated
* @param {Number} time in seconds for no animation (optional)
* @param {String} easing function (optional)
*/  
hypeDocument.setElementProperties = function ( target, obj, duration, ease) {
    for (var prop in obj) {
        var val = (typeof(obj[prop]) == 'string') ? this.getElementProperty(target, prop) + parseInt(obj[prop]) : parseInt(obj[prop]);
        this.setElementProperty(target, prop, val , duration, ease);
    }
}

Usage:
Given we have element in scene with the id “circle” we can animate it.

var target = hypeDocument.getElementById('someId');
hypeDocument.setElementProperties( target , {top:500, left:267, rotateZ:180}, 1, 'easeinout');

Given we have element in scene with the id “slider” we can slide it relativ to it’s position

var target = hypeDocument.getElementById('slider');
hypeDocument.setElementProperties( target , { left:"-500"}, 1, 'easeinout');

setElementProperties.hype.zip (55,7 KB)

Updates:
1.0 Initial release with multiple property animation
1.1 Added relativ motion if value is String

2 Likes