Tips for triggering animation only when the element is in the viewport

Question

Tips for triggering animation only when the element is in the viewport

I'm currently developing in React and facing a challenge where I need to trigger a fade animation for an element only when it becomes visible on the screen. The issue is that right now, the animation plays as soon as the page loads, which defeats the purpose if the user has to scroll to see it.

<Grid container className="AnimationContainer">
  <img src="/images/animation1/circle.svg" className="Animation1-1" />
  <img src="/images/animation1/calculator.svg" className="Animation1-2" />
</Grid>

In my CSS file, I've defined the styles:

.AnimationContainer {
  place-content: center;
  height: 200px;
  width: 100%;
}
.Animation1-1 {
  animation: fading 2s;
}
.Animation1-2 {
  animation: fading 1.2s;
}
@keyframes fading{
  0%{opacity:0}
  100%{opacity:1}
}

Is there a way for me to ensure that the animation is triggered only when the Grid with class "AnimationContainer" or the images with classes "Animation1-1"/"Animation1-2" are within the visible portion of the screen?

javascript css reactjs animation css-animations

Answer 1

Answer №1

Implement the Intersection Observer API to identify when the element becomes visible and apply the animation property at that point. Achieving this functionality is straightforward with the help of react-intersection-observer:

import { useInView } from "react-intersection-observer"

const CustomComponent => () => {
  const [ref, inView] = useInView({ threshold: 0.5 })

  return (
    <div ref={ref} className="AnimationContainer">
      <img src="/images/animation1/circle.svg" className={inView ? "Animation1-1" : null} />
      <img src="/images/animation1/calculator.svg" className={inView ? "Animation1-2" : null} />
    </div>
  )
}

Answer 2

Implement the Intersection Observer API to identify when the element becomes visible and apply the animation property at that point. Achieving this functionality is straightforward with the help of react-intersection-observer:

import { useInView } from "react-intersection-observer"

const CustomComponent => () => {
  const [ref, inView] = useInView({ threshold: 0.5 })

  return (
    <div ref={ref} className="AnimationContainer">
      <img src="/images/animation1/circle.svg" className={inView ? "Animation1-1" : null} />
      <img src="/images/animation1/calculator.svg" className={inView ? "Animation1-2" : null} />
    </div>
  )
}

Tips for triggering animation only when the element is in the viewport

Answer №1

Similar questions

Implement a jQuery slider that pauses on hovering

What is the best way to iterate through an ID using jQuery?

Customizing MaterialUI styles in React: A step-by-step guide

Customizing table row background color on hover or mouseover in Material UI datatable

Is there a way to implement a watch on $validator.errors in Vue.js using the Vee Validation plugin?

Eliminating and restoring the background in a form field when it is in focus

CSS to Reverse Align Navigation Bar Text

Limiting page entry with passport.js and express middleware

The PHP code embedded within the HTML document and triggered by an AJAX request failed to

Guide to building a nested React component

Maximizing the efficiency of React.js: Strategies to avoid unnecessary renders when adding a new form field on a webpage

I'm perplexed as to why my webpage displays differently across various browsers

Applying CSS to align the first line to the left and right, while ensuring that wrapped lines are aligned to the

Challenge implementing custom javascript to display categorical/string features on Shiny slider

Enable compatibility with high resolution screens and enable zoom functionality

Can you tell me how to add a variable to an array of objects in JavaScript?

Troubleshooting: No data returned from getStaticProps in Next JS

Testing a Vue.js/Node.js application using Websockets

Trouble with minification in Sencha cmd 5

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment