Book cover "opening" transform transition behaving strangely

Hey everyone! I’m building a book cover hover animation.

It’s 99% of the way there (woohoo! :tada:) but I’m just having some strange behaviour during hover out, as the cursor moves off the ‘book’, there’s a weird flicker.

Can someone smarter than me help me out with how to stop this happening, so the ‘book’ closes as smoothly as it opens?

Thanks for the help! :blush:

A live example of of the animation: https://hover-state-test-212251.webflow.io/

Here is my site Read-Only: Webflow - Hover state test


Hey friend!

Don’t know if I’m smarter, but here’s my thought.

It looks like the pivot point on the opening animation is at the edge of the book and the pivot point on the closing animation is in the middle.

Hard to give more info than that with just a live preview, but I imagine you would have programmed the pivot point/origin change on the opening animation, you just forgot on the close.

Very, very, VERY cool!

Hey friend! :wave:

Thanks for the thoughts and idea :smile:

I don’t actually know how to specify the pivot point separately for opening and closing, I’ve just set the transform settings to the left edge for both individual and child perspectives:
Screen Shot 2022-04-28 at 7.31.57 am

And then applied a hover state 2D/3D transform to rotate -34deg on the y-axis, with the transition of 200ms (which is where I think the problem is coming from, as there’s no where in this flow to add the “closing” settings):
Screen Shot 2022-04-28 at 7.33.07 am

My thinking here was that the left alignment of the transform settings would apply throughout the hover state, but apparently not haha

However! I think I have a slightly different workaround :partying_face:

I recreated it in Interactions, but it seems setting 3D perspective settings doesn’t apply to the interactions set to those elements (which is why I hadn’t done this originally), so instead I’ve combined the y-axis rotation with a skew transform (and being an Interaction I can then set the hover-off state as well), which means a slightly different looking book (opening “up” rather than opening “out”) but I think it still looks alright and feels like a book :thinking:

The new version: interaction version

Smart work around!

Sorry I’m actually new to Webflow so I don’t have much XP with animations.

Your new book looks good! The only issue is that the content seems to shift by a few pixels on open and close. The globe changes position and the font line height gets bigger.

In my opinion, I think you’ve nailed it. I think I prefer this version!

:slight_smile: