I am animating two elements, which are visually on top of each other.

• a text div, that onClick toggles to display a paragraph

• a “book cover” div, that covers the text div until you hover above it and then rotates to the side

the book cover I was able to animate, by giving it a parent-div as well, to expand the “hover area” a bit more

but because the parent div now covers up the text div partially it required me to add the onClick-function, which opens the text div; as there were layout shifts when I tried to include the text div inside the parent.

when I click on the book cover div or the parent element now, the text div expands as expected, but the book cover rotation animation appears to reset, which I am trying to prevent.

How can I stop the book cover hover animation from resetting?

'use Client'
import {motion} from 'framer-motion'
import styled from "styled-components"
import {useState} from 'react'

function Book() {

    const [isOpen, setOpen] = useState(false)

    const Container = styled(motion.div)`
    position: absolute
    max-width: 18rem
    cursor: pointer
    pointer-event: none
    `
    const BookContainer = styled(motion.div)`
    position: relative
    `

    const bookMotion = {
        rest: {ease: "easeOut", duration: 0.2, type: "tween"},
        hover: {
            rotate: 30, x: 50,
            transition: {
                duration: 0.2,
                type: "tween",
                ease: "easeIn"
            }
        }
    };

    return (
        <div className='flex min-h-72 items-center justify-center'>
            <motion.div layout
                        className='absolute max-w-72 bg-white flex justify-center rounded-md cursor-pointer select-none'>
                <motion.div
                    className='flex min-h-20 flex-col items-center w-72 px-0.5 py-1'
                    transition={{layout: {duration: 2}}}
                    onClick={() => setOpen(!isOpen)}>
                    <motion.h2 layout='size'>*Framer Motion*</motion.h2>
                    {isOpen && (
                        <motion.div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi delectus eligendi
                                fuga
                                hic impedit iste minus molestiae repudiandae saepe?
                            </p>
                            <p>Lorem ipsum dolor sit amet.</p>
                        </motion.div>
                    )}
                </motion.div>
            </motion.div>
            <Container initial="rest" whileHover="hover" animate="rest" onClick={() => setOpen(!isOpen)}>
                <BookContainer variants={bookMotion}>
                    <motion.div
                        className='max-w-72 bg-red-800 flex justify-center rounded-md cursor-pointer select-none'
                    >
                        <div className='flex flex-col items-center w-72 px-2 py-1'>
                            <h2>*Framer Motion*</h2>
                        </div>
                    </motion.div>
                </BookContainer>
            </Container>
        </div>
    )
}

export default Book

I have tried to remove pointer events – no change

I have tried to move the text div into the parent element, to circumvent the need of adding the onClick method to the container at all – this causes a reset of the rotation animation, as well as some unintentional shifting of the book cover div

The video I have attached here shows the state where my text div is sibling to the container of the book cover and the container has the onClick method to toggle the text div