SteveS Posted July 21, 2022 Share Posted July 21, 2022 No question. Just wanted to share something I worked on today. I regularly see this effect used on awwwards sites and wanted to try my hand at it. I don't recommend using it a lot on a single page since it isn't optimized. Feedback welcome. See the Pen oNqWKwK by StevenStavrakis (@StevenStavrakis) on CodePen 2 Link to comment Share on other sites More sharing options...
Cassie Posted July 21, 2022 Share Posted July 21, 2022 Ah this is really nice Steve! Thanks for sharing it. Have you seen quickTo? That could be a nice perf optimisation!https://greensock.com/docs/v3/GSAP/gsap.quickTo() Link to comment Share on other sites More sharing options...
SteveS Posted July 21, 2022 Author Share Posted July 21, 2022 @CassieI went ahead and tried to implement quickTo and it REALLY didn't like that. Am I not allowed to mix quickTo with regular tweens? It's bugging out pretty hard. Link to comment Share on other sites More sharing options...
SteveS Posted July 21, 2022 Author Share Posted July 21, 2022 It looks like when I tween back to the starting position, it doesn't re-record the last value written by quickTo and stutters trying to get back from it. Hm. Link to comment Share on other sites More sharing options...
SteveS Posted July 21, 2022 Author Share Posted July 21, 2022 Actually it looks like it doesn't like interrupting the tween fired in the leave event. I can't use xTo for that because it has a dynamic ease applied. I wonder why it doesn't overwrite it. Link to comment Share on other sites More sharing options...
SteveS Posted July 21, 2022 Author Share Posted July 21, 2022 Yeah, looks like quickTo isn't an option here since I use another tween with different settings. I see that quickTo doesn't check for the current position of the element which is probably causing the jump (it jumps from the last position). I've reverted it for now. Link to comment Share on other sites More sharing options...
GreenSock Posted July 22, 2022 Share Posted July 22, 2022 To be clear... .quickTo() is a highly optimized way of redirecting a value to a new destination. Part of the optimization is that it skips any kind of overwriting logic, relative value parsing, etc. Since it's about redirecting, it intentionally doesn't try to read the current position. Again, HIGHLY optimized. It's ideal for things like mouse followers or anything that's constantly getting redirected to a new end value. If you had other tweens that are affecting that same value, this is not a good candidate, though I suppose you could try calling .invalidate() on the quickTo's "tween" property to force it to read the current value. 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