-
Posts
-
I have a few elements on a page that begin animating too late. When you scroll past them, they are still ‘blank’ and you have to over scroll, then go back to see the animation.
I found this article which solves the problem but it’s too generic. https://kriesi.at/support/topic/animations-trigger-too-late/
The issue only happens on one page, below a certain point. So using the script below ruins the animations across all pages. Is there a way to use the script in the above link but make it target specific IDs only?
Yes. The problem occurs on this page: https://ocall.co.uk/portfolio-item/cadivus
It seems to become an issue around this point https://ocall.co.uk/portfolio-item/cadivus/#cadivus_animated_numbers where you can see the numbers animate in as they leave the viewable area. The animations that follow this (a photograph, 3 portfolio thumbs and 4 social icons) do not load at all on a regular top-down scroll.
It applies in all browsers. The site does not use any caching plugins.
Here is a screen recording that shows the issue in Safari & Chrome for Mac. Screen recording
Hi,
Sorry for the late reply, do you still have the modification in place? Please try removing it and disabling your Enfold Theme Options > Performance > JS & CSS file merging and compression,
in my tests your waypoint is triggering very late, after your element is off the screen, which you already know :)
I tested with this script:(function($){ $(document).ready(function () { $('#cadivus_animated_numbers').waypoint(function() { alert('The element has appeared on the screen.'); }); }); })(jQuery);but when I test on my localhost as soon as the ID is in view the alert is fired:
(function($){ $(document).ready(function () { $('#demos').waypoint(function() { alert('The element has appeared on the screen.'); }); }); })(jQuery);Best regards,
Mike
- You must be logged in to reply to this topic.