Hey everyone! I’m building a book cover hover animation.
It’s 99% of the way there (woohoo! ) 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?
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.
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:
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):
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
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
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!
) but I’m just having some strange behaviour during hover out, as the cursor moves off the ‘book’, there’s a weird flicker.
