Docs

[cmelnik]

Hi,
I am trying to figure out how to have an animation “replay” after the initial load viewing. For example, if you scroll to a particular element and the animation executes (slide-in, fade, rubber-band, etc…) I would like to make it re-animate once I scroll past it and come back to it later.

I was able to implement this on another theme with the following script. Can this be implemented in X?
<script>
(function($) {
var $animation_elements = $(‘.et-waypoint’),
$window = $(window);

function check_if_in_view() {
var window_height = $window.height(),
window_top_position = $window.scrollTop(),
window_bottom_position = (window_top_position + window_height);

$animation_elements.each(function() {
var $element = $(this),
element_height = $element.outerHeight(),
element_top_position = $element.offset().top,
element_bottom_position = (element_top_position + element_height);

//check to see if this element is within viewport
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
$element.addClass(‘et-animated’);
} else {
$element.removeClass(‘et-animated’);
}
});
}

$window.on(‘scroll resize’, check_if_in_view);
})(jQuery);
</script>

Thank you.

[Rupok]

Hey there,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[cmelnik]

I understand. Thank you.

[Rue Nel]

You’re welcome!
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts