CODEWITHSUNDEEP
javascripthtmlcss
Pranay Majee
Pranay Majee

Reputation: 17

How to animate elements when it completely enters the viewport?

I made an animation to the h1 element using CSS, now I want the animation to occur when the h1 element comes into the viewport completely when the user scrolls down.

By the time the user scrolls down the page, the animation has already occurred.

I want the animation to occur only when the h1 element enters the viewport by adding the class .showtext to the span element.

Cannot set up a proper intersection observer, plz help

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.text {
    display: inline-block;
    overflow: hidden
}

.page1{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.page2{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.showtext{
  display: block;
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

@keyframes reveal {
  0% {
    transform: translate(0,100%);

  }
  100% {
    transform: translate(0,0);
  }
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LNPD02</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>

    <div class="page1">
      <h1>Scroll down</h1>
    </div>

    <div class="page2">
      <h1 class="text"><span class="hidetext showtext">Animated Text</span></h1>
    </div>

  </body>

</html>

Upvotes: 1

Views: 2669

Answers (1)

Rohithaditya
Rohithaditya

Reputation: 140

You can check it with javascript. A function is triggered every time the user scrolls the page. If the element's position is greater than the screen's top and less than the screen's bottom that is in the viewport, toggle the classes to make the animaiton.

var text = document.querySelector('.text')
function scrolListener(e){
  var screenTop = document.scrollingElement.scrollTop;
  var screenBottom = screenTop + innerHeight;
  var textTop = text.getBoundingClientRect().top
  
  if ( textTop < screenBottom && textTop < screenTop)
  {
    text.children[0].classList.add("showtext");
    text.children[0].classList.remove("hidetext");
  }
  
}


document.onscroll = scrolListener
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  display: inline-block;
  overflow: hidden;
}

.page1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.page2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text span {
  transition: .3s;
}


.showtext {
  display: block;
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.hidetext {
  opacity: 0;
  transform: translate(0, 100%);
}


@keyframes reveal {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LNPD02</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>

  <div class="page1">
    <h1>Scroll down</h1>
  </div>

  <div class="page2">
    <h1 class="text"><span class="hidetext">Animated Text</span></h1>
  </div>

</body>

</html>

Upvotes: 2

Related Questions