What is the best way to initiate animation on a child element once the parent element has reached 75% completion of its animation

Question

What is the best way to initiate animation on a child element once the parent element has reached 75% completion of its animation

Is there a way to use JavaScript to determine when an animation is 75% complete? I have many nested HTML elements that need to be animated with an animation delay property, where the nested animation should start when the parent element is 75% complete. I am familiar with the animationend event, but that's not quite what I'm looking for. You can view the example here.

HTML:

<div>
  <p>hello world</p>
</div>

Animation delay code:

div p {
  line-height: 200px;
  text-align: center;
  -webkit-animation-name: icon-bounce-in;
  -moz-animation-name: icon-bounce-in;
  -o-animation-name: icon-bounce-in;
  animation-name: icon-bounce-in;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-delay: .375s;
  -moz-animation-delay: .375s;
  -o-animation-delay: .375s;
  animation-delay: .375s;
}

In this visual example, I've manually delayed the execution of the p animation by 75%. How would I achieve this programmatically in JavaScript for a large number of elements (not necessarily by adding an animation delay to child elements, but by determining when the parent element is 75% into its animation and triggering the child element's animation)?

javascript jquery html css

Answer 1

Answer №1

If you want to add a delay to stagger animations, consider using jQuery.

Check out this updated FIDDLE for reference

HTML

<div id="outer">
  <p id="inner">hello world</p>
</div>
<button id="clicker">click</button>

Javascript

$('#clicker').click(function() {
    var outerDuration = 500;
  $('#outer').css({top: '-50px', position: 'relative'})
             .animate({top: 0}, outerDuration);
  $('#inner').css({position: 'relative'}) // faced some issues with animating position
             .delay(outerDuration*.75) // adding the delay
             .animate({top: '-50px'}, 0, function() { 
                 $('#inner').animate({top: 0}, outerDuration)
             });
})

Answer 2

If you want to add a delay to stagger animations, consider using jQuery.

Check out this updated FIDDLE for reference

HTML

<div id="outer">
  <p id="inner">hello world</p>
</div>
<button id="clicker">click</button>

Javascript

$('#clicker').click(function() {
    var outerDuration = 500;
  $('#outer').css({top: '-50px', position: 'relative'})
             .animate({top: 0}, outerDuration);
  $('#inner').css({position: 'relative'}) // faced some issues with animating position
             .delay(outerDuration*.75) // adding the delay
             .animate({top: '-50px'}, 0, function() { 
                 $('#inner').animate({top: 0}, outerDuration)
             });
})

Answer 3

Answer №2

I recently discovered a clever little trick that I wanted to share with you all. Check out this JSFiddle for a demo.

Essentially, what I did was calculate the distance a div would travel during a transition, set up a watch using setInterval, and monitored its position every 10 milliseconds (this interval is customizable). When the div or its child p had traveled 75% of the total distance, I triggered an alert. You can customize this to call any function or perform any action at that point. Here's the code snippet:

var start = null; 
var flag = 1; // Direction of transition (use -1 for down to up)
var pos;
var distance = 200;

var interval = setInterval(function() {
   if (start == null) {
     start = $('div').position().top;
    }

   pos = $('div').position().top;
   console.log(pos, start, distance);
   
   if (pos >= (start + (0.75 * distance))) {
    alert("Animation is 75% complete");
    clearInterval(interval);
   }
}, 1);

Answer 4

I recently discovered a clever little trick that I wanted to share with you all. Check out this JSFiddle for a demo.

Essentially, what I did was calculate the distance a div would travel during a transition, set up a watch using setInterval, and monitored its position every 10 milliseconds (this interval is customizable). When the div or its child p had traveled 75% of the total distance, I triggered an alert. You can customize this to call any function or perform any action at that point. Here's the code snippet:

var start = null; 
var flag = 1; // Direction of transition (use -1 for down to up)
var pos;
var distance = 200;

var interval = setInterval(function() {
   if (start == null) {
     start = $('div').position().top;
    }

   pos = $('div').position().top;
   console.log(pos, start, distance);
   
   if (pos >= (start + (0.75 * distance))) {
    alert("Animation is 75% complete");
    clearInterval(interval);
   }
}, 1);

What is the best way to initiate animation on a child element once the parent element has reached 75% completion of its animation

Answer №1

HTML

Javascript

Answer №2

Similar questions

Which CSS properties can I implement to ensure that the text remains legible regardless of the background behind it?

Sending Parameters Using Higher Order Functions

Using Jquery to toggle visibility and position of a button when clicked

Determine the outcome with a PHP conditional statement for either "

The null node is causing an error when trying to access the 'name' property

Choose only one option from the dropdown menu at a time within the specified div

Tips for keeping an image stationary when hovering over it

What benefits can be gained from utilizing the beforeEach function within Jest testing?

Transform an array into a string with spaces in between each value by combining the elements

Unexpected behavior exhibited by DOM elements

What is the identifier for the class that is currently active?

Gather and consolidate all files into a single file using Node.js / JavaScript

Can Node.js fetch a PHP file using AJAX?

Eliminate any unnecessary spaces in the text of a link following the breaking of a word

Is it possible for JavaScript within an <iframe> to access the parent DOM when

Track and maintain the active status of the clicked article using jQuery

jquery global variable not working as expected

Using a repeating background in CSS with overflow displayed at the top rather than the bottom

Prevent the Sidebar from sticking to the bottom of the page

Issue with resizing causing layout glitches in jsPanel