Participant

Answered

Activate Animation on Scroll

Forum|Forum|7 years ago
December 3, 2018
1 reply
2209 views

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!

This topic has been closed for replies.

Correct answer Preran

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

PreranCorrect answer

Legend

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

Inspiring

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

Inspiring

...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>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.