cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
2
Upvote

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

denimkjb
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

5.8K

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

JoãoCésar Community Expert
Community Expert , 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
...

Votes

Translate

Translate
replies 33 Replies 33
latest latest Jump to latest reply
Thrillhouse1000
New Here ,
Oct 24, 2019 Oct 24, 2019

Copy link to clipboard

Copied

Thank You!!!!

Votes

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
Feder.
New Here ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

How to invert mouse wheel?

Votes

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
Feder.
New Here ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

In Response To Feder.

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

Votes

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
Feder.
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?

Votes

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

Votes

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
JoãoCésar Community Expert
Community Expert ,
Sep 07, 2020 Sep 07, 2020

Copy link to clipboard

Copied

In Response To olliet44775419

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

Votes

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
olliet44775419
New Here ,
Sep 07, 2020 Sep 07, 2020

Copy link to clipboard

Copied

In Response To JoãoCésar

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

Votes

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
warrenc8008822
New Here ,
Jan 17, 2023 Jan 17, 2023

Copy link to clipboard

Copied

In Response To JoãoCésar

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?

Votes

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
JoãoCésar Community Expert
Community Expert ,
Jan 18, 2023 Jan 18, 2023

Copy link to clipboard

Copied

In Response To warrenc8008822

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)?

Votes

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
Resources
Learn
Get started with Adobe Animate guide
Quick guide for keyboard shortcuts
How to make an ad for Adwords in Animate CC?
Drawing in Animate
Latest Features
What's New in Adobe Animate?
Copyright © 2023 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices