Copy link to clipboard
Copied
Hi guys,
I'm working on a project where I have an animation that activate when scrolling down. I have different shapes, when scrolling down the shape morphs into the next one.
My problem is that I can't figure out how to make the shapes morph bacwards, so basically I need the piece of code who tells the timeline to go backwards when scrolling up.
I attached the piece of code I wrote to make it scroll down (it works exactly I want it).
Thanks in advance!
var f = this;
stage.enableMouseOver();
stage.addEventListener("mouseover",h);
function h(){
document.getElementById("canvas").addEventListener("mousewheel",k);
}
function k(e){
if(e.wheelDelta < 0){
if(f.pock.currentFrame == 145){
f.pock.gotoAndStop(145);
}else{
f.pock.play();
}
}
if(e.wheelDelta > 0){
if(this.pock.currentFrame == 0){
f.pock.gotoAndStop(0);
}else{
f.pock.play();
}
}
}
Copy link to clipboard
Copied
this.reverse = reverseF.bind(this);
function k(e){
if(e.wheelDelta < 0){
if(f.pock.currentFrame == 145){
f.pock.gotoAndStop(145);
}else{
f.pock.play();
}
}
if(e.wheelDelta > 0){
if(this.pock.currentFrame == 0){
f.pock.gotoAndStop(0);
}else{
startReverse.bind(f)();
}
}
}
function startReverseF(){
f.pock.addEventListener("tick",this.reverse);
}
function reverseF(){
if(f.pock.currentFrame==0){
f.pock.removeEventListener("tick",this.reverse);
} else {
f.pock.gotoAndStop(this.mc.currentFrame-1);
}
}
Copy link to clipboard
Copied
Thanks for your answer Kglad.
What I can see from the code you wrote is that when I scroll up the timeline goes back one frame.
The point is that it is not what I need (my fault, I didn't specified it in my first message).
I want the animation to play backwards when I scroll up, then it stops when needed (already have some stop keyframes).
Another way to make this work might be to write a code that plays from frame x to frame y (eg. play 45 to 35), do you know if it is possible?
Copy link to clipboard
Copied
sure it's possible, just add the "stop" frames to the code. ie, right now the code is checking for frame 0 to stop. if you want a different frame, put that number in place of the 0.
if a timeline needs to play in reverse (to say 35) starting not from the current frame, but from another frame (eg, 45) that will take more work.