Activate SVG graphics upon entering the window (scroll)

Can anyone assist me with a challenging issue? I have numerous SVG graphics on certain pages of my website that start playing when the page loads. However, since many of them are located below the fold, I would like them to only begin playing (and play once) once they scroll into view.

Despite extensive research and hiring a freelancer for help, I have not been able to find a solution. The unique aspect of my SVGs is that they use @keyframes and consist of multiple paths that play sequentially, which may be causing other solutions to fail. The reason for having multiple paths is because it creates a calligraphic arrow shape that overlaps upon reveal through the SVG mask.

The HTML code for one of the SVGs (enclosed in a DIV for responsiveness):

<div id="arrow-1id" class="arrow-1 leftarrows">
  <!--START ARROW 1-->
  <svg id="arrow1svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436.55 256.959">
                        
                        <mask id="arrow1-mask1" maskUnits="userSpaceOnUse">
                        <path d="M4.537,54.288
                            c96.333-80.667,213.667,135.333,90.667,96.333"/>
                        </mask>
                        
                        <mask id="arrow1-mask2" maskUnits="userSpaceOnUse">
                        <path d="M100.87,156.955
                            c-29.667-100.667,29.666-152,78.333-146.667s151.667,255.667,29.667,234"/>
                        </mask>
                        
                        <mask id="arrow1-mask3" maskUnits="userSpaceOnUse">
                        <path d="M214.87,248.956
                            c-53.667-43.667,15.334-337.334,195.667-169.667"/>
                        </mask>
                        
                        <mask id="arrow1-mask4" maskUnits="userSpaceOnUse">
                        <path d="M322.203,53.955c108.667,43,117,69.09,68-53.955"/>
                        </mask>
                        
                            <path mask="url(#arrow1-mask1)" fill="#42A8FC" d="M98.168,50.639C66.146,29.84,27.535,21.405,0.142,44.781c-1.983,1.692,17.501,16.275,21.915,12.509
                            c21.17-18.066,49.736-15.119,72.854-0.936c11.126,6.518,19.094,15.658,19.094,15.658c8.426,9.078,14.961,19.84,18.385,31.416
                            c4.701,15.891,0.705,30.535-10.91,41.153c-0.855,0.782-1.803,1.409-2.783,1.981c-0.01,0.004-6.326,4.56-16.162,2.465l-6.889,7.466
                            c9.913,8.681,22.827,13.119,36.498,7.999c43.123-16.156,23.759-65.003-14.488-98.967C117.654,65.526,108.286,57.122,98.168,50.639z"/>
                            
                            <path mask="url(#arrow1-mask2)" fill="#42A8FC" d="M231.959,50.614c-17.516-25.197-43.061-49.605-73.761-50.592c-20.618-0.664-34.757,13.81-44.931,27.774
                            c-5.189,7.124-10.349,14.789-15.1,22.843l-3.258,5.715C84.467,75.328,76.75,96.273,76.766,117.7
                            c0.01,13.138,7.45,28.785,18.879,38.794l6.889-7.466c-0.658-1.355-1.329-2.721-1.771-4.061
                            c-7.573-22.907,0.716-49.699,13.241-72.955l3.65-6.486c7.376-12.557...

I am yet to incorporate any JavaScript as none of the codes I tested yielded successful results.

javascripthtmlcsssvg

Answer №1

To make this work, you can start the animation by applying a specific class (e.g., `.play`) to the container with the ID `#arrow-1id`. Then, use JavaScript to detect when the container appears on the screen. Once it does, simply add the `.play` class to the container:

var body = document.getElementsByTagName("body")[0];
var div = document.getElementById("arrow-1id");

body.onscroll = function() {
  if (document.documentElement.scrollTop >= div.offsetTop - 200) {
    div.classList.add("play");
  }
};
body {
  height: 2000px;
}

#arrow-1id {
  margin-top: 400px;
  background-color: lightgrey;
}

.play #arrow1-mask1 path {
  fill: none;
  stroke: white;
  stroke-width: 39;
  stroke-dasharray: 265.809 265.809;
  stroke-dashoffset: 0;
  animation: brush1a 2s linear;
  animation-fill-mode: forwards;
}
...and so on
<div id="arrow-1id" class="arrow-1 leftarrows">
  ... SVG paths and elements here ...
</div>

Answer №2

I attempted this solution and found that it functions successfully, however, it appears to only be compatible with Firefox. Are there any alternatives for other browsers?

<script type="text/javascript">
    
    var diva2 = document.getElementById("arrow-2id");
    
    window.addEventListener("scroll", function() {
        if (document.documentElement.scrollTop >= diva2.offsetTop - -500) {
            diva2.classList.add("play");
        }
        
    });
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the size and adding ellipsis to the <td> component within a table

How can I set a fixed width for td elements in a table and use text-overflow: ellipsis to truncate the text inside the cells? I have attempted various methods without success. Can someone provide guidance on how to achieve this? <table> <tr& ...

htmlcsshtml-table

Combining data from various JSON files to create dynamic charts with Highcharts

At this moment, my Highchart code is set up in a way where I want to replace the static data-series values within the HTML file with information loaded from a JSON file. The current code appears as follows: <!doctype html> <script type="text/jav ...

javascriptjqueryjsonhighchartsgetjson

I'm looking to add autocomplete functionality to a text input in my project, and then retrieve and display data from a MySQL database using

Looking to enhance user experience on my form where users can select inputs. Specifically, I want to implement a feature where as the user starts typing in a text input field with data from a MYSQL database, suggestions will be displayed. The form is locat ...

javascriptmysqlnode.jsexpressejs

What is the process for adding parameters to a Fetch GET request?

I have developed a basic Flask jsonify function that returns a JSON Object, although I am not certain if it qualifies as an API. @app.route('/searchData/<int:id>',methods=["GET"]) def searchData(id): return jsonify(searchData(id)) Curr ...

javascriptvue.jsflaskrestful-url

What is the best way to combine two nearly identical arrays/objects using underscorejs or a similar library?

In the realm of lists, there exists an old list and a new one. The mission at hand is to combine both, even in the presence of newly added key-value pairs. var oldList = [{ id: 1, name: 'Michael', sex: 'male', goodlooking: 1 }, ...

javascriptarraysobjectunderscore.js

Resolving issues with CSS placement and resizing

I have been considering developing a UI toolkit that offers an intuitive and powerful way of setting the position and size of elements/widgets. Here are some examples of how it could be used (although they are not currently implemented): ui("Panel").size( ...

javascriptcssuser-interface

My Node setup is not displaying my scene with the THREE.js Software Renderer

Struggling to incorporate 3d graphics into Node.js environment, I stumbled upon the Software Renderer after exhaustive research. The renderer is up and running, but I am facing difficulties in rendering my scene. The issue lies in the fact that my 3d obje ...

javascriptnode.jsexpressthree.jswebgl

Console.log is not visible to jQuery's getJSON function

Currently, I am utilizing the getJSON method as shown below: $.getJSON("js/production-data.json").done(function(response) { console.log(response); console.log('hello'); }); While monitoring Firebug, the data retrieval process seems to ...

javascriptjqueryjsongetjson

React Quill editor fails to render properly in React project

In the process of developing an application in Ionic React, I am in need of a rich text editor that can save data on Firestore. Despite initializing the editor as shown below and adding it to the homepage component, it is not rendering correctly although i ...

javascriptreactjstypescriptionic-frameworkquill

Incorporating Masonry-inspired images into a website's design section

I have been working on incorporating a masonry layout of images into my website, but I am facing alignment issues. The images are simply stacking on top of each other instead of creating the desired masonry effect. Are there any tips on how to create a mas ...

htmlcssmasonry

Alter information exclusively when the user is actively viewing my webpage

It's funny how Facebook used a similar technique in the past, Imagine you opened facebook.com, scrolled through your feed for a bit and then decided to open a new tab to read some news. Even though there were updates on your Facebook feed while you w ...

javascriptajaxfacebook

Tips for narrowing down the type of SVG elements in a union

In my React project, I am facing an issue where I need to set a reference to an svg element that could be either a <rect>, <polygon>, or <ellipse>. Currently, I have defined the reference like this: const shapeRef = useRef<SVGPolygon ...

reactjstypescriptsvg

Steps for applying background color to a chosen element

Using a specific template, I have listed topics in the following way: //Template used for topic list display %li.topic{:topic_slug => "<%=topic.slug%>", :topic_name =>"<%=topic.text%>"} %a{href: "#!/topics/<%=topic.slug%>" } <%= ...

javascriptjquerycssbackgroundhaml

Issues with PHP ajax causing database insertion failure

Here is the code for making an AJAX request: AJAX var date = new Date().toLocaleTimeString(); var text=this.value; var id=1; $.ajax({ type: "GET", url: "StoreMessages.php" , data: { room: id, msg:text, sendat:date } }); PHP Code if(isset($_GET['r ...

javascriptphpajaxmysqli

Tips for choosing a href link from a JSON data structure

I'm struggling with JSON. I have a JSON object that looks like this: {main: "<a href="www.google.com"><img src="google_logo.png"></a>"} This is just a small part of my code. For example, I access the "main" object with json.main an ...

javascriptjqueryjson

Is there a way to update a single element within an array without triggering a refresh of the entire array?

Is there a way to prevent the component from rerendering every time new data is input? I attempted to memoize each cell but I am still facing the same issue. Any suggestions on how to accomplish this? import React, { useState, memo } from "react&quo ...

javascriptreactjsnext.js

Make sure that a specific script is loaded prior to another script

I'm struggling to understand how scripts are loaded on a page. I have jQuery plugins that rely on other scripts. Specifically, I am using the timeago jQuery plugin. I have loaded these scripts in the head in the following order: <script src="< ...

javascriptjqueryajaxtimeago

Having trouble loading the DOM element within the child component

An issue has arisen with Angular 4.4.6 regarding the access of a DOM element by ID from a different component. Within my component, I aim to display a Google Maps for specific purposes. Following the examples given in the API, I include the following code ...

javascriptangulargoogle-maps-autocomplete

Node.js: Experiencing HTTP request timeout issues lasting for over a minute

Using Node.js (version 0.10.28), I encountered an issue when making an http.request to my Ruby API for a large amount of data. The request seems to time out and return a 404 error after only 1 minute. Interestingly, when using other methods like wget or jQ ...

javascriptnode.jsexpressconnection-timeout

Retrieve the current time of day based on the user's timezone

Currently, I am working with a firebase cloud function that is responsible for sending push notifications to my app. My main requirement is to send notifications only during the day time. To achieve this, I have integrated moment-timezone library into my p ...

javascriptnode.jsdatetimezonegoogle-cloud-functions