Initiate an animation in Wordpress once the entire page has finished loading

Recently, I incorporated some "raw html" elements with animations into my WordPress site. However, the issue I'm facing is that these animations kick off as soon as the page loads, without waiting for the preloader to complete and display the actual content.

I'm still unclear on whether or not the preloader ceases once the page has finished loading. I have a feeling that the page continues to run additional processes even after it's fully loaded.

Being relatively new to WordPress (and inexperienced in JavaScript), I haven't touched any of the core PHP or JS files directly. Instead, I've been simply utilizing the "RAW HTML" element for this purpose.

Any insight would be greatly appreciated!

javascriptcsswordpressanimation

Answer №1

If you're not too keen on diving into coding, I recommend exploring plugins like AniJS in conjunction with ScrollReveal.

These plugins can be applied to any tag on your website (such as body, p, div, etc).

data-anijs="if: DOMContentLoaded, on: window, do: yourAnimation animated, before: scrollReveal, after: holdAnimClass"

The DOMContentLoaded event (and other loading options) verifies if the browser has finished loading the entire page before triggering the animation on scroll (you can also opt for no scroll effect by removing "before: scrollReveal"), and then retains the animation class to prevent it from looping endlessly.

Answer №2

Insert your animation JavaScript code here

$( document ).ready(function() {
  // Code inside this function will be executed when the DOM is fully loaded
});

This function executes when the entire document has been loaded.

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

disappearance of background image at bootstrap breakpoint

Hey there, I'm diving into a new journey in web design and I've encountered my first newbie issue. I'm attempting to place an image and text side by side on my web layout, but as soon as the breakpoint hits below 560px, the image disappears ...

htmlcssimagebootstrap-5

problem encountered when loading an HTML file within another HTML file using AJAX

By clicking a button, I successfully loaded a full HTML page (refer to the structure below) into another HTML page. <!--START:HTML to be loaded by ajax--> <head> <!--START: The content inside this head tag is not processed while the pag ...

javascriptajaxcross-browsersafari

What are some ways to prevent manual page reloading in Node.js when using EJS?

Currently, I am utilizing Node as a server and frontend in EJS. My project involves working with socket.io, which is why it is essential that the page does not refresh manually. If a user attempts to reload the current page, the socket connection will be d ...

javascriptjquerynode.js

Transferring data from an Angular variable to an Express backend using a POST request

req.body seems to be coming up empty for me. I've tried adding content-type headers as json, but it's not making a difference. Can anyone point me in the right direction? Thank you. UPDATE: Just to clarify, my Angular frontend is successfully hi ...

javascriptangularjsnode.jsexpress

Automatically close the menu in ReactJS when transitioning to a new page

I have created a nested menu, but I am facing an issue with it. Here is the structure: Parent_Menu Parent1 > Child_Menu1 > Child_Menu2 Parent2 Currently, when I click on, for example, Child_Menu1, I am redirected to the correct page ...

javascriptreactjsreactstrap

Dilemma of interdependencies between Socket.io and requirejs

I am facing a challenge with my legacy express project that has two servers. The project includes two separate client files: requirejs.config({ baseUrl: '/js' , paths: { "jquery": "lib/jquery/jquery-2.1.1.min", "socket.io" : "lib/socket/ ...

javascriptnode.jssocket.iorequirejsace-editor

embedding fashion within offspring component in vue

Looking to apply inline styles to a child component? I am trying to pass properties like height: 200px and overflow-y: scroll. I attempted passing it this way: <Childcomponent style="height: 200px; overflow-y: scroll;" /> but had no luck. ...

javascripthtmlcssvue.js

Sequence jQuery functions so that each one only runs when the previous one has finished

I want to have more control over the order of my functions in jQuery. When I click on an element, I would like an image to fade out, change its source, and then fade in the new image. The code I currently have kind of works, but it performs all these acti ...

javascriptjquery

Having trouble with Angular redirecting to the home page?

Having a bit of trouble: core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Unable to match routes. URL Segment: 'home' This is the code snippet from view.html: <div class="container"> This serves as the main app; <a rou ...

javascriptangularjsimportangular-routing

Need help with resetting a value in an array when a button is clicked?

Using Tabulator to create a table, where clicking on a cell pushes the cell values to an array with initial value of '0'. The goal is to add a reset button that sets the values back to '0' when clicked. component.ts names = [{name: f ...

javascriptangulartypescripttabulator

The most lightweight scraper for individual website pages

There is a certain website that constantly updates its data. Unfortunately, there is no API available to access this information programmatically in JavaScript, which presents a common challenge for me. To tackle this issue, I have created a simple JavaSc ...

javascriptajaxxmlhttprequest

There is an issue with my HTML due to a MIME type error

I am currently facing an issue with my project. I have developed a node js server and now I want to display an HTML file that includes a Vue script loading data using another method written in a separate JS file. However, when I attempt to load the HTML f ...

javascripthtmlnode.jsvue.js

What is the method for duplicating the HTML code of multiple elements in the Chrome console?

Is there a way to easily copy all the HTML code from elements that have the "abc" class? I attempted using $('.abc') in the Chrome DevTools console, but it only returns an array that I can't expand and copy all at once... Any suggestions on ...

javascriptjquerygoogle-chrome

Is your preference selecting made a breeze by dragging the input field?

Looking to create a form that allows users to indicate their preference between Option A and Option B by dragging a slider. I know there must be a library out there that already does this, but I can't seem to figure out what it's called to searc ...

javascriptjquery

What steps do I need to take in order to generate a legitimate link annotation within Adobe Acrobat by utilizing Acrobat

Seeking guidance on how to embed an Acrobat Javascript within Adobe Acrobat in order to generate a link annotation. The current method involves using the "addLink" function within the document object, which triggers a Javascript action upon clicking the li ...

javascriptpdfacrobatacrobat-sdk

Testing API route handlers function in Next.js with Jest

Here is a health check function that I am working with: export default function handler(req, res) { res.status(200).json({ message: "Hello from Next.js!" }); } Alongside this function, there is a test in place: import handler from "./heal ...

javascriptunit-testingjestjsnext.js

The markerwithlabel feature failed to appear on the Google Map when using MeteorJS

I am encountering an issue with markerwithlabel not displaying on Google Maps in MeteorJS. I am using dburles:google-maps and markerwithlabel v1.1.9, but I can't seem to integrate them properly. Despite placing markerwithlabel.js in the public folder, ...

javascriptgoogle-mapsmeteorgoogle-maps-api-3reactjs

Display HTML content generated by JavaScript in the page source

Can the HTML elements I've added through JavaScript and jQuery codes be displayed in the page source (ctrl+U)? ...

javascriptjqueryhtml

What are the benefits of keeping JavaScript and HTML separate in web development?

Recently, I came across the concept of Unobtrusive JavaScript while researching best practices in the realm of JavaScript. One particular point that grabbed my attention was the idea of separating functionality (the "behavior layer") from a web page's ...

javascripthtmlangularjs

Chart featuring top corners smoothly rounded off for a unique doughnut design

I've been attempting to create a D3.js chart similar to the one shown in the first screenshot: While I can easily replicate a chart like the second screenshot using the default examples, the challenge arises when I try to round only the top corners o ...

javascriptd3.jschartsvisualization