Swipe Button Interaction

Copy component

Swipe Button Interaction

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik

Created by

Swipe Button Component
Swipe Button Component
Swipe Button Component

About the resource

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.

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.

About the resource

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.

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.

About the resource

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.

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,
                },
            }}
        />
    )
}
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,
                },
            }}
        />
    )
}

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

  • Illustration of an invoice document in a blue folder with pricing details for iOS and web apps

    Folder Micro-Interaction in Framer

    Component

    Illustration of an invoice document in a blue folder with pricing details for iOS and web apps

    Folder Micro-Interaction in Framer

    Component

    Illustration of an invoice document in a blue folder with pricing details for iOS and web apps

    Folder Micro-Interaction in Framer

    Component