Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
miks

Reverse Animation Approach

Recommended Posts

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

Link to post
Share on other sites

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.

  • Like 5
Link to post
Share on other sites

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 :P

Link to post
Share on other sites

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

 

Link to post
Share on other sites

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

 

 

 

 

 

 

 

  • Like 2
Link to post
Share on other sites

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.

Link to post
Share on other sites
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

 

  • Like 1
Link to post
Share on other sites
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.

 

Link to post
Share on other sites

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?

  • Like 1
Link to post
Share on other sites

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/.

Link to post
Share on other sites

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.

 

 

 

  • Like 3
Link to post
Share on other sites

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

 

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×