Inspiring

Answered

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

Forum|Forum|7 years ago
August 7, 2018
3 replies
2000 views

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>

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

This topic has been closed for replies.

Correct answer 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-viewport

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.

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

Embed...

</object></div>

JS...

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;

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

Community Expert

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

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

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 O'Shea— Product User & Community Expert

ankushr40215001

Inspiring

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

Legend

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

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