jQuery animate on scroll

Question

I am using the jQuery animation scroll plugin ( https://github.com/mpalpha/animate-scroll ) to animate elements when they are focused.

This is how I am using the animate function inline in my HTML.

<article class="article1" data-animate-scroll='{"x": "0","y": "100", "alpha": "0", "duration": "0.7"}'></article>

This is how I'm calling the script :

$(document).animateScroll();    

The animation seems to be working. But there are some issues with animation.

For example when the treatment for younger kids box is scrolled it is empty. then after adolescent treatment on scroll it is also empty. Also it should only animate only once on first scroll.

How can I fix this.

Answer 1

This library: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js

Set effect with opacity: 0 over element when scroll.