Animate Team Member Content Element Image

Hi,
Thanks for your patience, please try this css to make your team member image grow on page load.

.team-img-container img {
	animation: growin 4s;
	animation-fill-mode: forwards;
}
@keyframes growin {
  from {transform: scale(.1)}
  to {transform: scale(1)}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Please note that your team image is down the page a bit, so the animation may be happening before you scroll down.
Please try scrolling down to the image and then refreshing the page.

Best regards,
Mike

Hi,
Thanks for your feedback, for future readers I would point out that in this situation we have two team member elements below the “fold” (out of view) on the page, each team member element has quite a lot of text, so animating the column or the element will not be satisfactory, it will need to be the team member image.
We also want each team member image to animate when it is in the middle of the screen, “each” meaning that not all at the same time.
I add this background because I don’t believe that this user wants any images or links of the solution posted.
Ok, so try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_waypoint_animation_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
 $('.team-img-container img').each( function(index, element){
        $(element).waypoint(function(direction) {
            	if (direction === 'down') {
                $(element).addClass('waypoint-animation');
            	}
  }, {
    offset: '50%'
  });
        });
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_waypoint_animation_script');

and this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field instead:

.team-img-container img {
	transform: scale(.1)
}
.team-img-container .waypoint-animation {
	animation: growin 2s;
	animation-fill-mode: forwards;
}
@keyframes growin {
  from {transform: scale(.1)}
  to {transform: scale(1)}
}

then check again.
Please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
Thanks for the login, you had a missing bracket from a different css rule in your Quick CSS, I corrected for you.

please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike