Activate Animation on Scroll

[allmarshall]

I am trying to create an animation that starts to load but only loads the full animation that is below the fold, once you scroll your mouse and it comes in to view.

Any help would be grateful!

[Preran · Accepted solution]

Not an expert but this link could help you in the time an expert gets to your question: jquery - Activate CSS3 animation when the content scrolls into view - Stack Overflow

[paul_james123]

Hi All,

I'm new to Animate CC and trying to accomplish what this post discusses as well: My animation (exported to Canvas from Animate) is 3 seconds long but positioned below the fold. It starts as soon as page loads so visitors don't see it move. Here's my page in progress with the 'Skills Graph" (created in Animate) located in the first section below the video header:

https://goo.gl/xorx7F

-I just want the orange color to fill the bars when user scrolls to them.

I've followed the instructions at Preran's link:
Edit fiddle - JSFiddle

...and have gotten the Waypoint method to work (using the bar graph in the example) at the bottom of my page. (The bar graph animates only when the user scrolls all the way to the bottom of my page.) But how do I now use that same method to get my Skills Graph animation to start only when in view?

I've made several attempts at adapting the code in that JSFiddle example to work with my animation, without success. Any help greatly appreciated!

[paul_james123]

...So, for example, the Waypoint style code is this:

</style>

  <script type="text/javascript">

    $(window).load(function(){

var $elem = $('.someClass .anotherClass');  //<==Those are variables that are used  as classes  for the bar graph in the JSFiddle example

var in_view = new Waypoint.Inview({

    element: $elem[0],

    enter: function() {

        $elem.addClass('start');

    },

    exit: function() {  // optionally

        $elem.removeClass('start');

    }

});

    });

</script>  

---------------------------------------------------------------------------

My div with the animation container looks like this:

(I added the class values from above -in a futile attempt to make this work.)

<div class="someClass" id="animation_container" style="float: left; width: 300px;" >

<canvas id="canvas" width="300" height="100" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>

<div class="anotherClass" id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:300px; height:100px; position: absolute; left: 0px; top: 0px; display: block;">

  </div>

</div>