Fix deprecation warning

dv297 · Oct 19, 2022 · a481c64 · a481c64 · vercel · Oct 19, 2022
1 parent 6c48aef
commit a481c64
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { groq } from 'next-sanity';
@@ -38,7 +39,13 @@ const Posts = (props: any) => {
 
   return (
     <div className="px-8">
-      <div className="mt-8">
+      <motion.div
+        className="mt-8"
+        style={{ x: -10 }}
+        initial={{ opacity: 0.1 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 1 }}
+      >
         <h1 className="mb-4 text-4xl md:text-6xl text-center font-bold font-heading font-heading tracking-px-n leading-tight">
           The Latest from{' '}
           <span className="text-primary block text-5xl md:text-7xl">
@@ -54,7 +61,7 @@ const Posts = (props: any) => {
             </span>
           </Link>
         </p>
-      </div>
+      </motion.div>
       <div className="relative mx-auto max-w-7xl">
         <div className="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
           {posts.map((post: any) => {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { motion, useTransform, useViewportScroll } from 'framer-motion';
+import { motion, useScroll, useTransform } from 'framer-motion';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { getSession, signIn } from 'next-auth/react';
@@ -30,7 +30,7 @@ const ActionItemButton = (props: { title: string }) => {
 };
 
 const useScrollAnimation = (yCoordinates: [number, number]) => {
-  const { scrollY } = useViewportScroll();
+  const { scrollY } = useScroll();
 
   const leftXDisplacement = useTransform(scrollY, yCoordinates, [
     '-5px',