Switch Actions Off at Different Points of Timeline

Animation
1

I have an object in my animation that I do not want to be “clickable” early in the animation, but after it blows up to fill the page I would like the user to be able to click on the object and have it return to the point in the timeline when it was not “clickable”.

Is there any way to make Actions, like On Mouse Click turn on and off at different points in the Timeline? Thanks for any help with this.

2

You can do it with a bit off css and javascript.

The css will disable pointer events for the class .pointerDisabled. ( The css is in your head file )

 <style> .pointerDisabled { pointer-events: none !important; }</style>

On the timeline we place two timeline actions to run the same javascript function

var recElemenet = hypeDocument.getElementById('recElemenet');
recElemenet.classList.toggle('pointerDisabled');

The Javascript toggles the class name of the given element.

The first Timeline action goes at the start of the timeline, preferably a few milliseconds before any animations start.
The second Timeline action goes just after the animations completes.

When run the first timeline action will add the class name .pointerDisabled to the elements classlist. and the element’s pointer events will be disabled. i.e mouse clicks.

When the second timeline action fires it will toggle out the pointerDisabled class name from the elements classlist.
Which will re enable any pointer events. I.e your on mouse click.
pointeDisable.hype.zip (12.1 KB)

2 Likes
3

Put a zero opacity element, e.g. a rectangle above this object. Following the object, if it is animated. At wanted positions the timeline, set keyframea that turns off/ turns on the display of the zero opacity element.

No coding, just elements, animated properties and keyframes…

1 Like
4

I've suggested using shield elements in the past, but think in this case the coding is minimal and saves cluttering the scene with shield elements. :smile:

5

Thanks for the help, I agree with both of you. I ended up just making the invisible rectangle on top and turning off the Display, but wanted to see if there is a slicker way to do it to avoid managing more elements in the timeline. Thanks Mark for the code, I will try that tomorrow.

6

I use the shielding with an invisible object, but it’s good to know there is a different way. Very usefull!

1 Like
7

Love this Mark! Thank you. It works incredibly well, I put it on the first keyframe and then on the keyframes when the object I want to have become clickable is ready for that functionality. Clicking it brings it back to the first frame and around it goes. Super clean and quick, LOVE it!

1 Like