Animation viewport threshold
-
Hi
Would it be possible to modify the threshold for an animation triggering depending on its position in the viewport?
Currently we’re using the fade in on many blocks that appear above the fold. Some are within the viewport by enough to trigger the animation on page load, which is great. But for those blocks that are marginally too low in the viewport, the animation doesn’t start and it’s leaving the page looking empty, until the visitor scrolls enough to start the animation. The problem is the emptiness. It’s too large. An abyss of empty, and gives the visitor no reason to think there’s any content to scroll down for. The threshold to start the animation is a little too high in the viewport.
For our use case, it would be great if we could start the animation with even 1px of the block visible. We’re using the animation to mask a flash of unstyled content of a block that we’ve added to a group, and it’s fantastic for that purpose for us. The visitor observing the animation as a feature/experience in and of itself is not important to us.
Thank you for looking.
-
Thanks for the link! I see the problem on mobile quite well. Here is my suggestion for now. If you have a custom theme or plugin for this website I would suggest you add the following php code:
Make sure you add this with the priority 11 as seen below.
add_action( 'wp_enqueue_scripts', function() { wp_dequeue_script('coblocks-animation'); wp_enqueue_script( 'custom-coblocks-animation', 'url-to-your-coblocks-animation-file.js', array(), '1.0.0', true ); }, 11);See how we are enqueuing the script here:
Then in your plugin simply copy over this code and change the threshold value for something you think works for your usecase.
Replace the url url-to-your-coblocks-animation-file.js with the url of the file containing the code you copied over.
- The topic ‘Animation viewport threshold’ is closed to new replies.
