Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Animate Content On Scroll with CSS Library

Ashfaq Ahmed by Ashfaq Ahmed
December 11, 2019
in CSS Animation
2
Animate Content On Scroll
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

Have you tried different tutorials to animated content as you scroll up and down a page? No Luck? Behold, the CSS On Scroll library is just what you are looking for! In this tutorial, I’ll animate content on scroll using CSS.

You have seen many long page templates where different kinds of animation are applied to content elements as you scroll down.

Today, we have an AOS CSS plugin that makes it’s super easy to handle different animation by using its class with full control over the elements.

The plugin work in a simple way. You only require to apply the different classes to the content div element. It will trigger animation as you scroll up or down.

You don’t need to write the bunch of keyframes coded from scratch. All you have to apply classes according to the type of animation you need for a specific element.

This Library has two great features which allow you to add your own animation easily. You can change the things according to the viewport.

  • It has all the logic inside the JavaScript.
  • All the animation in the stylesheet.

The AOS library simply watches all the elements and their position based on the settings you provide them. Then it will add or remove the class aos-animate. Of course, Practically its not so easy but AOS make it simple for you.

Basic Usages

It’s easy to implement the library on any kind of website. You need to add styles in <head> to get started. The plugin gives you CDN sources if you don’t want to load them from your server.

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

Next step to add script right before closing </body> element. To initialize AOS Animate on Scroll library, Just define it’s init function.

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
    AOS.init();
</script>

AOS plugin offers you variety of option which you can easily configure to handle the way of working elements. You can change them according to your requirements.

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  
  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

HTML for Animate Content

The markup is simple. just define an HTML element (mostly div) and add a data-aos attribute. Then you can specify the animation class name that you would like to use.

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

Further customization, you can adjust its behavior by using data-aos-* attributes. Let’s find the full list of all animation, easings and anchor placements.

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

If you want data-aos-* attributes behavior similar way on all of your page elements then you can define them as globally inside of adding them with each element separately.

Example Animations in CSS

You don’t need to write your own CSS. Just pick and apply classes. There are a lot of animations included in the library which you can be use.

But if you want to create custom one, you can easily do that. Its simple and easy to create new one as:

[aos="my-new-animation"] {
  opacity: 0;
  transition-property: opacity;
}

[aos="my-new-animation"].aos-animate {
  opacity: 1;
}

No need to worry about duration or delay because they are already in the aos.js library. In the CSS, you only:

  • Just define the styles for the attribute aos with the name of you animation.
  • Next, set the transition-property (by default this is all, so it’s more performance and more predictable if you narrow the transition to the intended properties)
  • Finally, add the post-transition properties on .aos-animate

That’s Done! Are you able to animate content on scroll? Let me know by comment below if you learned something new and will surely implement this awesome simple library into your web page.

Tags: Scroll Animation
Demo Download
Previous Post

CSS Flip Background Image Vertically & Horizontal

Next Post

CSS Slide Down Animation On Click

Next Post
CSS Slide Animation On Click

CSS Slide Down Animation On Click

Comments 2

  1. Philip Gonzales says:
    2 years ago

    I’m excited to use AOS for effects on my web site. I’m using Dreamweaver to develop it. Here’s a glitch that I need advice on. I’m simply trying to get images to fade in as I scroll and they appear. When I implement this:

    the image fades in, and then disappears.

    Any suggestions?

    Reply
    • Muhammad Asif says:
      2 years ago

      Hi Philip Gonzales!
      Please make sure you have correctly implemented the code. Try to use the animation once by passing the “true” value in “data-aos-once” attribute or in configuration options.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.