Jump to content
Search Community

Reverse Animation Approach

miks test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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.
×
×
  • Create New...