Width animation based on a variable

Animation
1

I would like to animate a box growing from 0 to a variable (stored in hypeDocument.customData.maxWidth = maxWidth. Is that possible?

Ideally I would do it in the timeline. However, will use JavaScript if that's the only way.

I have JavaScript that creates the animation, but at the end of the animation the box reverts to the starting width, which isn't what I want.

// Animate the width of the rectangle
var startWidth = 0;  
var endWidth = maxWidth;  
var duration = 1000; 
var stepTime = 10;  
var widthIncrement = (endWidth - startWidth) / (duration / stepTime);
var currentWidth = startWidth;
var animationInterval = setInterval(function() {
    currentWidth += widthIncrement;
    if (currentWidth >= endWidth) {
        currentWidth = endWidth;
        clearInterval(animationInterval);  
    }
    targetElement.style.width = currentWidth + "px";
}, stepTime);
2

Just theoretical, but perhaps using CSS animations would be better. Then, just change the width from zero to 100% viewport width. :man_shrugging:t2:

3

Both JS and timeline based should be possible but probably the time line way would still require some us actions.
Not at Mac at moment but will have. Look when I get back

4

You're the code above, it works as expected. ( with the added missing vars )

var targetElement = hypeDocument.getElementById('target')
var startWidth = hypeDocument.getElementProperty(targetElement, 'width')
var maxWidth =  500
	// Animate the width of the rectangle
var startWidth = 0;  
var endWidth = maxWidth;  
var duration = 1000; 
var stepTime = 10;  
var widthIncrement = (endWidth - startWidth) / (duration / stepTime);
var currentWidth = startWidth;
var animationInterval = setInterval(function() {
    currentWidth += widthIncrement;
    if (currentWidth >= endWidth) {
        currentWidth = endWidth;
        clearInterval(animationInterval);  
    }
    //targetElement.style.width = currentWidth + "px";
    hypeDocument.setElementProperty(targetElement, 'width',currentWidth)
}, stepTime);

Is it possible that you have something else going on that reverts it.

Also you could simply do this in the code which pretty much does what the above is doing.

// Animate the width of the rectangle
var targetElement = hypeDocument.getElementById('target')

var startWidth = hypeDocument.getElementProperty(targetElement, 'width')// or set to a number

var maxWidth =  500
var duration = 1.0; 
 
hypeDocument.setElementProperty(targetElement, 'width', maxWidth, duration)
1 Like
5

Thank you. I'll do some more exploring this evening (I'm US, Eastern). I appreciate the simplified code. Currently there is no easing, but I'll figure that out later.

I'd love to have everything on the timeline, even with JavaScript in the background, because I have a sequence of other animations that are part of the overall, but more straightforward.

6

I'm curious why you're using a custom animation script when you could utilize the 'setElementProperty' function for animation. Have you considered simply adding the time parameter as specified in the API documentation? Is there a specific reason you're opting for a custom interval-based approach?

1 Like
7

No, there was no reason. Thanks for pointing out the better way. Is this what you meant?

var targetElement = hypeDocument.getElementById('rectangle');
var duration = 2.0;
hypeDocument.setElementProperty(targetElement, 'width', maxWidth, duration, 'easeInOutQuart');

2 Likes
8

Note that 'easeInOutQuart' is unfortunately not a valid timing function name; please see the documentation that there's only 4 named functions:

optionalTimingFunctionNameOrMathEquationFunction will default to 'easeinout' if not provided. Valid timing function names (quotes required):

'easeinout'
'easein'
'easeout'
'linear'

A function with this structure can also be used:

function (t, start, dur) { /* return percent complete */ }