Elementor how to trigger CSS animations in ViewPort
This video shows how to trigger CSS animations when elements enter or leave the viewport. The JavaScript uses the Browsers IntersectionObserver API. It does not require external libraries like GSAP or Waypoints.
This is in response to a question on the Facebook Building Business with Elementor group. The user wanted to know how to do a section background animation, triggered by scrolling. I decided to split the answer into two tutorials.
This one shows how to trigger any animation entering or leaving the viewport. The next video will show how to use this on a background animation.
Code: https://github.com/wpeasy/animate-in-...
[UPDATE] GitHub has updated code which now animates the first element after the targeted element. This is so that vertical animations don't trigger the IntersectionObserver. Also, added JS Events so you can trigger other actions when tracked elements enter or leave the viewport.