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

[JoãoCésar · Accepted solution]

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

[denimkjb]

JoãoCésar​ you rock man!

It worked like a charm!!!!!

[denimkjb]

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

[JoãoCésar]

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!

[daiana.paula]

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!

[_keyframer]

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

[ericv55917637]

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

[JoãoCésar]

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

[ericv55917637]

JC,

thank you so very much

With thanks,

Eric

[jackf19079251]

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

[stoyana57070668]

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!

[ab625464]

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.

[Rattënfanger]

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

[resdesign]

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

[JoãoCésar]

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

[resdesign]

Meu prazer, você merece!!!

[pete.manzel]

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

[JoãoCésar]

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

[subcircle]

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

[JoãoCésar]

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

[subcircle]

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

[JoãoCésar]

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

[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

}

}