Swipe Button Interaction

Component

Swipe Button Interaction

This is a swipe button interaction inspired by a marketing animation from Jitter, created in Framer. Feel free to remix the project, check out how it's built, or copy the component directly to your project.

Creator

Nandi Muzsik

Founder @ Framer Uni

Nandi Muzsik

Founder @ Framer Uni

Nandi Muzsik

Founder @ Framer Uni

Nandi Muzsik

Founder @ Framer Uni

Remix

Copy component

Demo

Remix

Copy component

Demo

Remix

Copy component

Demo

Remix

Copy component

Demo

Features

This component has a frame positioned absolutely within it, and that frame slides over the white part of the component when you click the button.

We've also implemented an easy code override to achieve a scale-down effect as you press the button.

The code is included in the remix, but you can also copy it from below and create the override in your project from scratch if you prefer.

Step / 01

Remix the project.

Step / 02

See how it's built.

Step / 03

Recreate it for practice or copy and paste it to your project.

Scale down on click code override for Framer

Feel free to copy the code and create the code override from scratch in any of your projects.

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

export const withTap = (Component: ComponentType): ComponentType => {
    return (props) => (
        <Component
            {...props}
            as={motion.div}
            style={{}}
            whileTap={{
                scale: 0.9,
                transition: {
                    duration: 0.3,
                    ease: "easeInOut",
                    repeat: 0,
                    repeatDelay: 0,
                    delay: 0,
                },
            }}
        />
    )
}

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

export const withTap = (Component: ComponentType): ComponentType => {
    return (props) => (
        <Component
            {...props}
            as={motion.div}
            style={{}}
            whileTap={{
                scale: 0.9,
                transition: {
                    duration: 0.3,
                    ease: "easeInOut",
                    repeat: 0,
                    repeatDelay: 0,
                    delay: 0,
                },
            }}
        />
    )
}

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Start learning now

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Start learning now

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Start learning now

More resources

View all

Remix

Demo

Copy component

Skeuomorphic Buttons in Framer

Remix

Demo

Swipe Button Interaction

Swipe Button Interaction

Swipe Button Interaction

Swipe Button Interaction