rossrangle

  useEffect(() => {
    const timeOut = setTimeout(setCurrentScene, SLIDE_CHANGE_TIME_MS);
    return () => clearTimeout(timeOut);
  }, [currentScene, setCurrentScene]);

rossrangle

  const [currentScene, setCurrentScene] = useCycle(
    hedgehogScene,
    raccoonScene,
    squirrelScene
  );

rossrangle

import React from "react";
import { motion } from "framer-motion";

const TRANSITION_TIME_OPACITY_S = 1;
const TRANSITION_TIME_ROTATE_S = { MIN: 1.5, MAX: 2.5 };

function getRandomNumberBetween(min, max) {
  return Math.floor(Math.random() * max) + min;
}

rossrangle

  transition={{
    yoyo: Infinity,
    duration: 2,
    ease: "easeInOut"
  }}

rossrangle

<motion.div  initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
    <span>This text will fade in when created in the DOM</span>
</motion.div>

rossrangle

import React from "react";
import { motion, AnimatePresence } from "framer-motion";

const ANIMATION_DURATION_S = 0.8;

const getVariants = (direction) => ({
  initial: {
    y: direction === "top" ? "-100%" : "100%",
    opacity: 0,
    transition: { duration: ANIMATION_DURATION_S, ease: "easeInOut" },

rossrangle

import React from "react";
import { motion, AnimatePresence } from "framer-motion";

const ANIMATION_DURATION_S = 0.8;
function IconHolder({ icon, text }) {
  return (
    <div className="icon-holder">
      <AnimatePresence>
        <motion.div
          className="icon-holder__icon"

rossrangle

import React from "react";
import { motion, AnimatePresence } from "framer-motion";

const TRANSITION_TIME_OPACITY_S = 1;
const TRANSITION_TIME_ROTATE_S = { MIN: 1.5, MAX: 2.5 };

function getRandomNumberBetween(min, max) {
  return Math.floor(Math.random() * max) + min;
}

rossrangle

import React, { useEffect } from "react";
import { useCycle } from "framer-motion";

import ImageHolder from "./ImageHolder";
import IconHolder from "./IconHolder";

import { hedgehogScene, raccoonScene, squirrelScene } from "./scenes";

const SLIDE_CHANGE_TIME_MS = 5000;

rossrangle

import React from "react";
import { motion } from "framer-motion";

const TRANSITION_TIME_OPACITY_S = 1;
const TRANSITION_TIME_ROTATE_S = 2;

function ImageHolder({ img, className }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}