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

Checking if the group of radio buttons has been selected using JQUERY

Need help with validating a group of radio buttons. If none are checked, display an error message in the span element to prompt users to select an option. The strange issue I am facing is that the validation code works only when placed below the radio butt ...

javascriptjqueryhtml

Vue.js axios method returns undefined; v-for directive fails to iterate - Issue on Wordpress site

Using a shortcode, I have integrated Vue.js into a Wordpress page. pl2010_vue_init_directory = pl2010_vue_init_directory || (function(ctx) { new Vue( { el: '#'+ctx.el, data: { errorMsg: "", successMsg: "", show ...

javascriptwordpressvue.jsvuejs2axios

The readyState is stubbornly refusing to reach 4

I have been working on developing a dynamic AJAX search bar that interacts with my database. Below is the code I have been using. function getXmlHttpRequestObject(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } else if (window.ActiveXObj ...

javascriptajaxsearchreadystate

Cypress - A Guide to Efficiently Waiting for the Outcome of a Javascript Function Import

I am interested in creating a Javascript library to act as a wrapper for 3rd party APIs. I have decided to write the API wrapper as a standalone file rather than using Cypress Custom functions, so that I can share the library with teams who are not using C ...

javascriptnode.jscypress

Attempting to store an array of JSON objects in the state, and then utilizing the `map` method to render

I'm just starting out with React. Currently, I'm attempting to store an array of JSON objects in the state and then map those items into the component render. I'm feeling a bit lost on how to debug this as there are no console errors showi ...

javascriptreactjsaxios

When the JavaScript string retrieved from the database is null, it will be displayed as an empty string

Currently, my Ajax setup involves querying a database on the server with SELECT someColumn FROM someTable. The returned value of someColumn is then updated on the client side by using $('#someElement').text(someColumn); Everything works perfectl ...

phpjavascriptjquerymysqlajax

403 Error Code - Access Denied when trying to access Cowin Setu APIs

While attempting to create a covid vaccine alert using the Cowin Setu API (India) in nodejs, I encountered a strange issue. Every time I send a get request, I receive a 403 response code from cloudfront stating 'Request Blocked', although it work ...

javascriptnode.jsexpressamazon-cloudfrontrest

Issue with Displaying Background Image

When trying to set my background image on CDM using document.body.style={mainBg}, I am not getting the expected result. Additionally, the console statement below it is printing out an empty string. Can anyone assist me in identifying what mistake I might b ...

cssreactjs

Placing text at the bottom of a backdrop image

Looking for a way to position text at the bottom of a background image? Here's how you can do it: <div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px"> ...

htmlcss

Adding the tasksMap to the dependency array in the React useEffect hook will result in an endless loop

I'm facing an issue with adding tasksMap to the useEffect dependency array, as it causes an infinite loop. Can someone guide me on how to resolve this? To ensure that the user sees an updated view of tasks that are added or modified, I need the app to ...

javascriptreactjsreact-hooks

Ways to properly release file descriptors in write streams

I'm currently working on a code snippet that showcases what I'm aiming to achieve: const fs = require('fs'); var stream = fs.createWriteStream('/tmp/file'); stream.once('open', function(fd) { for (var i = 0; i ...

javascriptnode.js

Using browser's local storage: deleting an entry

I recently came across a straightforward to-do list. Although the inputs are properly stored in local storage, I encountered issues with the "removing item" functionality in JS. Even after removing items from the HTML, they still persist in local storage u ...

javascript

Electron experiences a crash while attempting to execute an HTTPS request within an addeventlistener callback function

In the process of creating a simple Electron application that facilitates user login into a system, I encounter an issue. The app collects the username and password entered by the user through form text inputs. Upon clicking the "login" button, the program ...

javascriptnode.jshttpscrashelectron

Send the data to be placed in the div to launch the window

I'm attempting to open a new window within the same tab and transfer some html code to be inserted into a specific div section of the newly opened window. However, I'm encountering difficulties in passing the data as illustrated below: JavaScrip ...

javascripthtml

Challenges faced with dividing a string in JavaScript

Having trouble splitting a string in JavaScript, I can't seem to make it work. This is the JavaScript code I am using: var str = 'TestApplication20 Application200'; var parts = str.match(/(\d+)(\D.+)/).slice(1); var id = parts[0 ...

javascriptjquery

Utilize the power of React and Framer Motion to create a visually stunning fade

After creating a preloader that appears when the variable "loading" is set to true, I now want the loader to fade out. This is an overview of my files: On the home page with all the content: return ( <> {loading ? ( ...

javascriptreactjsframer-motion

Unable to replicate the functionality of the tab key using jQuery for the enter key

How can I focus on the first input ('Qtd on the table') after pressing enter on the 'Buscar' input? I've tried various solutions like $(this).nextAll('input').first().focus(); $(this).next('input:text').focus ...

javascriptjqueryhtml

A guide on utilizing the React Suite range slider in rsuite

Hello there, I recently started working with the UI framework rsuite (React suite) and everything was going smoothly until I tried to use the Range slider component's API. Unfortunately, I am facing some issues with the labels and tooltips not display ...

javascriptreactjsnext.jsrangesliderrsuite

Display the Bootstrap datepicker within an h4 element set to default to today's date, utilizing both Angular and jQuery

Utilizing Boostrap datepicker to obtain the selected date from the calendar and insert it into an <h4> html tag. However, my goal is to display today's date by default in the h4 when it opens for the first time. Using angular.js + jquery f ...

javascriptjqueryangularjsdatepicker

Alignment of containers on the same level in a horizontal direction

Looking to achieve horizontal alignment of div containers. The container on the left (with a blue border) may have a fixed height. The other two containers (with red borders) should be aligned horizontally to the left blue container regardless of its heigh ...

htmlcsstwitter-bootstrapflexbox