Skip to content

Instantly share code, notes, and snippets.

View lilpolymath's full-sized avatar
:octocat:
Exploring

Favour lilpolymath

:octocat:
Exploring
View GitHub Profile
import {
MotionValue,
useAnimationFrame,
useMotionValue,
} from "framer-motion";
import React from "react";
export interface Clock {
value: MotionValue<number>;
setRate: (rate: number) => void;
@Eronred
Eronred / AirbnbImageAnimation
Created June 5, 2024 13:33
Airbnb animated images
import { motion } from 'framer-motion'
import React from 'react'
const images = [
{
src: 'https://a0.muscache.com/im/pictures/miso/Hosting-2810308/original/a653d85a-1a97-45d7-a213-78ef2286122a.jpeg?im_w=720',
alt: 'Tree'
},
{
src: 'https://a0.muscache.com/im/pictures/2cc58022-2004-4034-a281-22fb622e7461.jpg?im_w=720',
import React, { useState, useEffect, useRef } from "react";
type AnimatedTextProps = {
text: string;
duration?: number;
className?: string;
};
export default function AnimatedText({
text,
import React, { useEffect, useRef } from "react";
import {
motion,
useInView,
useMotionValueEvent,
useScroll,
useTransform,
} from "framer-motion";
export const ScrollAnimations = () => {
import { useMotionValue } from 'framer-motion';
import { animate } from 'framer-motion';
import { motion } from 'framer-motion'
import { useEffect } from 'react';
import useMeasure from 'react-use-measure';
const CarouselWords = () => {
return (
<div className="flex flex-col overflow-hidden">
<CarouselWord word={"Headless"} duration={40} />
@bonface221
bonface221 / index.tsx
Created January 11, 2024 09:01
Framer motion animated counter up while component is in view in next js. For react remove use client and props
"use client";
import {
animate,
motion,
useInView,
useMotionValue,
useTransform,
} from "framer-motion";
import { useEffect, useRef } from "react";
@geroembser
geroembser / scrollanimations.tsx
Created July 24, 2022 22:46
Framer Sites Scroll Animations
import type { ComponentType } from "react"
import type { MotionValue, Transition } from "framer-motion"
import {
useViewportScroll,
useVelocity,
useTransform,
useAnimation,
useMotionValue,
animate,
} from "framer-motion"
import * as React from "react";
import { useRef } from "react";
import { motion, useCycle } from "framer-motion";
import { useDimensions } from "./use-dimensions";
import { MenuToggle } from "./MenuToggle";
import { Navigation } from "./Navigation";
const sidebar = {
open: (height = 1000) => ({
clipPath: `circle(${height * 2 + 200}px at 40px 40px)`,
@perrysmotors
perrysmotors / ScrollEffects.tsx
Last active June 20, 2024 21:07
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,
@HansKre
HansKre / WithBouncingAnimation.tsx
Last active June 20, 2024 16:36
framer-motion
import { ReactNode } from 'react';
import { motion } from 'framer-motion';
type Props = {
children: ReactNode;
delay?: number;
};
export default function WithBouncingAnimation({ children, delay }: Props) {
return (