Div slide or animate on view when page load

HTML & CSS
,
1

I’d like to use animate.css but I want when I scroll the page then I view the animated div. One more thing is that if I use this class “slideInRight” so I see the horizontal scroll on my browser until div is animate. Thank you in advance!

2

Hi,
On the animate.css example page they have have hidden the overflow on the body element.

body {
    overflow-x: hidden;
}

You would need to do likewise on the container of your animated element.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animate.css - slideInRight</title>
<style>
.wrap {
  overflow-x:hidden;
}
.slideInRight {
  animation-name: slideInRight;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
</style>

</head>
<body>

<div class="wrap">
   <h1 class="slideInRight animated">Animate.css</h1>
</div>

</body>
</html>
1 Like
3

Did you add the web kits for the browser you are using to view your web page?

4

@scoplen10 I didn’t add the web kits I think in animate.css file browser kits are already added.

5

Thank you @Ray.H for your help furhter I want effect something like that https://www.imagetechsolution.com/
divs are animate when you view on scroll. How I can make my div like that?

6

There are a number of libraries that do that task.

https://q42.github.io/delighters/

1 Like
7

@PaulOB as you share a example this is different from this one “https://www.imagetechsolution.com/” can you please tell which animation is this?

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.