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

The HTML div captured with html2canvas is incomplete

I am currently developing a meme editor website utilizing the html2canvas library available at Below is the HTML code for the div I aim to capture: <div class="container"> <div id="theUserMeme"> <div class=& ...

javascripthtmlhtml2canvas

Is there a way to highlight today's working hours with a different color using Vue.js?

Here is the script I have created to display the working hours: const workHour = "Monday :9:00AM to 5:00PM,Thursday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM ...

javascriptvue.jsvue-component

How can I protect my jQuery script from being accessed by "FIREBUG"?

I was tasked with creating a jQuery script as follows: function DeleteFile(_FileID) { //ajax method to delete the file } The FileID is stored in the 'rel' attribute of the list. However, when I call "DeleteFile" from Firebug using the fileId ...

javascriptjquerysecurityfirebug

Using AJAX to call a PHP function within a PHP script

I have successfully implemented an AJAX file that can execute content from a PHP file. However, my concern is how to specifically call a particular function within the PHP file if there are multiple functions present. Below is my current AJAX code: $(doc ...

javascriptphpajax

Tips for choosing the following row in an Angular user interface grid

How can I deselect the currently selected row and select the one that follows it by clicking a button? I am using AngularHotkeys.js for this purpose. It gets even more complicated because I can sort the table with different columns. It would be helpful to ...

javascriptangularjs

Problem with sortable columns in DataTables

$(document).ready(function () { var dt = $('#example').DataTable({ "processing": true, "serverSide": true, "ajax": "api.php?t=clients", "columns": [{ "className": "details-control", ...

javascriptphpjquerydatatable

How to use getServerSideProps in Next.js

In my current scenario, I find myself within a folder in the pages directory, specifically in a file named [id].jsx. My goal is to make getServerSideProps return just the name of the page, for example /page/id123 should return id123. import Link from &a ...

javascriptreactjsnext.js

React.Children does not reveal the presence of any offspring

I am looking to implement react-native-maps-clustering in my project. However, this library only accepts markers that are direct children of the maps component. An example of how it should be structured: <MapView> <Marker/> <Marker/> ...

javascriptreactjsreact-nativereduxreact-redux

How to Align Items Horizontally in React Material UI Grid for Containers of Varying Item Counts

I've been utilizing the React Material UI Grid System to arrange my elements on the page, which utilizes flexboxes internally. While everything is functioning properly, I'm struggling with horizontally aligning items in containers that have vary ...

htmlcssreactjsflexboxmaterial-ui

Issue encountered while utilizing property dependent on ViewChildren

Recently, I designed a custom component which houses a form under <address></address>. Meanwhile, there is a parent component that contains an array of these components: @ViewChildren(AddressComponent) addressComponents: QueryList<AddressCo ...

javascriptangularangular2-templateangular2-forms

This error message in AngularJS indicates that the argument 'fn' is not being recognized as a function

I am currently working with angularjs and typescript and I am attempting to create a directive in the following manner: Below is my controller : export const test1 = { template: require('./app.html'), controller($scope, $http) { ...

javascriptangularjstypescriptdirective

What could be the reason for the electron defaultPath failing to open the specified directory?

Hi, I'm experiencing difficulties opening the directory path (/home/userxyz/Releases/alpha) using electron. This is what I have attempted: I have a similar path on Ubuntu: /home/userxyz/Releases/alpha When trying to access this path with the fo ...

javascriptnode.jselectron

Store the current function in the cache, incorporate new features, and execute those additions upon calling another function

I have a pre-existing function that I am unable to directly access or modify. Due to this limitation, I have resorted to caching the function and incorporating additional functions alongside it. This function loads periodically, sometimes occurring on pag ...

javascriptjquery

What is the best way to upload an image along with optional information using multer?

How to send a File object from the frontend using React and FormData Output of files Upon uploading a file, I am able to access the object in Multer and Express-Upload console.log(req.files.productImages) [{ "name": "galaxy-1.jp ...

javascriptnode.jsreactjsexpressexpress-fileupload

Different ways to dynamically change tailwind colors during execution

Utilizing tailwind v3, it's feasible to customize existing colors by modifying the tailwind.config file. https://tailwindcss.com/docs/customizing-colors module.exports = { theme: { extend: { colors: { gray: { ...

javascripttailwind-csstailwind-uitailwind-in-js

Can a submit button be created that integrates both a radio button and submission functionality?

Is there a way to combine a radio button and submit button into one element for submitting the value just with a click? Currently, I have a radio button and a separate submit button in my code, but I want to streamline it. This is the current code snippet ...

htmlcssforms

Removing an embedded document from an array in MongoDB using Mongoose when the document's status is set to false

I am in desperate need of a solution for this mongoose-related issue. My tech stack includes Express, Mongoose, and GraphQL. To give you some context, I have two collections: users and groups. user { name: string, groupAsMember: [groups], status: bo ...

javascriptexpressmongoose

Obtain a variety of selections for multiple selects and individually incorporate them into a standard select menu

Is there a way to select multiple options from a list and add them to another list without losing any selections? Currently, when I add two selected options, they combine into one in the target list. Check out this JSFIDDLE EXAMPLE for reference. Here is ...

javascriptjquery

Efficient PHP caching solution for optimizing JavaScript and CSS performance

I'm facing a unique challenge that I can't seem to solve through typical Google searches. I'm in the process of consolidating all my javascript and css into separate php files using require_once() to pull in the content. The structure of my ...

phpjavascriptcsscaching

The style attribute is triggering an error stating that 'Every child in a list must possess a distinct "key" property.'

Can anyone explain why I'm encountering an error when storing JSX code in a variable like this? const centerStyle = {textAlign: 'center'}; viewState.myContent = ( <Fragment> <p style={centerStyle}>Some text</p> < ...

javascriptreactjsjsx