Highlighted

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

Explorer ,
Aug 07, 2018

Copy link to clipboard

Copied

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

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

Views

957

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Aug 07, 2018

Copy link to clipboard

Copied

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

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

Views

958

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 07, 2018 0
Aug 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2018 0
LEGEND ,
Aug 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2018 0
Explorer ,
Aug 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2018 1
Explorer ,
Aug 08, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 08, 2018 1
Adobe Community Professional ,
Aug 07, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2018 0
Adobe Community Professional ,
Aug 07, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2018 0