Fisher666 Posted August 10, 2021 Share Posted August 10, 2021 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 11, 2021 Share Posted August 11, 2021 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: 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 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 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! 2 Link to comment Share on other sites More sharing options...
Fisher666 Posted August 11, 2021 Author Share Posted August 11, 2021 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 More sharing options...
Solution Cassie Posted August 11, 2021 Solution Share Posted August 11, 2021 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. 👀 2 Link to comment Share on other sites More sharing options...
Fisher666 Posted August 11, 2021 Author Share Posted August 11, 2021 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 More sharing options...
Fisher666 Posted August 11, 2021 Author Share Posted August 11, 2021 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 11, 2021 Share Posted August 11, 2021 Glad you found a solution you're happy with. Here's a pass at a Flip solution if you're interested to see the difference. The positioning is all done using classes and then Flip is just animating between states. ☺️ See the Pen eYWxVxw?editors=0010 by GreenSock (@GreenSock) on CodePen 5 Link to comment Share on other sites More sharing options...
Cassie Posted August 11, 2021 Share Posted August 11, 2021 Just a little note - if you remove the ability to scroll while the menu is open it'll make life a bit easier as you won't need any extraneous conditional logic. See the Pen OJmdEqQ?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Fisher666 Posted August 11, 2021 Author Share Posted August 11, 2021 The Flip version is definitely superior, thanks for making that pen. As for overflow-hidden, that was one of my first thoughts, but it kind of didn't feel right :). 2 Link to comment Share on other sites More sharing options...
Cassie Posted August 11, 2021 Share Posted August 11, 2021 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. 1 1 Link to comment Share on other sites More sharing options...
Fisher666 Posted August 12, 2021 Author Share Posted August 12, 2021 @Cassie Hey! Today I got a project where Draw SVG plugin would make my life a lot easier, so I've joined club GreenSock faster than I thought. That also means that I will implement Flip solution You showed in my current project :). I am really excited about this purchase, like a kid with a new toy. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted August 12, 2021 Share Posted August 12, 2021 Welcome to club @Fisher666 I remember when I first got my membership, and I spent my entire Christmas break playing around with all the new toys! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now