Playing another animation on the page only when another has finished

Using JavaScript with Hype
1

I have a page containing multiple Hype animations that are currently played when they come into view (using Waypoints.js). It’s like a flowchart.

My issue is that I need all the animations (except the first) to play only when the one previous has finished.

I thought this might work:

• On Scene Load has Pause Timeline along with Run JavaScript set to a function called waypoint()
• Timeline action on the final frame sets a class called .playable on the next animation
• The next animation checks the existence of .playable inside the waypoint() function before playing

Code below, on the last frame of the animations:

function setNextAnimationPlayable(hypeDocument, element, event) {
	
    $('#anim2').addClass('playable');
	
}

Code below, on On Scene Load:

function waypoint(hypeDocument, element, event) {
	
	if($('#anim2').hasClass('playable')){

	    $('#anim2').waypoint (function(){
		    hypeDocument.continueTimelineNamed('Main Timeline');
	    }, { offset: 'bottom-in-view', group: 'default' });
	
    }

}

Am I missing something really obvious? The class ‘.playable’ gets set without issue but the other animations fail to play.

Thanks!

2

can you post a project with your setup

3

I think your conditional for On Scene Load is inverted from how you want. If you’re adding the Hype documents onto your .html page via simple copy/paste of the div, then your on scene load for all documents will be called immediately when the page loads. Thus the class of playable will not have been added because your preceding animation hasn’t been run.

Instead you’d want it to always trigger the waypoint, but only run the continueTimelineNamed if it has the class.

function waypoint(hypeDocument, element, event) {

    $('#anim2').waypoint (function(){
        if($('#anim2').hasClass('playable')){
            hypeDocument.continueTimelineNamed('Main Timeline');
        }
    }, { offset: 'bottom-in-view', group: 'default' });

}

However this still could not behave exactly how you want; for example if a user had scrolled and triggered the waypoint before the above animation was done then it would be too late for the call as well. You may need to keep of some state and call a triggering function from the preceding animation. Also I’d consider the usability issue if a user has scrolled to the new animation, why should your old animation off the view hold them up?

Do note that Hype does have waypoints built-in with the Viewport Actions (On Enter Viewport) and (On Exit Viewport) so you might also be able to fashion a solution without as much custom code/jquery.

2 Likes
4

That’s a massive help, thank you so much. Clearly I’d been staring at it too long!