Search

Hooked to Cursor

Glitch Wave

Countdown Timer

Futuristic Typing

Text Mask

Password Protected

Timed Loading Bar

Attempted Escape

Toggle Between Variants

Type Out Text

Timeboxed Message

Scroll Scrub

Previous Page

Bubble Burst

Track # of Clicks

Arc Text

Controller Changes Variant

Text Magnifier

Show Popup

Decrypted Text

Bubbly Bois

3D

Skew Any Layer

Flashcards

Directional Hover

Embed Any Website

Upvote / Downvote

Before & After Slider

Comment Section

Page Views

Droplets

3D Hop

Spinning Card

Custom Form

Swirl

Levitate

Bounce

Outlined Text

Slip N’ Slide

Wobbly

Filtering Without CMS

Party

Counter

Reflection

Replace Cursor with Frame

Continuous Rotation

Download Any File

Stick to Cursor

Scrambler

Matrix Effect

Card Flip

Shiny Border

Image Modal on Click

Attention Shake

Hide Header on Scroll

Countdown to Midnight Daily

CTA Tester (New CTA on Pageload)

Tinder Style Swipe

Stopwatch

Text Glitch

Color of Highlighted Text

Pomodoro Timer

Text Bubble Follows Cursor

Typing Effect

Border Shine

Toast Notification

Snap Scroll Effect

Scroll to Top

Copy Link to Current Page

Randomized Text from List

Scroll Progress Bar

Countdown

Multi Color Gradient Fill

Rotate to Follow Cursor

Current Time & Date

3D Text Box

Orb

Lean Back

3D Spin (X-Axis)

Expand & Fade

3D Burst

Swipe Down

Random Gradient

Copy to Clipboard

Random Rotate

Clingy

Random Border Color

Rainbow Road

Shiny

Spin 360

Moving Border

Shine

Ripples

Pulse

Slide Out Right

Downscale

Upscale

Key Press

Share on LinkedIn

Share on Facebook

Wobble

3D Spin (Y-Axis)

Float

Tilt Up

Slide Down & Back

Blob Distort

Down & Back

Spring

Share on Twitter (X)

Skew & Toggle Fill

Confetti

Material Ripples

Door Swing

Pressure Press

3D Tilt

Back

Copy Link

Library

/

Free

/

49

Snap Scroll Effect

49

Snap Scroll Effect

FREE

Not loading? Preview

Made by

FramerUniversity

override

scroll

Help

Override

Remix & Clone

Snap Scroll Effect

Copy

Override

Copied to Clipboard!

Instructions

This effect has two overrides. One for the wrapper and another for the children.

Please follow Framer University's tutorial or check the remix link for more details - https://youtu.be/UXe3Mj5OQJE

Code Preview

import type { ComponentType } from "react"
//Child Element
const style = {
    scrollSnapAlign: "start",
    scrollSnapStop: "always",
}

export const withChild = (Component): ComponentType => {
    return (props) => {
        return <Component {...props} style={style} />
    }
}
//Parent Wrapper
const styleParent = {
    scrollSnapType: "y mandatory",
}

export const withParent = (Component): ComponentType => {
    return (props) => {
        return <Component {...props} style={styleParent} />
    }
}

Previous

Scroll to Top

Next

Toast Notification

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.