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.6K

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
Adobe Community Professional ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

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 < min)
		return max;
	
	if (value > max)
		return min;
		
	return value;
};

this.clamp = function(value, min, max)
{
	if (value < min)
		return min;
	
	if (value > max)
		return max;
		
	return value;
};

this.onMouseWheel = function (e)
{
	e.preventDefault();

	var evt = window.event || e;
	var delta = Math.max(-1, Math.min(1, evt.wheelDelta || -evt.detail));

	that.targetTimeline.speed = delta * that.force;
};

this.tickHandler = function (e)
{
	var clamp = that.targetTimeline.loop ? "loopClamp" : "clamp";
	
	that.targetTimeline.speed *= that.targetTimeline.friction;
	that.targetTimeline.gotoAndStop(that[clamp](that.targetTimeline.currentFrame + that.targetTimeline.speed, that.targetTimeline.minFrame, that.targetTimeline.maxFrame));
};

this.start = function ()
{
	canvas.addEventListener('mousewheel', that.onMouseWheel.bind(that));
	canvas.addEventListener('DOMMouseScroll', that.onMouseWheel.bind(that));
	createjs.Ticker.on("tick", that.tickHandler);
};

if (!this.hasStarted)
{
	this.gotoAndStop(this.targetTimeline.minFrame);
	this.start();
	this.hasStarted = true;
}

 

______________________________________________________________________________

 

Hi.

 

Here is my suggestion.

 

var that = this;

this.targetTimeline = this;

this.targetTimeline.loop = false;

this.force = 2;

 

this.onMouseWheel = function(e)

{

    e.preventDefault();

 

    var delta;

 

    if (e == window.event)

          delta = -10 / window.event.wheelDeltaY;

    else

          delta = e.detail / 30;

 

    that.scrubTimeline(that.targetTimeline, delta, that.force);

};

 

this.scrubTimeline = function(targetTimeline, delta, amount = 1)

{

    var direction = delta < 0 ? 1 : -1;

    targetTimeline.gotoAndStop(targetTimeline.currentFrame + (amount * direction));

};

 

this.start = function()

{

    document.getElementById('canvas').addEventListener('mousewheel', that.onMouseWheel.bind(that));

    document.getElementById('canvas').addEventListener('DOMMouseScroll', that.onMouseWheel.bind(that));

};

 

if (!this.hasStarted)

{

    this.stop();

    this.start();

    this.hasStarted = true;

}

 

I hope this helps.

 

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
Community Beginner ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

JoãoCésar​ you rock man!

It worked like a charm!!!!!

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
Community Beginner ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

If I wanted to hace some easi in and ease out with the scroll wheel, is that possible?

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 ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

Sure!

Try this:

var that = this;

this.targetTimeline = this;

this.targetTimeline.loop = false;

this.targetTimeline.force = 20;

this.targetTimeline.friction = 0.9;

this.onMouseWheel = function(e)

{

    e.preventDefault();

    var delta;

    if (e == window.event)

          delta = -10 / window.event.wheelDeltaY;

    else

          delta = e.detail / 30;

    that.targetTimeline.speed = delta * that.force;

};

this.tickHandler = function(e)

{

    that.targetTimeline.speed *= that.targetTimeline.friction;

    that.targetTimeline.gotoAndStop(that.targetTimeline.currentFrame + that.targetTimeline.speed);

};

this.start = function()

{

    document.getElementById('canvas').addEventListener('mousewheel', that.onMouseWheel.bind(that));

    document.getElementById('canvas').addEventListener('DOMMouseScroll', that.onMouseWheel.bind(that));

    createjs.Ticker.on("tick", that.tickHandler);

};

if (!this.hasStarted)

{

    this.stop();

    this.start();

    this.hasStarted = true;

}

Please don't forget to change the variables on top to better suit your needs.

I hope this works!

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
Community Beginner ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

Hi Joao I found you answer browsing on Adobe Forum... I am a bit new creating HTML5 Animations. Where should I put this code in my canvas? Thanks!

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 ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

Frame 1 of main timeline. Click on frame 1 with Actions panel open and type/paste in the code.


Animator and content creator for Animate CC

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
Community Beginner ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

How would we go about making it so this would only scroll within a specified frame range?

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 ,
Nov 02, 2018 Nov 02, 2018

Copy link to clipboard

Copied

Please try this:

var that = this;

this.targetTimeline = this;

this.targetTimeline.loop = false;

this.targetTimeline.force = 60;

this.targetTimeline.friction = 0.9;

this.targetTimeline.minFrame = 5; // set the start range value here

this.targetTimeline.maxFrame = 540; // set the end range value here

this.clamp = function(value, min, max)

{

    if (value < min)

          return min;

    else if (value > max)

          return max;

    else

          return value;

};

this.onMouseWheel = function (e)

{

    e.preventDefault();

    var delta;

    if (e == window.event)

          delta = -10 / window.event.wheelDeltaY;

    else

          delta = e.detail / 30;

    that.targetTimeline.speed = delta * that.force;

};

this.tickHandler = function(e)

{

    that.targetTimeline.speed *= that.targetTimeline.friction;

    that.targetTimeline.gotoAndStop( that.clamp(that.targetTimeline.currentFrame + that.targetTimeline.speed,      that.targetTimeline.minFrame, that.targetTimeline.maxFrame));

};

this.start = function()

{

    document.getElementById('canvas').addEventListener('mousewheel', that.onMouseWheel.bind(that));

    document.getElementById('canvas').addEventListener('DOMMouseScroll', that.onMouseWheel.bind(that));

    createjs.Ticker.on("tick", that.tickHandler);

};

if (!this.hasStarted)

{

    this.gotoAndStop(this.targetTimeline.minFrame);

    this.start();

    this.hasStarted = true;

}

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
Community Beginner ,
Nov 02, 2018 Nov 02, 2018

Copy link to clipboard

Copied

JC,

thank you so very much

With thanks,

Eric

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 ,
Nov 26, 2018 Nov 26, 2018

Copy link to clipboard

Copied

Thanks Jc,

is there a way to loop frame so it becomes like an infinite scroll animation?

I'm trying to rotate the object through mouse scroll , and also so that it flips when mouse hovers over it. Still very new to animatecc

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 ,
May 13, 2019 May 13, 2019

Copy link to clipboard

Copied

Hi João, Is there a chance the same thing to work on a phone and tablet as sliding, on desktop just work great when scrolling... I'm testing on the phone but when try to slide down it doesn't work how can I make it work when sliding up or down?

I've started a concept for an animation based on your script and It's great, really really great. Thanks. That with the easing is super!

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 ,
Aug 20, 2020 Aug 20, 2020

Copy link to clipboard

Copied

 

Hi JoãoCésar , This is a great help. Also please help me how to make the navigation with touch screen swipe and keyboard shortcuts (left, right, top, down arrows). Thank you so much in advance.

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 16, 2019 Sep 16, 2019

Copy link to clipboard

Copied

Hi, I do that but it don´t work.

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
LEGEND ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

Muito bom o mestre de ANCC!   Com graça como de costume! Obriga por todos os usuários!

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 ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

Wow! Fico muito lisonjeado por receber um elogio de uma profissional de tão alto nível como você! Muito obrigado! \o

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
LEGEND ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

Meu prazer, você merece!!!

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
Community Beginner ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

@JoãoCésar Thank you for your code!

 

It works fantastic but i have one problem. 

If i move the mousewheel faster the animation is running slower.

If i move the mousewheel slower (only a few dents) the animation moves faster.

 

How can i invert this behaviour?

 

Thanks!

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 ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Hi, Pete!

 

I hadn't noticed it. Thanks for pointing this out.

 

I guess it's because in the root.onMouseWheel method I should add the value calculated and not just assign it. To fix the problem, just add a + character, like this:

root.onMouseWheel = function (e)
{
	// (...)
	root.targetTimeline.speed += delta * root.force * root.direction;
};

 

Now maybe you're gonna need to lower the root.targetTimeline.force value.

 

I'm gonna update my comment.

 

Thanks a lot!

 

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 ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

Hi João,

 

This is great, thank you! 

I'm struggling to understand the logic behind the code so I have a couple more questions if you have the time to answer?

1. I'd like to change the direction of travel to up/down Y axis, if possibe?

2. If I wanted to add a second object to the scene (but travelling in the opposite direction) is there a way of achiving this also?

 

Many thanks!

Nick

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 ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

Hi, Nick!

 

If I understand correctly what you want to do, you just have to change the animation in the main timeline.

 

Because the purpose of the code is to control the main timeline with the mouse wheel or with drag. The visual effect depends more on creativity.

 

So you would animate de box going from bottom to top and another object going from top to botttom, for example.

 

Please let us know if this is what you're looking for.

 

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 ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

Amazing! Thank you so much for the response.

Yes, I just realised I was making this much more complex than it really is – all controlled by the objects on the timeline which is actually perfect for what I'm trying to achieve.

Thank you so much for this.

Your whole GitHub repository is an absolute gold mine, btw!

Nick

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 ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

LATEST

Awesome, Nick!

 

Please let us know if you have further questions.

 

Also, please stay tuned because I'm planning to do more for the Animate community.

 

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 ,
Oct 24, 2019 Oct 24, 2019

Copy link to clipboard

Copied

Thank You!!!!

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

How to invert mouse wheel?

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