Exploring

Favour lilpolymath

Exploring

Snr. Software Engineer. Existing in the intersection of design and engineering.

malerba118 / use-clock.ts

Created June 14, 2024 16:29

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',

Muzammil-cyber / AnimatedText.tsx

Created May 29, 2024 19:37

	import React, { useState, useEffect, useRef } from "react";

	type AnimatedTextProps = {
	text: string;
	duration?: number;
	className?: string;
	};

	export default function AnimatedText({
	text,

TomIsLoading / ScrollAnimations.tsx

Created March 30, 2024 15:18

	import React, { useEffect, useRef } from "react";
	import {
	motion,
	useInView,
	useMotionValueEvent,
	useScroll,
	useTransform,
	} from "framer-motion";

	export const ScrollAnimations = () => {

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 / 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"

paulweezydesign / Example.tsx

Created July 3, 2022 20:47

	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 / 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 / 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 (

kiishi / hooks.tsx

Last active September 18, 2022 22:57

react-query like Http Hooks ( with some little extras )

	import { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
	import { useEffect, useState } from 'react';

	interface IRequestHookConfig {
	// request params
	params?: any;
	// guards are like middlewares that run when a response is returned, before the state changes
	// multiple guards can be added for different kind of checks
	guards?: Array<(response: any, err: AxiosError \| null) => Promise<void>>;
	}