Bubbly Bois

Back

Copy Link

Library

Free

Bubbly Bois

95 Bubbly Bois

FREE

Not loading? Preview

Made by

@frameroverrides

override

none

Help

Override

Remix & Clone

Bubbly Bois

Copy

Override

Copied to Clipboard!

Instructions

This override comes with 5 pre-defined bubbles which should be enough, however, if you want more, feel free to add more by copy and pasting the ‘Bubble1’ and changing the name to ‘Bubble6’, ‘Bubble7’, etc..

Customize the const controls at the top of this code as desired for different heights, etc.

Code Preview

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

// 👇 These are your controls 👇

const easing = "easeInOut" // easing
const repeat = Infinity // repeat amount, "Infinity" or a number value
const Bubble1Height = -203
const Bubble2Height = -182
const Bubble3Height = -223
const Bubble4Height = -102
const Bubble5Height = -162

export function Bubble1(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                as={motion.div}
                animate={{
                    rotate: [14, -6, 9],
                    scale: [0, 1, 1, 0],
                    y: [0, Bubble1Height],
                }}
                transition={{
                    duration: 2,
                    repeat: repeat,
                    ease: easing,
                }}
            />
        )
    }
}
export function Bubble2(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                as={motion.div}
                animate={{
                    rotate: [-12, 12, -12],
                    scale: [0, 1, 1, 0],
                    y: [0, Bubble2Height],
                }}
                transition={{
                    duration: 1.9,
                    repeat: repeat,
                    ease: easing,
                }}
            />
        )
    }
}

export function Bubble3(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                as={motion.div}
                animate={{
                    rotate: [-16, 5, -3, 9],
                    scale: [0, 1, 1, 0],
                    y: [0, Bubble3Height],
                }}
                transition={{
                    duration: 2.4,
                    repeat: repeat,
                    ease: easing,
                }}
            />
        )
    }
}
export function Bubble4(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                as={motion.div}
                animate={{
                    rotate: [-9, 13, -7, 16],
                    scale: [0, 1, 1, 0],
                    y: [0, Bubble4Height],
                }}
                transition={{
                    duration: 1.4,
                    repeat: repeat,
                    ease: easing,
                }}
            />
        )
    }
}
export function Bubble5(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                as={motion.div}
                animate={{
                    rotate: [-13, 6, -11, 7],
                    scale: [0, 1, 1, 0],
                    y: [0, Bubble5Height],
                }}
                transition={{
                    duration: 1.9,
                    repeat: repeat,
                    ease: easing,
                }}
            />
        )
    }
}

3D

Decrypted Text

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.