Jump to content


A satisfying magnetic effect for you

Recommended Posts

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

  • Like 2
Link to comment
Share on other sites

@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

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

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

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

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

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.