Reverse Animation Approach

[miks 14 Likes (Newbie)]

Hi Guys,

I hope you could point me on the right track to be able to make a animation in and reverse approach on this current pen that I attached.

My goal is when I enter the section which will be active I wanted to animate all the elements inside (that I can do).  My problem is reversing the animation before leaving the current section. Anyway, as you can see on the pen its a scroll wheel transition.

Best Regards,
Mikhail

 

See the Pen zjvGmZ by miksv (@miksv) on CodePen

[Sahil 2,657 Likes (Superhero)]

It is going to be little complex but doable. In following demo I am playing an animation by detecting which section is active and calling animation for it. Its not enough though.

 

See the Pen PeNpWq?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

You will need to create an array of animations so you are able to use index and call different animations for particular section, somewhat similar concept but not exactly as in following thread.

 

 

So,

 

Step 1, determine which section is active.

Step 2, call animation for that section by determining index and use that index to play animation from an array.

 

But that's not enough to reverse animation, so

 

Step 3, Use onReverseComplete callback to trigger the change of section.

 

See if that helps. I won't be able to post complete demo at the moment. But I might work on something similar in couple of days so I will post a simple demo for you.

[miks 14 Likes (Newbie)]

Thank you so much @Sahil.

For now I will try my best to achieve what I wanted with your recommendation. But I will still gonna wait for your demo

[miks 14 Likes (Newbie)]

Hi @Sahil,

I hope you could check this pen which I tried to do. But the only thing that is missing is whenever I continue pressing next it keeps making me back to the first slide due to that I'm using a single tween and it also has the next slide transition.
 

See the Pen KRzexb by miksv (@miksv) on CodePen

 

[OSUblake 18,538 Likes (Superhero)]

Don't post the same question in multiple threads.

 

I don't know why you're trying to reverse the actual slide, but maybe these will help...

 

 

 

 

 

 

 

[miks 14 Likes (Newbie)]

Sorry @OSUblake, I don't know how would this work on my case. Actually I just wanted to reverse the current animation before pushing it to the next slide. And to the next slide before I go to the other slide again I wanted to reverse the current animation on the slide.

[OSUblake 18,538 Likes (Superhero)]

24 minutes ago, miks said:

Sorry @OSUblake, I don't know how would this work on my case. Actually I just wanted to reverse the current animation before pushing it to the next slide. And to the next slide before I go to the other slide again I wanted to reverse the current animation on the slide.

 

 

Isn't that what this demo does?

 

See the Pen ZbdxRx by osublake (@osublake) on CodePen

 

[miks 14 Likes (Newbie)]

16 minutes ago, OSUblake said:

 

 

Isn't that what this demo does?

 

See the Pen ZbdxRx by osublake (@osublake) on CodePen

 

@OSUblake, It does but its missing something. 

On this pen.
There is an animation ball on the Slide 1.

If you click Slide 2 I want the Slide 1 ball animation to reverse before it goes to Slide 2 and play again the ball animation in slide 2.

 

[OSUblake 18,538 Likes (Superhero)]

So you want the ball animation to fully play back in reverse, and then use onReverseComplete to call the prev/next slide?

 

What happens if you press a prev/next button multiple times while the animation is reversing?

[miks 14 Likes (Newbie)]

Yes, exactly I want it to reverse the ball back first before going to the next slide or previous.
 

If you press it multiple times it will still gonna do the same thing. It will wait for the animation in fully play back, then go to next/previous slide.

Just as the same as this website does. https://cuberto.com/ and http://richbrown.info/.

[OSUblake 18,538 Likes (Superhero)]

OK. I see what you mean. Those examples clear up a lot of the confusion I had, although they appear a little more complicated than what you describe. The direction of the animation seems to be based on whether you are going to the prev or next slide. It looks like each slide has 2 animations, one for going to the prev slide, and one for going to the next slide.

 

I'll try to make a demo that behaves like that later... or maybe @Sahil already has something like that. In the meantime, I would study what @Carl was showing here.

 

 

 

And some of the examples in this thread.

 

 

 

[miks 14 Likes (Newbie)]

Thanks @OSUblake,

Actually the one that I am using on this pen below was the one that Carl did sadly I wasn't able to filter the tween that makes it go to the next slide.

In this pen below. It does play the animation before going to the next slide. But on reverse it is also reversing the next slide function and the animation.

Again, thank you so much for helping me.
 

See the Pen JvKwrZ by miksv (@miksv) on CodePen

 

[miks 14 Likes (Newbie)]

Hi @OSUblake, I find my way to this reverse animation. Thank you so much.