Jump to content
Search Community

Clear properties after reverse timeline

Fisher666 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hello!

I enjoy reading this forum for a wile now, and it have helped a lot.  Thank you for that. 

So, the ball remember position from which it got scaled first time, for example if I play and than reverse the scaling animation when ball is in corner, it will start and end in corner also when clicked in starting position.  I tried experimenting with clearProps and invalidate(), but I'm missing something... 

See the Pen VwbVEWb by Fishers666 (@Fishers666) on CodePen

  • Like 1
Link to comment
Share on other sites

Congratulations on your first forums post after lurking for a while, @Fisher666

 

I'm not entirely sure what you're looking for, but I'll offer a few thoughts:

  1. I would strongly recommend looking into ScrollTrigger. It will be much more performant and flexible than the technique you're currently using. Probably a lot easier to work with too :)
  2. Keep in mind that when a .to() tween renders the first time, it records the starting and ending values so that it can very quickly interpolate. If you want to erase those and make the tween re-record those on the next render, just call .invalidate(). Perhaps that's what you're looking for in your onclick
  3. You might want to look into Flip Plugin because it makes things like this really easy where you're animating to a different state and the start might be from anywhere.

Happy tweening!

  • Like 2
Link to comment
Share on other sites

Thank you for fast response!

I made another pen so you could get the idea of what I'm trying to do. When user clicks on envelope icon , div that contains it scales up and transforms to a rectangle and form fades in(left some parts out of the pen). I didn't use scroll trigger, because I don't want the ball div to get back in position while it is scaled if user opens form(scales up ball) for example in mid-page and  scrolls back to top  with ball being scaled-up.

As for using invalidate(), this is best I could come up with, it resets starting position, which is exactly what I wanted but  popFormTl.reverse() doesn't work 2nd time.

If I could get some hint how to make it work more than once, I would be thankful.

 

As for Flip Plugin I definitely will take a look, but at the moment I am not a member of Club GreenSock(I think it is only matter of time, cause I enjoy GSAP more and more), so it will not be used in this project.  

 

See the Pen oNWmBVd?editors=1111 by Fishers666 (@Fishers666) on CodePen

Link to comment
Share on other sites

  • Solution

Hey there @Fisher666,

I think what you're trying to do is toggle the direction of a timeline - so I've refactored to include that. 

See the Pen OJmdxzx?editors=0011 by GreenSock (@GreenSock) on CodePen



Jack's definitely right here though - Flip will be mega useful. Without Flip you'll get some messy behaviour when the icon doesn't end up or start in the right place.
 

1 hour ago, Fisher666 said:

I didn't use scroll trigger, because I don't want the ball div to get back in position while it is scaled if user opens form(scales up ball)

I've popped in some scrollTrigger code with a little bit of conditional logic to show how you could do this. ☺️

I've got a couple of other things to do right now, but I'm going to come back to this in a bit with a Flip demo. 👀

 

  • Like 2
Link to comment
Share on other sites

Thank you for pointing out toggle direction and especially about showing how I can use scroll scroll trigger here. Both of these solutions fits in perfectly, but the problem about .to tween remembering positions from first render still persist.  I look forward to see your  Flip demo. :)

Link to comment
Share on other sites

You got me on the right track, and I found a solution. I noticed that in last demo I posted, after invalidate() I am missing an overlay and with clicking on ball div with toggle direction everything actually work, so I made an independent tween for overlay and everything is working as expected.:) 

Thank you both for your time! This forum is the best!

 

See the Pen yLbZpEz?editors=1111 by Fishers666 (@Fishers666) on CodePen

 

  • Like 1
Link to comment
Share on other sites

My pleasure - It was a good example to Flip-ify 🥳

Stopping scroll while a modal dialogue is open is quite a common pattern, and I think overflow:hidden is the most common route - but obviously go with what you feel is right!

Good luck with your project.

  • Like 1
  • Haha 1
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...