Filtering Without CMS

Back

Copy Link

Library

Pro

75 Filtering Without CMS

Not loading? Preview

Made by

@frameroverrides

override

click

Help

Override

Filtering Without CMS

Copy

Override

Copied to Clipboard!

Instructions

Organize content using a grid or stack
Create buttons for your desired filters
You have two overrides you need to apply:
1. Apply Trigger1 to the filter button
2. Apply VisibilityChange1 to each entire frame for the object that should be displayed when that button is clicked
There is a small issue that can cause the spacing of these frames to disappear (currently looking for a fix) to avoid this, add top and bottom padding to elements as needed.

If you need more filters…

This override provides you with 4 possible filters, if you need more - find // START COPY HERE and copy and paste that area below until // STOP COPY HERE
You will then need to change all instances of “FilteredItem1” to FilteredItem4, FilteredItem5, etc.

Code Preview

import type { ComponentType } from "react"
import { motion, useMotionValue, useTransform, useSpring } from "framer-motion"

export function FakeOverride(Component): ComponentType {
    return (props) => {
        // Create motion values for the mouse position (x and y)
        const x = useMotionValue(0.5)
        const y = useMotionValue(0.5)

        // Calculate rotation values based on the mouse position
        const rotateX = useTransform(y, [0, 1], [30, -30])
        const rotateY = useTransform(x, [0, 1], [-30, 30])

        // Apply a smooth spring animation to the rotation values
        const animatedRotateX = useSpring(rotateX, {
            stiffness: 300,
            damping: 30,
        })
        const animatedRotateY = useSpring(rotateY, {
            stiffness: 300,
            damping: 30,
        })

        // Update the motion values on mouse move
        const handleMouseMove = (event) => {
            const rect = event.currentTarget.getBoundingClientRect()
            const mouseX = event.clientX - rect.left
            const mouseY = event.clientY - rect.top

            x.set(mouseX / rect.width)
            y.set(mouseY / rect.height)
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    rotateX: animatedRotateX,
                    rotateY: animatedRotateY,
                    transformOrigin: "center",
                }}
                onMouseMove={handleMouseMove}
                onMouseLeave={() => {
                    x.set(0.5)
                    y.set(0.5)
                }}
            />
        )
    }

import type { ComponentType } from "react"
import { motion, useMotionValue, useTransform, useSpring } from "framer-motion"

export function FakeOverride(Component): ComponentType {
    return (props) => {
        // Create motion values for the mouse position (x and y)
        const x = useMotionValue(0.5)
        const y = useMotionValue(0.5)

        // Calculate rotation values based on the mouse position
        const rotateX = useTransform(y, [0, 1], [30, -30])
        const rotateY = useTransform(x, [0, 1], [-30, 30])

        // Apply a smooth spring animation to the rotation values
        const animatedRotateX = useSpring(rotateX, {
            stiffness: 300,
            damping: 30,
        })
        const animatedRotateY = useSpring(rotateY, {
            stiffness: 300,
            damping: 30,
        })

        // Update the motion values on mouse move
        const handleMouseMove = (event) => {
            const rect = event.currentTarget.getBoundingClientRect()
            const mouseX = event.clientX - rect.left
            const mouseY = event.clientY - rect.top

            x.set(mouseX / rect.width)
            y.set(mouseY / rect.height)
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    rotateX: animatedRotateX,
                    rotateY: animatedRotateY,
                    transformOrigin: "center",
                }}
                onMouseMove={handleMouseMove}
                onMouseLeave={() => {
                    x.set(0.5)
                    y.set(0.5)
                }}
            />
        )
    }