Breaking News: Grepper is joining You.com. Read the official announcement!

how to play transition when element comes into view css

Poonyapat Pohpon answered on July 17, 2022 Popularity 2/10 Helpfulness 1/10

answer how to play transition when element comes into view css

how to play transition when element comes into view css

Comment

//html
<div class="square-wrapper">
  <div class="square square-transition"></div>
</div>

//css
.square {
    width: 200px;
    height: 200px;
    background: teal;
    border-radius: 8px;
    opacity: 0;
    transform: scale(1.2);
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    transition: opacity 1.5s ease, transform 1.5s ease;
  }
}

.square-transition {
    opacity: 1;
    transform: none;
}

//js
// Remove the transition class
const square = document.querySelector('.square');
square.classList.remove('square-transition');

// Create the observer, same as before:
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      square.classList.add('square-transition');
      return;
    }

    square.classList.remove('square-transition');
  });
});

observer.observe(document.querySelector('.square-wrapper'));

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: css element javascript transition view when

Link to this answer
Share Copy Link

Contributed on Jul 17 2022

Poonyapat Pohpon

0 Answers Avg Quality 2/10

how to play transition when element comes into view css

Contents

More Related Answers

how to play transition when element comes into view css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.