Skip to content

Instantly share code, notes, and snippets.

View perrysmotors's full-sized avatar

Giles Perry perrysmotors

View GitHub Profile
@perrysmotors
perrysmotors / Mapbox.tsx
Created May 30, 2022 15:08
Framer Mapbox component
import { useState, useRef, useEffect } from "react"
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"
import { useMeasuredSize } from "https://framer.com/m/framer/useMeasuredSize.js"
import mapboxgl from "mapbox-gl"
enum LocationType {
City = "City",
Custom = "Custom",
@perrysmotors
perrysmotors / ScrollEffects.tsx
Last active April 25, 2024 14:06
Overrides to create scroll interactions on Framer sites
import type { ComponentType } from "react"
import { useState, useEffect } from "react"
import type { MotionValue, Transition } from "framer-motion"
import {
useScroll,
useVelocity,
useTransform,
useMotionValue,
animate,
@perrysmotors
perrysmotors / StickyHeader.tsx
Last active October 9, 2022 08:33
Make a layer stick after a fixed scroll distance in Framer X
import { Override, motionValue, useTransform } from "framer"
// Create a MotionValue to track scroll content offset
const contentOffsetY = motionValue(0)
// Apply this override to your scroll component
export function TrackScroll(): Override {
return {
contentOffsetY: contentOffsetY,
}
@perrysmotors
perrysmotors / SmoothScroll.tsx
Last active October 9, 2022 08:34
Smoothly scroll back to the top in Framer X
import { Override, useAnimation } from "framer"
// Declare the controls variable so we can access it from both functions
let controls
// Apply this override to your scroll component
export function Scroll(): Override {
controls = useAnimation()
return { scrollAnimate: controls }
}
@perrysmotors
perrysmotors / TriggerAnimationOnScroll.tsx
Last active October 9, 2022 08:34
Trigger an animation when scrolling past a given position in Framer X
import { Override, Data, motionValue, useTransform } from "framer"
// Keep track of the state of our application
const data = Data({ isPastLimit: false })
// Create a MotionValue to track contentOffsetY
const contentOffsetY = motionValue(0)
// Listen for changes to contentOffsetY
contentOffsetY.onChange(offset => (data.isPastLimit = offset < -52))
@perrysmotors
perrysmotors / AppBar.tsx
Last active October 9, 2022 08:34
Transform the height of a layer as you scroll in Framer X
import { Override, motionValue, useTransform } from "framer"
const contentOffsetY = motionValue(0)
// Apply this override to your scroll component
export function TrackScroll(): Override {
return { contentOffsetY: contentOffsetY }
}
// Apply this override to your app bar
@perrysmotors
perrysmotors / ParallaxLayer.tsx
Last active October 9, 2022 08:34
Add Parallax to scroll content in Framer X
import { Override, motionValue, useTransform } from "framer"
const contentOffsetY = motionValue(0)
// Apply this override to your scroll component
export function TrackScroll(): Override {
return { contentOffsetY: contentOffsetY }
}
// Apply this override to your parallax layer