How do you play an html5 canvas animation when scrolled into view?

[ichristman]

I'm exporting an oam file from Animate CC and inserting it as a animated composition in Dreamweaver. If the animation is below the fold, how do I keep it from playing until scrolled into view?

<object id="EdgeID" type="text/html" width="820" height="470" data-dw-widget="Edge" data="/animation_assets/FL-Ani-FixClickN/Assets/FL-Ani-FixClickNN.html">

</object>

Scroll effects/autoplay in Muse works but I am unable to use this method (I believe) due to bootstrap on my responsive site.

thanks

-ian

[ankushr40215001]

Hi Ian,

Shared this thread on Dreamweaver support forum​ forum as well, as I think its something to be checked at their end.

Thanks!

Ankush

[pziecina]

I have not tried it with a canvas animation, but -

If you use the code in the new updated answer at https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-vi...

This will enable you to tell when the canvas is within the visible viewport. What you must also do is pause the canvas animation using 'window.requestAnimationFrame()' javascript api function for canvas animations, (this is the part I have not used, but it is well documented) once the document is rendered, then start the animation once the canvas element is in the viewport -

https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

One thing you should remember to code for, is exactly when the canvas element will start playing, e.g. as the element comes into view, (1px showing) to all the canvas element being in view, (100% element in view).

[ichristman]

Thanks any work around will be great! I was just checking out https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the- current-v...

for the trigger. I've also used Wow.js in the past. Communicating with the decompressed OAM file is probably the trickiest part.

We'll look at https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

and let you know how far we get.

[ichristman · Accepted solution]

On this project we ended up with a quick fix, loading the canvas file on view rather than stopping and starting it.

Embed...

<div class="embed-responsive embed-responsive-16by9 os-animation animated fadeInUp"><object class="embed-responsive-item" id="EdgeID" width="820" height="390" type="text/html" data-dw-widget="Edge">

      </object></div>

JS...

<script>

function isInViewport(elem) {

    var bounding = elem.getBoundingClientRect();

    return (

        bounding.top >= 0 &&

        bounding.left >= 0 &&

        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&

        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)

    );

}

var isEdgeId = false;

1. window.addEventListener("scroll", function(event) {

  var edgeId = document.getElementById("EdgeID");

  if (!isEdgeId && isInViewport(edgeId)) {

    edgeId.data = "/animation_assets/MI-Ani2/Assets/MI-Ani2.html";

    isEdgeId = true;

  }

});

</script>

Notes: Animation appears only when fully in view (We may try loading placeholder).

Still looking for any additional options. It would be great to have a solution built into Dreamweaver, especially being able to advance the timeline on scroll. Thanks to our programmer Paul for this one, and for everyone's support!

-ian

[Nancy OShea]

I have used Wow.js animation library for revealing animations when scrolled.  But I've never tried it with Animate CC projects. 

https://mynameismatthieu.com/WOW/

[Nancy OShea]

You could use a simple  jQuery function.  And jQuery is also part of  Bootstrap.

A simple jQuery function that adds a class when the target(s) is in the viewport · GitHub