Animation challenge shrinking variable-size rectangle on my timeline

Animation
1

Hi all,

My animation works almost as intended (this is an animation I'm attempting to replicate from an OBS extension).

The scene works as intended on entry. At the end of the timeline I call a JavaScript function, via a timeline action, to reverse the animation after a delay specified on the URL, or a default.

The timeline reverses as intended. The rectangle, however, which was custom animated via hype functions on entry (and works perfectly) has an odd pause in the middle of the animation on exit.

Here's that exit animation:

window.setTimeout(function() {
    
    // Reverse the rectangle's animation
    var targetElement = hypeDocument.getElementById('rectangle');
    var duration = 2.5; 

    // Continue the main timeline in reverse
    hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse, false);

    hypeDocument.setElementProperty(targetElement,'width', 0, duration, 'easeInOut');

}, pause);

As a debugging step, I commented out the hypeDocument.continueTimelineNamed statement. With that removed, the rectangle exited as expected with no animation delays. It seem like there is an interaction issue between the two simultaneous animations, but that is just a guess.

Here is the whole project file. You have to run it in a browser to see it work, because the box animation isn't on the timeline.

Lower Thirds.hype.zip (95.5 KB)

Thank you in advance for any suggestions.

2

¡Ola!
I find the commenting out aspect of the timeline interesting. Don't have time to dig in to that - but as a quickie fix - matching the two durations in the exitFunction() works for me.

// Extract the pause time from the URL or default to 15 seconds
    var pause = getURLParameter('pause', 2.0) * 1000; // Convert to milliseconds

// Reverse the rectangle's animation
    var targetElement = hypeDocument.getElementById('rectangle');
    var duration = 2.0;
1 Like
3

Sorry, I was playing around with it when you responded. This worked for me, separating the wait out from the resumption of both animations.

This is one of those I-don't-get-why-it-works moments. Thank you for your time and effort.


    // Extract pause time from URL or default to 15000ms
    var pauseTime = parseInt(getURLParameter('pause')) * 1000 || 15000;

    // Set a timeout to call the animation function after the specified pause time
    window.setTimeout(function() {
        animateAfterPause(hypeDocument);
    }, pauseTime);
}

function animateAfterPause(hypeDocument) {
    // Reverse the rectangle's animation
    var targetElement = hypeDocument.getElementById('rectangle');
    var duration = 2.5;
    hypeDocument.setElementProperty(targetElement, 'width', 0, duration, 'easeInOut');

    // Continue the main timeline in reverse
    hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse, false);
2 Likes