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

Community Beginner ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

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!!!

Views

3.7K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Aug 06, 2018 Aug 06, 2018

UPDATED ANSWER (05/28/2021):

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

 

 

var that = this;
this.targetTimeline = this;
this.targetTimeline.loop = true;
this.targetTimeline.force = 40;
this.targetTimeline.friction = 0.9;
this.targetTimeline.minFrame = 0; // set the start range value here
this.targetTimeline.maxFrame = this.targetTimeline.totalFrames - 1; // set the end range value here

this.loopClamp = function(value, min, max)
{
	if (value
...

Likes

Translate

Translate
New Here ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 07, 2020 Sep 07, 2020

Copy link to clipboard

Copied

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

 

Ollie

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 07, 2020 Sep 07, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 07, 2020 Sep 07, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines