Pause Delay for 5seconds and Continue Timeline

Using JavaScript with Hype Function Library
1

I was looking for a script that would pause the timeline for 5 seconds and if there are no movements in the scene continue timeline, however if there was a movement/interaction pause the delay for indefinitely and restart the delay of 5 seconds when no longer on the scene

I tried this but it doesn't seem to work in the same way Intended.

2

Can you more clearly define movement/interaction?

Note that ads served in an iframe (I believe this is your common use case) cannot see the larger context of the web page or computer. So if it is just something like mouse movement, a small ad cannot detect mouse moves from the surrounding web page.

I recommend searching the wider web/stack overflow for "idle timers" or "inactivity timers" to at least give a feel on the events that can be listened to for this type of activity and possible 3rd party libraries or code that can assist.

3

if theres no mouse movement within the ad but if there is pause/stall the function from going to the next scene until theres no mouse movement.

This partially has it but it temporarily stops it for 2 seconds, I need it stop it completely when im on the ad.

https://forums.tumult.com/uploads/short-url/hDyuAdwQ8T0YDPL1WujzmKqVFT9.zip

4

Not 100% on what you want but ..

Always suggest moving any animations off the main timeline where you can.
This will always give you more control.

We have timeline mover that does all the animation

We start the timeline mover from the main time line.

On first scene load, we add listeners to the Hype Doc and not globally to the window.

The listeners are for mouse enter, mouse move, mouse out.

If we enter and we pause the animation and start 5s timer. after timer the animation will start again.

If we move within the hype doc we pause the animation and start 5s timer. after timer the animation will start again.

If we move out off the hype doc we restart the animation.

We clear the time as needed.
.


	var timer = null;

	const info = hypeDocument.getElementById('info')
    const timerText_ = hypeDocument.getElementById('timerText')
    mouseMoved = function (e) { 
     
		 
        hypeDocument.pauseTimelineNamed('mover')
		info.innerHTML = "pausing  Timeline"
			
		clearTimer()  
				
		timer = window.setTimeout(restartTimeline, 5000);//("Restarting After Timeout")
		timerText_.innerHTML = "Timer Started"
		
    }
        
   	restartTimeline =      function (e) {
			 
		clearTimer()
			 
		hypeDocument.continueTimelineNamed('mover', hypeDocument.kDirectionForward, false);
		info.innerHTML = "restart Timeline "
			  
			  

	}	


	function clearTimer(e) {
  			
 		if (timer != null) {
			  	window.clearTimeout(timer); 
			  	timer = null;
			  
			 
			 	timerText_.innerHTML = "Timer Cleard"
		}
	}

	var theDoc = document.getElementById( hypeDocument.documentId() ) 

	theDoc.addEventListener('mousemove', mouseMoved);// pausing on MouseEMoved 

	theDoc.addEventListener('mouseenter', mouseMoved); // pausing on MouseEntered 

	theDoc.addEventListener('mouseout', restartTimeline);// Restarting on Mouse Out"

When the animation competes we go to the next scene which has an on scene load that clears the listeners

var theDoc = document.getElementById( hypeDocument.documentId() ) 
	theDoc.removeEventListener("mousemove", mouseMoved, false);
	theDoc.removeEventListener("mouseenter", mouseMoved, false);
	theDoc.removeEventListener("mouseout", restartTimeline, false);

Stop Timelline_.hype.zip (25.3 KB)

4 Likes
5

Thanks for putting this together, Mark!

1 Like