I am showing a div on the page start and then turn off it’s opacity and remove it after 20 seconds. But I want to turn the opacity off immediately when the user is scrolling (I mean still play the smooth animation but don’t wait for the delay of 20 seconds)
import "./styles.css";
import { motion } from "framer-motion";
import { useEffect } from "react";
export default function App() {
useEffect(() => {
document.addEventListener("scroll", () => {
// skip the transition delay of the animation and start it immediately here
});
});
return (
<>
<motion.div
id="start"
style={{
background: "blue",
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%"
}}
onAnimationComplete={() => {
const node = document.querySelector("#start") as any;
if (!node) return;
node.style.display = "none";
}}
initial={{ opacity: 1 }}
animate={{ opacity: 0 }}
transition={{ delay: 20, duration: 2 }}
/>
<p>
distinctio vitae voluptatibus ipsa veritatis sequi laborum quasi
explicabo! Vero, accusamus libero, assumenda animi porro dolorum
reprehenderit totam laboriosam harum mollitia nihil. Dolores,
laudantium? Nisi amet voluptatum officia enim error atque consequuntur
nobis similique quibusdam numquam illum nesciunt laborum a maxime quidem
qui vitae rerum cum, incidunt voluptatem modi? Quam sit vitae autem
temporibus voluptates voluptatum. Perspiciatis expedita voluptatibus
laborum, iusto alias recusandae odit omnis. Earum, maxime fugit.
Deleniti cupiditate obcaecati vero libero atque error modi tempore
maxime consequuntur quod exercitationem, possimus ad omnis quas autem
culpa ut ratione asperiores? Explicabo blanditiis debitis dolor. Quia
architecto quam enim dolores laudantium impedit odio provident
voluptatum quaerat. Repellendus labore, voluptates placeat nobis dicta
optio quia in dolores porro, deserunt officiis, magnam culpa totam ea
est autem veritatis minus quaerat. Quisquam, omnis consectetur porro,
vitae deleniti enim pariatur, sed voluptatem fugiat libero illo.
Veritatis autem laudantium, a neque officia consectetur optio alias
repudiandae ea quia pariatur saepe tenetur ab dolorum reiciendis rerum
qui iste quisquam delectus accusantium corrupti obcaecati maxime non
sunt. Non dolores illum beatae minus quisquam, a tempore facere
voluptatum aspernatur optio veritatis delectus fuga! Alias aliquid,
nostrum atque explicabo, eum, modi culpa iusto minus ad omnis sint quod
corrupti? Dolorem officia, id aliquam, accusantium tempore dolorum nisi
deleniti ea dignissimos consequuntur voluptatem quas nihil quod facere,
excepturi quam hic. Repellat quas provident aliquam perspiciatis
temporibus voluptates quaerat? Repellendus blanditiis nobis delectus
fugit vero voluptas placeat quidem accusantium quam. Ipsa corrupti
laborum magni reprehenderit dolore nisi autem sint quisquam quia quidem.
Vero quod consequatur perspiciatis esse mollitia consequuntur nobis, sit
dolores, placeat nostrum unde deserunt obcaecati officiis modi ab
provident quaerat assumenda eaque aliquid voluptates ducimus
dignissimos, incidunt dolorum nam. Deleniti cumque est eaque maiores
molestias voluptatibus totam libero praesentium a magnam, perferendis
iste distinctio blanditiis veniam nobis nisi molestiae, sapiente
inventore soluta magni ex! Assumenda autem error voluptatem tempora!
Suscipit, quia repellat tenetur autem molestiae cum, mollitia fuga
labore facere aut, amet nam quisquam quod magni itaque aliquid eaque
vitae saepe quae soluta veniam. Eum voluptatem enim cum, qui maiores,
sed quibusdam atque dolorem soluta recusandae obcaecati nostrum
laboriosam impedit. Quia porro voluptates ex amet obcaecati a hic rerum,
similique quisquam voluptate nemo at. Incidunt tempore ad laborum nihil
sapiente! Maiores sit consequuntur eos dolor! Nulla porro vel hic et
mollitia quis vero, temporibus est cum, ratione modi molestiae
laboriosam eum dignissimos suscipit. Inventore facere voluptate earum
obcaecati quos atque hic similique voluptates veritatis, at debitis
ullam maxime praesentium nesciunt quasi magni blanditiis maiores veniam
tempore nemo iusto? Tempore, at voluptatem. Voluptatem facilis ratione
fuga non iusto, consequatur autem temporibus facere reiciendis provident
deserunt accusantium doloribus culpa neque. Corrupti, expedita! Autem
obcaecati incidunt necessitatibus iste deserunt in adipisci molestiae
suscipit, voluptas soluta vitae? Earum, consequatur nam odio quo
pariatur obcaecati vel adipisci deserunt facere culpa fugiat ipsum nisi
saepe repudiandae possimus, quisquam illo in suscipit. Distinctio harum
repudiandae dolorem animi repellendus quo vitae accusantium saepe illum
omnis, reprehenderit perspiciatis quod iusto totam. Id voluptatem,
tenetur ducimus recusandae nesciunt dolorum ad cum reiciendis, suscipit
dolores mollitia et illo?
</p>
</>
);
}
Sandbox: https://codesandbox.io/s/framer-motion-enter-animation-forked-7j3zpl?file=/src/App.tsx:0-5194
What is the best way to achieve it?
Thank you!
App.tsx:
import "./styles.css";
import { motion, useAnimationControls } from "framer-motion";
import { useEffect, useCallback } from "react";
export default function App() {
const controls = useAnimationControls()
const animationScrollHandler = useCallback( () => {
// Stop the delayed animation
controls.stop();
// Start new animation
controls.start(() => ({ opacity: 0, transition:{ duration: 2} }))
// Remove scroll listener
document.removeEventListener("scroll",animationScrollHandler)
},[controls])
useEffect(() => {
// Start delayed animation on first render
controls.start(() => ({ opacity: 0, transition:{delay: 20, duration: 2} }))
document.addEventListener("scroll", animationScrollHandler);
//Timer to cancel scroll listener if delayed animation started
setTimeout(() => document.removeEventListener("scroll",animationScrollHandler), 20000);
},[controls, animationScrollHandler]);
return (
<div onScroll={animationScrollHandler}>
<motion.div
id="start"
style={{
background: "blue",
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%"
}}
onAnimationComplete={() => {
const node = document.querySelector("#start") as any;
if (!node) return;
node.style.display = "none";
}}
animate={controls}
/>
<p>
distinctio vitae voluptatibus ipsa veritatis sequi laborum quasi
explicabo! Vero, accusamus libero, assumenda animi porro dolorum
reprehenderit totam laboriosam harum mollitia nihil. Dolores,
laudantium? Nisi amet voluptatum officia enim error atque consequuntur
nobis similique quibusdam numquam illum nesciunt laborum a maxime quidem
qui vitae rerum cum, incidunt voluptatem modi? Quam sit vitae autem
temporibus voluptates voluptatum. Perspiciatis expedita voluptatibus
laborum, iusto alias recusandae odit omnis. Earum, maxime fugit.
Deleniti cupiditate obcaecati vero libero atque error modi tempore
maxime consequuntur quod exercitationem, possimus ad omnis quas autem
culpa ut ratione asperiores? Explicabo blanditiis debitis dolor. Quia
architecto quam enim dolores laudantium impedit odio provident
voluptatum quaerat. Repellendus labore, voluptates placeat nobis dicta
optio quia in dolores porro, deserunt officiis, magnam culpa totam ea
est autem veritatis minus quaerat. Quisquam, omnis consectetur porro,
vitae deleniti enim pariatur, sed voluptatem fugiat libero illo.
Veritatis autem laudantium, a neque officia consectetur optio alias
repudiandae ea quia pariatur saepe tenetur ab dolorum reiciendis rerum
qui iste quisquam delectus accusantium corrupti obcaecati maxime non
sunt. Non dolores illum beatae minus quisquam, a tempore facere
voluptatum aspernatur optio veritatis delectus fuga! Alias aliquid,
nostrum atque explicabo, eum, modi culpa iusto minus ad omnis sint quod
corrupti? Dolorem officia, id aliquam, accusantium tempore dolorum nisi
deleniti ea dignissimos consequuntur voluptatem quas nihil quod facere,
excepturi quam hic. Repellat quas provident aliquam perspiciatis
temporibus voluptates quaerat? Repellendus blanditiis nobis delectus
fugit vero voluptas placeat quidem accusantium quam. Ipsa corrupti
laborum magni reprehenderit dolore nisi autem sint quisquam quia quidem.
Vero quod consequatur perspiciatis esse mollitia consequuntur nobis, sit
dolores, placeat nostrum unde deserunt obcaecati officiis modi ab
provident quaerat assumenda eaque aliquid voluptates ducimus
dignissimos, incidunt dolorum nam. Deleniti cumque est eaque maiores
molestias voluptatibus totam libero praesentium a magnam, perferendis
iste distinctio blanditiis veniam nobis nisi molestiae, sapiente
inventore soluta magni ex! Assumenda autem error voluptatem tempora!
Suscipit, quia repellat tenetur autem molestiae cum, mollitia fuga
labore facere aut, amet nam quisquam quod magni itaque aliquid eaque
vitae saepe quae soluta veniam. Eum voluptatem enim cum, qui maiores,
sed quibusdam atque dolorem soluta recusandae obcaecati nostrum
laboriosam impedit. Quia porro voluptates ex amet obcaecati a hic rerum,
similique quisquam voluptate nemo at. Incidunt tempore ad laborum nihil
sapiente! Maiores sit consequuntur eos dolor! Nulla porro vel hic et
mollitia quis vero, temporibus est cum, ratione modi molestiae
laboriosam eum dignissimos suscipit. Inventore facere voluptate earum
obcaecati quos atque hic similique voluptates veritatis, at debitis
ullam maxime praesentium nesciunt quasi magni blanditiis maiores veniam
tempore nemo iusto? Tempore, at voluptatem. Voluptatem facilis ratione
fuga non iusto, consequatur autem temporibus facere reiciendis provident
deserunt accusantium doloribus culpa neque. Corrupti, expedita! Autem
obcaecati incidunt necessitatibus iste deserunt in adipisci molestiae
suscipit, voluptas soluta vitae? Earum, consequatur nam odio quo
pariatur obcaecati vel adipisci deserunt facere culpa fugiat ipsum nisi
saepe repudiandae possimus, quisquam illo in suscipit. Distinctio harum
repudiandae dolorem animi repellendus quo vitae accusantium saepe illum
omnis, reprehenderit perspiciatis quod iusto totam. Id voluptatem,
tenetur ducimus recusandae nesciunt dolorum ad cum reiciendis, suscipit
dolores mollitia et illo?
</p>
</div>
);
}