How do you scroll with animate css?

Question

How TO - Smooth Scroll

Learn how to create a smooth scrolling effect with CSS.

Table of Contents Show

How TO - Smooth Scroll
Smooth Scrolling
Browser Support
Cross-browser Solution
Animate On Scroll Library
Different settings examples
Anchor placement
Install using Yarn, Npm, Bower
CDN sources
Initialize AOS
How do you scroll animation in CSS?
How do I trigger an animation scroll?
How do you scroll in CSS?

Section 1

Click on the link to see the "smooth" scrolling effect.

Click Me to Smooth Scroll to Section 2 Below

Note: Remove the scroll-behavior property to remove smooth scrolling.

Smooth Scrolling

Add scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page (note: it is also possible to add it to a specific element/scroll container):

Browser Support

The numbers in the table specify the first browser version that fully supports the scroll-behavior property.

Property
scroll-behavior	61.0	79.0	36.0	14.0	48.0

Cross-browser Solution

For browsers that do not support the scroll-behavior property, you could use JavaScript or a JavaScript library, like jQuery, to create a solution that will work for all browsers:

Example

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

// Store hash
var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
});
});
</script>

Try it Yourself »

Tip: Read more about the scroll-behavior property in our CSS Reference: CSS scroll-behavior Property.

Animate On Scroll Library

Scroll down

Fade

<div data-aos="fade-up"></div>

<div data-aos="fade-down"></div>

<div data-aos="fade-right"></div>

<div data-aos="fade-left"></div>

<div data-aos="fade-up-right"></div>

<div data-aos="fade-up-left"></div>

<div data-aos="fade-down-right"></div>

<div data-aos="fade-down-left"></div>

Flip

<div data-aos="flip-left"></div>

<div data-aos="flip-right"></div>

<div data-aos="flip-up"></div>

<div data-aos="flip-down"></div>

Zoom

<div data-aos="zoom-in"></div>

<div data-aos="zoom-in-up"></div>

<div data-aos="zoom-in-down"></div>

<div data-aos="zoom-in-left"></div>

<div data-aos="zoom-in-right"></div>

<div data-aos="zoom-out"></div>

<div data-aos="zoom-out-up"></div>

<div data-aos="zoom-out-down"></div>

<div data-aos="zoom-out-right"></div>

<div data-aos="zoom-out-left"></div>

Different settings examples

<div data-aos="fade-up"
     data-aos-duration="3000">
</div>

<div data-aos="fade-down"
     data-aos-easing="linear"
     data-aos-duration="1500">
</div>

<div data-aos="fade-right"
     data-aos-offset="300"
     data-aos-easing="ease-in-sine">
</div>

<div data-aos="fade-left"
     data-aos-anchor="#example-anchor"
     data-aos-offset="500"
     data-aos-duration="500">
</div>

<div data-aos="fade-zoom-in"
     data-aos-easing="ease-in-back"
     data-aos-delay="300"
     data-aos-offset="0">
</div>

<div data-aos="flip-left"
     data-aos-easing="ease-out-cubic"
     data-aos-duration="2000">
</div>

Anchor placement

<div data-aos="fade-up"
     data-aos-anchor-placement="top-bottom">
</div>

<div data-aos="fade-up"
     data-aos-anchor-placement="center-bottom">
</div>

<div data-aos="fade-up"
     data-aos-anchor-placement="bottom-bottom">
</div>

<div data-aos="fade-up"
     data-aos-anchor-placement="top-center">
</div>

<div data-aos="fade-up"
     data-aos-anchor-placement="center-center">
</div>

<div data-aos="fade-up"
     data-aos-anchor-placement="bottom-center">
</div>

Install using Yarn, Npm, Bower

yarn add aos

npm install aos --save

bower install aos --save

CDN sources

CSS

<link href="https://unpkg.com//dist/aos.css" rel="stylesheet">

JS

<script src="https://unpkg.com//dist/aos.js"></script>

Initialize AOS

<script>
  AOS.init();
</script>

How do you scroll animation in CSS?

Scrolling Animation with Vanilla JavaScript.

Setup the Page. First things first, create a web page. ... .

Styling the Page with CSS. ... .

Create JavaScript Functions to Target the Elements. ... .

Animate with CSS. ... .

Final Result..

How do I trigger an animation scroll?

Here's how we'll make our scroll-triggered event.

Create a function called scrollTrigger we can apply to certain elements..

Apply an .active class on an element when it enters the viewport..

Animate that . active class with CSS..

How do you scroll in CSS?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.