Jump to content
Search Community

FLIP with transformed element snapping

SteveS test
Moderator Tag

Go to solution Solved by SteveS,

Recommended Posts

I'm creating a section on a site where when the user clicks on a "bubble" it animates to a different container using FLIP. It works beautifully by itself, but when I apply a hover effect to the bubbles, it instead snaps to the new container instead of animating.

I saw this thread which seems somewhat close to the issue I'm having, but I can't really identify what is causing my problem.

See the Pen WNLoXLw by StevenStavrakis (@StevenStavrakis) on CodePen

Link to comment
Share on other sites

Yeah, I had to take a break and focus on some other stuff. Life is strange.

I considered doing something like this where instead I wrap each "orb" in a container and animate that container. It's not impossible, but it doesn't help me understand what is happening. My basic understanding of FLIP would seem to indicate that it should work. Or, at least, that it shouldn't break specifically in the way it is breaking.

Link to comment
Share on other sites

  • Solution

Yeah, I rectified the issue by adding the mouse movement effect to a wrapping element and then moving the orb in and out of it. Problem solved. I'm still not completely sure what the issue was but it's a fine enough solution.

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...