https://github.com/shaikrasheed99/scrolling-animation

Animation while Scrolling in website.
https://github.com/shaikrasheed99/scrolling-animation

animations css css-animations html html-css html-css-javascript intersection-observer javascript-intersection-observer

Last synced: 7 months ago
JSON representation

Animation while Scrolling in website.

• Host: GitHub
• URL: https://github.com/shaikrasheed99/scrolling-animation
• Owner: shaikrasheed99
• License: mit
• Created: 2023-02-06T17:06:35.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-04-17T13:13:22.000Z (over 2 years ago)
• Last Synced: 2025-01-13T19:39:04.895Z (9 months ago)
• Topics: animations, css, css-animations, html, html-css, html-css-javascript, intersection-observer, javascript-intersection-observer
• Language: HTML
• Homepage: https://static-scrolling-animation.netlify.app/
• Size: 36.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Animation while Scrolling

Deployed this animation website on [Netlify](https://static-scrolling-animation.netlify.app/).

We can achieve this animation from 3 ways

1. `Animation On Scroll` [library](https://michalsnik.github.io/aos/).

    * it is not updated recently.

    * also adds extra kilobytes to our website bundle. 

2. `scroll-timeline` [css](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline) property.

    * it is not suppported by modern browsers.

3. `IntersectionObserver` api.

    * full support in modern browsers. 

    * very light weight to implement. 

So, we are going to use `IntersectionObserver` api. 

If an element in the DOM is intersecting to the end user viewport, then we can apply a custom css class which will animates into the DOM.

`IntersectionObserver` is a class which takes callback in its constructor. The callback would again accepts multiple entities or elements at a time.

```javascript

const observer = new IntersectionObserver((entities) => {

    entities.forEach((entity) => {

        if (entity.isIntersecting) {

            entity.target.classList.add('show');

        } else {

            entity.target.classList.remove('show');

        }

    })

});

```

* here `show` is a custom css class which would be triggered when the element is intersecting with the viewport.