This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import type { ComponentType } from "react" | |
import { useState, useEffect } from "react" | |
import type { MotionValue, Transition } from "framer-motion" | |
import { | |
useScroll, | |
useVelocity, | |
useTransform, | |
useMotionValue, | |
animate, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |