Commencing CSS Animation Post Full Page Loading

I am looking for a solution using WordPress. In my specific case, I want the CSS Animations to take effect only after the page has completely loaded. For example: click here

This is my HTML:

<div class="svg-one">
    <svg xmlns="http://www.w3.org/2000/svg" width="467" height="195" viewBox="0 0 467 195" fill="none">
      <path
        d="M-5.68701 0.4375C-5.68701 0.4375 304.086 30.9591 314.874 120C323.963 194.797 466.079 194.745 466.079 194.745"
        stroke="#1A3D96" stroke-width="0.34" stroke-miterlimit="10" stroke-linecap="round" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="468" height="196" viewBox="0 0 468 196" fill="none">
      <path
        d="M-6.0835 1.08398C-6.0835 1.08398 294.147 28.6178 303.406 117.71C311.193 192.584 467.721 194.851 467.721 194.851"
        stroke="#1A3D96" stroke-width="0.34" stroke-miterlimit="10" stroke-linecap="round" />
    </svg>
  </div>

Here is my CSS:


@keyframes fade-in-left-to-right {
    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

.svg-one {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 25%;
    width: 14%;
}

.svg-one svg {
    position: absolute;
    display: block;
    width: 23vw;
    height: auto;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0.5;
    animation: fade-in-left-to-right 2.5s linear forwards;
    animation-delay: 1.2s;
}

.svg-one svg:nth-child(1) {
    top: 0px;
}

.svg-one svg:last-child {
    top: 70px;
}

Thank you for taking the time to read this. Have a wonderful day!

A function that allows animations to run only after the website has fully loaded.

javascriptcsswordpresssvgcss-animations

Answer №1

To make your animations more organized, create a separate style rule for them:

.svg-one.animate svg {
    animation: fade-in-left-to-right 2.5s linear forwards;
    animation-delay: 1.2s;
}

Once the document is fully loaded, simply apply the animate class to your wrapper element:

addEventListener('load', evt => {
  document.querySelector('.svg-one').classList.add('animate')
})

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

Only one ID is recognized by jQuery

I have a group of three checkboxes set up like this: <input id="image_tagging" class="1" type="checkbox" value="1" checked="checked" name="data[image_tagging]"> Now, I've created an AJAX function (which is functioning correctly), but it seems ...

javascriptjqueryhtml

Utilizing AngularJS: Conditionally rendering ngIf within an array of objects containing unique properties

Facing a challenge with the ngIf directive that I have been struggling to resolve despite trying various solutions. In my scenario, I have an array of objects, each containing different properties. The structure is as follows: object = [ { ...

javascriptangularjsangular-ng-if

Display PHP array information in an HTML table

I am facing an issue with an array that contains a record set generated by the CodeIgniter model. When attempting to display these records in an HTML table using my view, the layout is not rendering correctly. Here is a snippet of my view: <html> & ...

htmlcsscodeigniter

Whenever the page is refreshed, the props in my application are dynamically updated thanks to the getStaticProps function I utilize

Currently, I am in the process of learning nextjs as a beginner. Through the utilization of the getStaticProps function, I have come to understand that data fetching occurs only once at build time and the values remain static thereafter. Despite this, I ...

javascriptnext.js

The div on my webpage is not loading its content as expected when using JavaScript

I am having trouble continuously loading the content of a div from another page. Using alert worked fine, but the page data is not loading. JavaScript <script> $(document).ready(function(){ setInterval(function(){$("#loadAvailable").load("update.p ...

javascriptphpjqueryajax

Run a script tag prior to displaying the modal

Currently, I am attempting to display a bootstrap modal with dynamic content. One of the values being passed to the modal is the HTML that should appear inside it. The issue I am facing is that within the HTML content being passed, there is a script tag t ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to retrieve an element that has been altered in its state?

I encountered a scenario where I want an image to have a border when clicked, and if clicked again, the border should be removed. However, the border should also be removed if another image is clicked instead. I believe there are a couple of approaches to ...

javascriptreactjsnext.js

Error occurs when attempting to reference an object from an NPM package

Currently, I'm attempting to utilize the https://github.com/iamcal/js-emoji library for colon-to-emoji conversion. Following the installation of its NPM package, I included <script src="../node_modules/emoji-js/lib/emoji.js" type="te ...

javascriptnode.jsnpmemojireferenceerror

Implementing a Search Box feature in React-leaflet version 3.1.0

Struggling to incorporate a searchbox feature into my react app. Encountering the error message "Attempted import error: 'MapControl' is not exported from 'react-leaflet'" with the latest version of react-leaflet. import { MapContainer, ...

javascriptreactjsleafletreact-leaflet

Substitute the Iframe element with Ajax technology

Currently, I am working on a project where I want to include previews of various websites within my own website. Right now, I am using Iframes to load the website previews and allow users to interact with them. For SEO purposes, I have decided to replace ...

javascriptjqueryajaxiframe

"Uncaught ReferenceError: $ is not defined in a JavaScript/Vue.js

Currently, I am working on the javascript/vue.js page found at this link. In this file, I have added the following code: $(document).ready(function() { myIP(); }); function myIP() { $.getJSON("//freegeoip.net/json/?callback=?", function(data) { / ...

javascriptjqueryajax

Retrieve the duplicated items from an array by comparing two specific properties in JavaScript

I need assistance in identifying and retrieving duplicate objects within an array that share similarities in 2 specific properties. Consider the object structure below: let arry = [ {Level: "A-1", Status: "approved"}, {Level: &q ...

javascriptarraysangular

looping through a linked data object with ng-repeat

I am working with a Node object in my Angular controller. Each Node contains a next property which points to the next item: $scope.Stack = function () { this.top = null; this.rear = null; this.size = 0; this.max_size = 15; ...

javascriptangularjs

Tips for utilizing CSS to position a semi-circle in the middle of an image

Can CSS create a half circle effect on any image? I want to achieve a half circle effect in an image using CSS. Is this possible or not? ...

css

What is the best method for overlaying text on individual images in a slideshow?

Currently, I am delving into the world of jQuery, experimenting with various slideshows and attempting to incorporate text and effects. In my endeavors, I stumbled upon this codepen that served as an excellent template. However, when I tried adding text o ...

jqueryhtmlcssslideshow

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

I am currently working on a project that involves loading different webpages into a <div> on my page once specific links are clicked. I came across a thread about using jQuery for this purpose, but I'm not familiar with it. Is there a way to ach ...

javascripthtmlcss

Tips on how to make a <li> element float independently without impacting other elements on the page

I have a dilemma with two divs in my HTML code. One is designated for the menu, and the other is simply for the title. The issue arises when I attempt to float the <li> items next to each other within the menu; they end up shifting downwards from the ...

csscss-float

What is the best way to patiently wait for a promise to fulfill, retrieve its value, and pass it to another function?

I am facing an issue with getting the value of stringReply into my app.post method in Express. From what I understand, it seems like the code is fully executed before the promise is resolved, resulting in an undefined value when attempting to log stringR ...

javascriptnode.jsexpressfetchdialogflow-es

Display additional images with "Show More" view

I'm looking to create a view similar to the one shown in this image: https://i.stack.imgur.com/AZf61.png Within my FlatList, all the data is being populated including these thumbnails. These thumbnails are stored in an array of objects where I retri ...

javascriptiosreactjsreact-native

Is there a way to access a component's props within the getServerSideProps() method?

Is there a way to pass parameters to a React component and then access the values of those parameters within the getServerSideProps function of the component? I am utilizing the next framework in React JS. <Menu name={menuName} /> In this example, ...

javascriptreactjsnext.js