How do I animate the timeline with the mouse wheel in Animate CC?

[denimkjb]

Hi everyone! The title says it all.

My project is HTML5 Canvas

I have an animation on my main timeline and I will like to control the animation with the mouse wheel going forward and backwards, and if I don't touch the mouse wheel it won't start.

How do I do this on my action layer?

Thanks!!!

[susegad]

Hi @JoãoCésar first of all thank you very much for your help.
Wondering about, is it possible to adjust the speed with the actual mousewheel speed? I mean, if the user scrolls fast, animation will play fast - vice versa. Thanks!

[kglad]

@susegad 

the frequency of the wheel events can be used to determine the speed of your timeline.

window.addEventListener("wheel",wheelF.bind(this));

function wheelF(e){

if(e.wheelDelta<0){

whatevertimeline.gotoAndStop(whatevertimeline.currentFrame+1);  // shoud perform out of bounds check

} else {

whatevertimeline.gotoAndStop(whatevertimeline.currentFrame-1);   // shoud perform out of bounds check

}

}

[Thrillhouse1000]

Thank You!!!!

[Feder.]

How to invert mouse wheel?

[Feder.]

OK, FOUND: that.targetTimeline.speed = -delta * that.force;

[Feder.]

I really need a solution to make it works also with mobile swipe. Can you help me please?

[olliet44775419]

Hi there, is there similar code to animate with page scroll rather than mouse wheel? Thanks in advance!

Ollie

[JoãoCésar]

Hi.

This may be what you want.

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/animate_on_scroll

Please let us know.

Regards,

JC

[olliet44775419]

Hi Joao,

Thank you so much for getting back to me so quickly, unfortunately this does not work in the same way. In the code you originally supplied the animation plays and reverses with the mouse scroll but not the page scroll, it would be perfect if the animation was controlled in exactly the same with but with page scroll rather than mouse scroll. Do you know of a way to do this?

Thanks,

Ollie

[warrenc8008822]

Hi Joao,

I know this is an old thread so I'm hoping you're still around to assist.

I'm having some trouble getting this work. 

My clip just animates without waiting for input from the mouse wheel.

Looking at the working file, is the "hit" button important?

[JoãoCésar]

Hi.

The hit instance is required for touch drag. But you can remove it and the related code if you wish.

And are you getting any error in the browser console (F12)?