Step-by-Step Guide to Autoplay Video or Animation After Scrolling

how to autoplay a video or animation after scrolling back on it

In today’s digital world, videos and animations have become an integral part of our lives. From social media platforms to websites, videos are used to convey messages, engage the audience, and bring a creative touch to the content. But have you ever wondered how to make your videos or animations stand out from the rest? How to grab the attention of your viewers and keep them engaged?

The answer lies in autoplay video or animation after scrolling. Not only does this feature enhance the user experience, but it also keeps them engaged and makes your content more dynamic. In this step-by-step guide, we will explore how to incorporate this feature into your website or blog, and take your content to the next level. So, whether you are a content creator, marketer, or website owner, get ready to take your videos and animations to the next level with this ultimate guide.

Why Autoplay Video or Animation After Scrolling is Important

Autoplay video or animation after scrolling can improve the user experience and help them stay engaged with your content. By incorporating this feature, users do not have to take an extra step to engage with your multimedia content. Additionally, autoplaying video or animation can grab the user’s attention and encourage them to stay on the page longer, potentially increasing the chances of conversion.

How Autoplay Animation After Scrolling Back is Looking Like? Example:

Scroll Down and back up to see the result

Step-by-Step Guide

Step 1: Finding the right script

The first step in implementing autoplay video or animation after scrolling is to find the right script. One popular script that many developers use is the Intersection Observer API. This script triggers an action when an element intersects with a particular area of the viewport. You can use it to trigger autoplay on a video or animation element.

Step 2: Adding the script to your website

Lizardo Agency Step-by-Step Guide to Autoplay Video or Animation After Scrolling 1

Once you have found the script you want to use, you need to add it to your website. There are several ways to do this, but the most common ones include adding the script to your theme’s functions.php file, using a plugin to add the script, or using the Elementor page builder to add the script.

If you want to add the script to your functions.php file, simply open the file and add the following code:

function custom_autoplay_video() {
?>
<script>
const videos = document.querySelectorAll('video');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.play();
    } else {
      entry.target.pause();
    }
  });
});
videos.forEach((video) => {
  observer.observe(video);
});
</script>
<?php
}
add_action('wp_head', 'custom_autoplay_video');

If you prefer using a plugin, you can use a custom code plugin like Code Snippets or insert the script in your theme’s header or footer using the Insert Headers and Footers plugin.

Lizardo Agency Step-by-Step Guide to Autoplay Video or Animation After Scrolling 2

Ready JS Script to Copy and Paste to Simple Custom JS Plugin

jQuery(document).ready(function( $ ){
    
const videos = document.querySelectorAll('video');


const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      
      entry.target.play();
    } else {
      
      entry.target.pause();
    }
  });
});

// 
videos.forEach((video) => {
  observer.observe(video);
});
});

Step 3: Customizing the script

! PLUGIN IS WORKING PROPERLY WITHOUT CUSTOMIZING. It’s working with video formats like .mp4 ! Once you have added the script to your website, you can customize it to suit your needs. For instance, you can change the type of element that triggers the autoplay or adjust the time that the element takes to play.

For example, if you want to autoplay a GIF animation instead of a video, you can replace the video tag with img in the script.

const gifs = document.querySelectorAll('img');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
    } else {
      entry.target.src = '';
    }
  });
}, {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
});
gifs.forEach((gif) => {
  gif.dataset.src = gif.src;
  gif.src = '';
  observer.observe(gif);
});

Step 4: Create the Intersection Observer

The next step is to create the Intersection Observer. This is the feature that will detect when the video or animation is in the viewport and play it.

To create the Intersection Observer, we will use the following code:

const videos = document.querySelectorAll('video');
const animations = document.querySelectorAll('.animation');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      if (entry.target.tagName === 'VIDEO') {
        entry.target.play();
      } else if (entry.target.classList.contains('animation')) {
        entry.target.classList.add('play');
      }
    } else {
      if (entry.target.tagName === 'VIDEO') {
        entry.target.pause();
      } else if (entry.target.classList.contains('animation')) {
        entry.target.classList.remove('play');
      }
    }
  });
});

The code first selects all the videos and animations on the page and stores them in the videos and animations variables. It then creates a new Intersection Observer using the IntersectionObserver constructor.

The callback function for the Intersection Observer takes an entries array as an argument. This array contains all the elements that the observer is watching. For each element, we check if it is intersecting with the viewport. If it is, we play the video or add the play class to the animation. If it is not, we pause the video or remove the play class from the animation.

Note that we use the tagName property to check if an element is a video, and the classList property to check if an element has the animation class. If you have different class names or use a different tag for your videos, you will need to modify this code accordingly.

Step 5: Register the Videos and Animations with the Intersection Observer

The final step is to register all the videos and animations with the Intersection Observer. To do this, we simply loop through the videos and animations arrays and call the observe method on each one:

videos.forEach((video) => {
  observer.observe(video);
});

animations.forEach((animation) => {
  observer.observe(animation);
});

That’s it! Your videos and animations will now play automatically when they come into view.

Adding the Script to Your Website To add the script to your website, you have a few options. If you’re comfortable editing your theme’s functions.php file, you can add the script there. Simply wrap the script in a wp_enqueue_script function like so:

Lizardo Agency Step-by-Step Guide to Autoplay Video or Animation After Scrolling 3
function my_enqueue_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/autoplay.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

This will load the autoplay.js file from your theme’s js directory.

If you prefer to use a plugin, you can install and activate the “Scripts n Styles” plugin. This will allow you to add the script to the head or footer of your website.

How to Add JavaScript using Elementor HTML Widget

If you’re using a plugin like Elementor to build your website, adding the autoplay script can be done with just a few clicks. Here’s how:

  1. Open the page with Elementor editor and navigate to the page where you want to add the script.
  2. Add a new section to the page by clicking the plus icon.
  3. Add a new HTML widget by dragging and dropping the HTML element to the new section.
  4. Paste the script code into the HTML widget.
  5. Save the changes and publish the page.
Lizardo Agency Step-by-Step Guide to Autoplay Video or Animation After Scrolling 4
Lizardo Agency Step-by-Step Guide to Autoplay Video or Animation After Scrolling 5

It’s that easy! With just a few clicks, you can add the autoplay script to your website and enhance the user experience.

Conclusion

Autoplaying videos or animated illustrations after scrolling on it can be a great way to engage your website visitors and keep them on your site for longer. By following the step-by-step guide above, you can easily add the autoplay script to your website and start enjoying the benefits of this feature. Remember to use it in moderation and test it thoroughly to ensure it doesn’t negatively affect your website’s performance or user experience. Happy scrolling!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Dawid Jaloszynski
Dawid Jaloszynski
Dawid Jaloszynski is the Founder & Web Designer at Lizardo Agency. He is also an expert in search engine optimization (SEO). Dawid is passionate about helping businesses succeed online, and he loves seeing the results of his work when a client's website ranks high in search engines.

Leave a Reply

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