I'm trying to do animation with Framer motion and React.js + Fullpage.js, but it doesn't do the animation when it goes down. I need help to animate everytime it switches section
Here's the result right but it should animate once user go visit a section(https://wg2qk5-3000.csb.app/#22)
Here's my code
React fullpage wrapper
'use client'
import './globals.css'
import { Poppins } from 'next/font/google'
import ReactFullpage from "@fullpage/react-fullpage";
import React from 'react';
const poppins = Poppins({weight: "400", subsets: ["latin"] });
export default function RootLayout({
children,
}: {
children: React.ReactNode
})
{
return (
<html lang="en">
<body className={poppins.className}> <ReactFullpage
navigation
showActiveTooltip
scrollOverflow={true}
verticalCentered={true}
anchors={['11', '22', '33', '44', '55']}
onLeave={(origin, destination, direction) =>
{
console.log("onLeave event", { origin, destination, direction });
console.log(destination.anchor);
}}
render={({ state, fullpageApi, origin, destination, direction }) =>
{
return (
<>
<>
{children}
</>
</>
);
}}
/>
</body>
</html>
);
}
My sections aka {children}
"use client";
import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
export default function Sections()
{
return (
<AnimatePresence>
<div className="section">
<motion.h1
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -50 }}
>
111111111111111111111111111111111111111111111
</motion.h1>
</div>
<div className="section">
<motion.h1
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -50 }}
>
22222222222222222222222222222222222222222222222
</motion.h1>
</div>
<div className="section">
<motion.h1
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -50 }}
>
3333333333333333333333333333333333333333333
</motion.h1>
</div>
<div className="section">
<motion.h1
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -50 }}
>
444444444444444444444444444444444444444444444
</motion.h1>
</div>
<div className="section">
<motion.h1
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -50 }}
>
55555555555555555555555555555555555555
</motion.h1>
</div>
</AnimatePresence>
);
}
If the animations or the library you use for the animations is scroll-based, you'll need to enable the scroll bar on fullPage.js by using the fullPage.js option
scrollBar:true.The other option is using fullPage.js callbacks such as onLeave or afterLoad to trigger them yourself.