Add dynamic animation effects to a section as it comes into view with the power of JavaScript

Question

Add dynamic animation effects to a section as it comes into view with the power of JavaScript

As I continue to learn about web design, I am interested in creating an animation on a div element located in the middle of the page. Most resources I have come across suggest using jQuery for this task. However, I am wondering if it is possible to achieve this with just CSS and JavaScript.

<div>This div contains a lot of content that takes up the entire screen</div>
<div>The animation should occur when this div comes into view</div>

I would greatly appreciate any guidance on whether it can be accomplished solely with JavaScript, and if not, what the simplest approach would be.

javascript html css

Answer 1

Answer №1

I just conducted a search like yours and stumbled upon a purely `js` solution

CHECK THIS OUT

var elements;
var windowHeight;
document.getElementById('content').innerText = "A lot of content to fill up the page. ".repeat(500)

function init() {
  elements = document.querySelectorAll('.noanimfornow');
  windowHeight = window.innerHeight;
}

function checkPosition() {
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var positionFromTop = elements[i].getBoundingClientRect().top;
//console.log(positionFromTop,windowHeight);
    if (positionFromTop - windowHeight <= 0) {
      element.classList.add('animateme');
      element.classList.remove('noanimfornow');
    }
        if (positionFromTop - windowHeight > 0) {/*newly added:Edit2*/
      element.classList.add('noanimfornow');
      element.classList.remove('animateme');
    }
  }
}

window.addEventListener('scroll', checkPosition);
window.addEventListener('resize', init);

init();
checkPosition();

@keyframes myanim {
  from {
    opacity: 0;
    transform: scale(.7, .7)
  }
  to {
    opacity: 1;
  }
}

.animateme {
  animation: myanim 5s;
}
.noanimfornow {
  opacity: 0;
}

<div id="content"></div>

<div class="noanimfornow">Section where animation has to happen when come into view</div>

To trigger animations only on scroll, use the class noanimfornow for the respective div,
In the JavaScript code, we monitor scroll positions and switch classes to animateme when in view,
We also handle resizing events by calling the init function as needed in JavaScript,
Lastly, add some CSS animations for visual effects

Answer 2

I just conducted a search like yours and stumbled upon a purely `js` solution

CHECK THIS OUT

var elements;
var windowHeight;
document.getElementById('content').innerText = "A lot of content to fill up the page. ".repeat(500)

function init() {
  elements = document.querySelectorAll('.noanimfornow');
  windowHeight = window.innerHeight;
}

function checkPosition() {
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var positionFromTop = elements[i].getBoundingClientRect().top;
//console.log(positionFromTop,windowHeight);
    if (positionFromTop - windowHeight <= 0) {
      element.classList.add('animateme');
      element.classList.remove('noanimfornow');
    }
        if (positionFromTop - windowHeight > 0) {/*newly added:Edit2*/
      element.classList.add('noanimfornow');
      element.classList.remove('animateme');
    }
  }
}

window.addEventListener('scroll', checkPosition);
window.addEventListener('resize', init);

init();
checkPosition();

@keyframes myanim {
  from {
    opacity: 0;
    transform: scale(.7, .7)
  }
  to {
    opacity: 1;
  }
}

.animateme {
  animation: myanim 5s;
}
.noanimfornow {
  opacity: 0;
}

<div id="content"></div>

<div class="noanimfornow">Section where animation has to happen when come into view</div>

To trigger animations only on scroll, use the class noanimfornow for the respective div,
In the JavaScript code, we monitor scroll positions and switch classes to animateme when in view,
We also handle resizing events by calling the init function as needed in JavaScript,
Lastly, add some CSS animations for visual effects

Answer 3

Answer №2

This response performs the same function as the previous one, but it utilizes `IntersectionObserver`

Hence, there is "No need to input JS on every scroll." - Comment by A. Haworth

This Code was sourced from this site

I have also incorporated Tschallacka's modification to eliminate copy-pasting (utilizing .repeat(500) in js)

var elements;
var windowHeight;
document.getElementById('content').innerText = "A lot of content to fill up the page. ".repeat(500)

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const square = entry.target.querySelector('.noanimfornow');

    if (entry.isIntersecting) {
      square.classList.add('animateme');
      return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
    square.classList.remove('animateme');
  });
});

observer.observe(document.querySelector('.animwrapper'));

@keyframes myanim {
  from {
    opacity: 0;
    transform: scale(.7, .7)
  }
  to {
    opacity: 1;
  }
}

.animateme {
  animation: myanim 5s;
}

.noanimfornow {
  opacity: 0;
}

<div id="content"></div>
<div class="animwrapper">
  <div class="noanimfornow">Section where animation has to happen when come into view</div>
</div>

Answer 4

This response performs the same function as the previous one, but it utilizes `IntersectionObserver`

Hence, there is "No need to input JS on every scroll." - Comment by A. Haworth

This Code was sourced from this site

I have also incorporated Tschallacka's modification to eliminate copy-pasting (utilizing .repeat(500) in js)

var elements;
var windowHeight;
document.getElementById('content').innerText = "A lot of content to fill up the page. ".repeat(500)

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const square = entry.target.querySelector('.noanimfornow');

    if (entry.isIntersecting) {
      square.classList.add('animateme');
      return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
    square.classList.remove('animateme');
  });
});

observer.observe(document.querySelector('.animwrapper'));

@keyframes myanim {
  from {
    opacity: 0;
    transform: scale(.7, .7)
  }
  to {
    opacity: 1;
  }
}

.animateme {
  animation: myanim 5s;
}

.noanimfornow {
  opacity: 0;
}

<div id="content"></div>
<div class="animwrapper">
  <div class="noanimfornow">Section where animation has to happen when come into view</div>
</div>

Add dynamic animation effects to a section as it comes into view with the power of JavaScript

Answer №1

I just conducted a search like yours and stumbled upon a purely `js` solution

CHECK THIS OUT

Answer №2

This response performs the same function as the previous one, but it utilizes `IntersectionObserver`

This Code was sourced from this site

Similar questions

Prevent any delay between two video segments

Guide for skipping the presentation of data in column1, when column2 contains multiple lines of content

Multiple event listeners on a single button

What is the best way to invoke a Rest API within a Vue component?

How to utilize jQuery to highlight active anchor tag in an ASP.NET environment

What is the best way to create a clickable <li> element from AJAX search results that display dynamic HTML?

Is it possible to filter a single field for two different values in a relationMapping using Objection.js?

Tips for redirecting to the index page instead of the login form after pressing the back button on the navigation

Transmit a combination of selection and text inputs through AJAX to PHP, and then save the data in a

Tips for changing the color of MUI TextField in React.JS?

Invoke a C# instance method from within a static method in Blazor using DotNet.invokeMethodAsync called by JavaScript

Utilize various designs on Bootstrap cards

What is the best way to extract data produced by Javascript and parse it with BeautifulSoup?

What steps can be taken to fix the error message 'Invalid Element Type'?

Generate a dynamic kendo dropdown with data sources assigned in separate methods

Guide to using jQuery to input a multi-line text into a field

Click judiciously on the ng-if directive within AngularJS

Determine the RGB color values for specific coordinates within Adobe Illustrator

This function is functional with jquery version 1.4.2 but encounters issues with jquery version 1.9.1

Expanding the prototype of NodeList

Add dynamic animation effects to a section as it comes into view with the power of JavaScript

Answer №1

I just conducted a search like yours and stumbled upon a purely js solution

CHECK THIS OUT

Answer №2

This response performs the same function as the previous one, but it utilizes IntersectionObserver

This Code was sourced from this site

Similar questions

Prevent any delay between two video segments

Guide for skipping the presentation of data in column1, when column2 contains multiple lines of content

Multiple event listeners on a single button

What is the best way to invoke a Rest API within a Vue component?

How to utilize jQuery to highlight active anchor tag in an ASP.NET environment

What is the best way to create a clickable <li> element from AJAX search results that display dynamic HTML?

Is it possible to filter a single field for two different values in a relationMapping using Objection.js?

Tips for redirecting to the index page instead of the login form after pressing the back button on the navigation

Transmit a combination of selection and text inputs through AJAX to PHP, and then save the data in a

Tips for changing the color of MUI TextField in React.JS?

Invoke a C# instance method from within a static method in Blazor using DotNet.invokeMethodAsync called by JavaScript

Utilize various designs on Bootstrap cards

What is the best way to extract data produced by Javascript and parse it with BeautifulSoup?

What steps can be taken to fix the error message 'Invalid Element Type'?

Generate a dynamic kendo dropdown with data sources assigned in separate methods

Guide to using jQuery to input a multi-line text into a field

Click judiciously on the ng-if directive within AngularJS

Determine the RGB color values for specific coordinates within Adobe Illustrator

This function is functional with jquery version 1.4.2 but encounters issues with jquery version 1.9.1

Expanding the prototype of NodeList

I just conducted a search like yours and stumbled upon a purely `js` solution

This response performs the same function as the previous one, but it utilizes `IntersectionObserver`