3D Spin (Y-Axis)

Back

Copy Link

Library

Free

3D Spin (Y-Axis)

14 3D Spin (Y-Axis)

FREE

Not loading? Preview

Made by

@frameroverrides

override

click

Help

Override

Remix & Clone

3D Spin (Y-Axis)

Copy

Override

Copied to Clipboard!

Instructions

Get more overrides like this one and make your own at frameroverrides.com/generator

Code Preview

import type { ComponentType } from "react"
import { motion, useAnimation } from "framer-motion"

export function with3DRotateClickY(Component): ComponentType {
    return (props) => {
        const controls = useAnimation()

        const handleClick = async (e) => {
            await controls.start({
                rotateY: [0, 360],
                scale: [1, 1.1],
                y: [0, -5], // Adjust the floating distance here
                transition: {
                    duration: 0.6,
                    ease: "easeInOut",
                    y: { type: "spring", stiffness: 100, damping: 10 },
                },
            })
            await controls.start({
                scale: 1,
                y: 0,
                transition: {
                    duration: 0.5,
                    ease: "easeOut",
                },
            })
            if (props.onClick) {
                props.onClick(e)
            }
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    transformOrigin: "center",
                }}
                onClick={handleClick}
                animate={controls}
            />
        )
    }
}

export function with3DRotateHover(Component): ComponentType {
    return (props) => {
        const controls = useAnimation()

        const handleMouseEnter = async (e) => {
            await controls.start({
                rotateY: [0, 360],
                scale: [1, 1.1],
                y: [0, -5], // Adjust the floating distance here
                transition: {
                    duration: 0.6,
                    ease: "easeInOut",
                    y: { type: "spring", stiffness: 100, damping: 10 },
                },
            })
            await controls.start({
                scale: 1,
                y: 0,
                transition: {
                    duration: 0.5,
                    ease: "easeOut",
                },
            })
            if (props.onMouseEnter) {
                props.onMouseEnter(e)
            }
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    transformOrigin: "center",
                }}
                onMouseEnter={handleMouseEnter}
                animate={controls}
            />
        )
    }
}

Wobble

Terms of Use for Free Assets

By accessing and using this Framer Override Library, you agree to the following terms:

All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.

14

3D Spin (Y-Axis)

Override

Instructions

Code Preview

Float

Wobble