Highlighted

How to activate a Canvas animation only when scrolled into view.

Contributor ,
Feb 15, 2019

Copy link to clipboard

Copied

Hi All,

I've searched this forum for the answer to no avail. I did find the same issue here and posted my question there but no response yet.

My animation (exported to Canvas from Animate) is 2 seconds long but positioned below the fold so visitors won't see it move because it's done before they scroll to it. Here's my page in progress with the 'Skills Graph" FLA 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 the FLA into view.

I've followed the recommendations at the forum thread above. Here is the JSFiddle demo linked from that thread: Edit fiddle - JSFiddle

I've gotten the Waypoint method to work at the bottom of my page, using the bar graph in the demo. (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?

For example, when you look at the source for my page ( ) you'll see the Waypoint style:

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

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

..and my div with the animation container:

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

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

Any help is greatly appreciated!

Hi Paul

I've got it working.

Your main mistake was, that you put the Inview Javascript part which deals with the DOM, more precisely with the coming in and out of browser view, into the <head> of your main document. That's a too early position because the structure (DOM) of the page is not known at that stage.

This should be in the <head>:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Main Page</title>

   

   

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js"></script>

  <script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/shortcuts/inview.js"></script>

   

</head>

Then follows your entire document including the iframe id="trajectory" and all the rest of it until you reach the </body>. Here you put the following:

<script type="text/javascript">

        inview = new Waypoint.Inview({

            element: $('.AOS_parent')[0],

            entered: function(direction) {

                document.getElementsByTagName("iframe")[0].contentWindow.playWhenInBrowserView()

            },

        });

  </script>

   

</body>

</html>

The complete page code is here (I called it main2.html in my test setup): Adobe Creative Cloud

I've left only the entered state, so that the iframe has fully entered the view before the playWhenInBrowserView() is triggered. If you need the other states as exit or exited you have to add those as well and appropriate functions within the fla/canvas/js (QB_careerPrep_iFrm).

Klaus

TOPICS
Discussions

Views

2.3K

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 to activate a Canvas animation only when scrolled into view.

Contributor ,
Feb 15, 2019

Copy link to clipboard

Copied

Hi All,

I've searched this forum for the answer to no avail. I did find the same issue here and posted my question there but no response yet.

My animation (exported to Canvas from Animate) is 2 seconds long but positioned below the fold so visitors won't see it move because it's done before they scroll to it. Here's my page in progress with the 'Skills Graph" FLA 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 the FLA into view.

I've followed the recommendations at the forum thread above. Here is the JSFiddle demo linked from that thread: Edit fiddle - JSFiddle

I've gotten the Waypoint method to work at the bottom of my page, using the bar graph in the demo. (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?

For example, when you look at the source for my page ( ) you'll see the Waypoint style:

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

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

..and my div with the animation container:

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

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

Any help is greatly appreciated!

Hi Paul

I've got it working.

Your main mistake was, that you put the Inview Javascript part which deals with the DOM, more precisely with the coming in and out of browser view, into the <head> of your main document. That's a too early position because the structure (DOM) of the page is not known at that stage.

This should be in the <head>:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Main Page</title>

   

   

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js"></script>

  <script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/shortcuts/inview.js"></script>

   

</head>

Then follows your entire document including the iframe id="trajectory" and all the rest of it until you reach the </body>. Here you put the following:

<script type="text/javascript">

        inview = new Waypoint.Inview({

            element: $('.AOS_parent')[0],

            entered: function(direction) {

                document.getElementsByTagName("iframe")[0].contentWindow.playWhenInBrowserView()

            },

        });

  </script>

   

</body>

</html>

The complete page code is here (I called it main2.html in my test setup): Adobe Creative Cloud

I've left only the entered state, so that the iframe has fully entered the view before the playWhenInBrowserView() is triggered. If you need the other states as exit or exited you have to add those as well and appropriate functions within the fla/canvas/js (QB_careerPrep_iFrm).

Klaus

TOPICS
Discussions

Views

2.3K

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
Feb 15, 2019 0
Community Beginner ,
Feb 18, 2019

Copy link to clipboard

Copied

In the example, when scrolling into view it adds the html class "start", which has CSS animation stuff.  On exit (not in view) this class is removed, taking away the animation.

You want to instead tell your CC canvas to play(), or gotoAndPlay(1), and stop().  The canvas is handily accessible via the pre-made "exportRoot", so you can replace the

$elem.addClass('start')

with

exportRoot.play();

or

exportRoot.gotoAndPlay(1);

and replace

$elem.removeClass('start')

with

exportRoot.stop();

Reference:Play/Pause a Animate CC Canvas from external button

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...
Feb 18, 2019 2
Contributor ,
Feb 22, 2019

Copy link to clipboard

Copied

Thanks RoGuE_StreaK3.

I'll try that out soon and report back to this thread. Sounds like the answer!

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...
Feb 22, 2019 0
Contributor ,
Mar 11, 2019

Copy link to clipboard

Copied

Hi RoGue_Streak and all, (finally getting back to this issue)

I'm probably making some obvious error due to my lack of grasp of the concept ...so I'd appreciate some hand holding here:

As indicated, I'm working on a Canvas project.

I want the user to see my FLA animate only when scrolled into view.

I've been successful in using exportRoot.gotoAndPlay(); to get the FLA to play when scrolled into view…but only in the page that Animate generates upon publishing.

That FLA should actually be viewed through an <iframe> that is embedded in a Main html page ...and that needs to start animating when scrolled into view.

---

So my problem is sending a message from my Main html page to the FLA player code in the html page that is embedded within the iframe (telling it to gotoAndPlay().

---

I saw ClayUUID's recommendaiton in the thread: Play/Pause a Animate CC Canvas from external button

...So I put window.parent.canvasTimeline = this; in the first frame of my FLA timeline and tried to call use that in my Animate on Scroll code in the Main html page...but obviously I'm doing something wrong.

================================

This is my 'Animate on Scroll' code in the Main html page:

link rel="stylesheet" type="text/css" href="/css/result-light.css">

<script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js"></script>

<script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/shortcuts/inview.js"></script>

<script type="text/javascript">

$(window).load(function(){

var $elem = $('.AOS_parent .AOS_child'); //My classes used below in the divs

var in_view = new Waypoint.Inview({

element: $elem[0],

enter: function() {

canvasTimeline.gotoAndPlay();    //IS THIS HOW YOU WRITE THE CALL TO THE CODE IN THE HTML PAGE IN THE IFRAME?                 

    },

    exit: function() { 

    }

});

    });

        </script>     

==============================

This is in the body of my Main html page:


                <div class="AOS_parent">

              <div class="AOS_child">       

                      <iframe id="myFlaPage"

                      scrolling="no" style=" align-self:center; overflow: hidden;"   

              src="myFLApage.html">

                      <p>Your browser does not support iframes.</p>

              </iframe>

                      </div>

        </div>

</div>

I can post the actual pages if needed.

Any help is greatly appreciated.

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...
Mar 11, 2019 0
Contributor ,
Mar 12, 2019

Copy link to clipboard

Copied

I'll simplify my question below:

My Waypoints 'animate on scroll script' in the page <head> looks like this:

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

//The Waypoints javascript URLs go here.

<script type="text/javascript">

         $(window).load(function(){

          var $elem = $('.AOS_parent .AOS_child');  //These reference the classes that are found in the divs that the <iframe> is contained within.

          var in_view = new Waypoint.Inview({

                   element: $elem[0],

                   enter: function() {

                   canvasTimeline.gotoAndPlay(1);  // <= What do I put here to make a FLA, that is within an <iframe>, play? (My FLA has 'canvasTimeline = this;' in                                                                                     the script on the first frame.)

                    /*exportRoot.gotoAndPlay();*/   //This older version of the 'play' call works...but only if the FLA being called  (and its Animate-generated code) is in the                                                                             same page as this code.

                   },
                        exit: function() {

          });

    });

</script>

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

I've gotten the above, green 'goToAndPlay' call to work when it's in the same page as the FLA but how do I call a FLA that is in an <iframe> to play?

Thanks much!

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...
Mar 12, 2019 0
Contributor ,
Mar 15, 2019

Copy link to clipboard

Copied

Hi All,

I'm still at a loss as to how to get this 'Animate on Scroll' (AOS) method to work with my Canvas FLA project.

It probably has to do with the fact that the non-working example trys to call a script-based FLA animation to play.

I've posted a page that links to two examples here: https://goo.gl/TmKNtr

=> One example is a page where I've gotten the AOS to work  (the FLA animates when scrolled into view.)

=> And another page where the AOS doesn't work (FLA won't play again when scrolled into view.)

(I've also posted each FLA file (very simple FLA demos) on the above page in case someone wants to see those.)

I'd greatly appreciate any help with this. There's probably a simple thing I'm doing wrong.

Thanks very much

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...
Mar 15, 2019 0
Advocate ,
Mar 18, 2019

Copy link to clipboard

Copied

Hi Paul

I come very late to this discussion, followed it just not with much attention so far, but I could be of help because I have a similar page - iframe - canvas construction in one of my projects, where I trigger successfully a function in the canvas/fla from the main page. Like your situ:

"So my problem is sending a message from my Main html page to the FLA player code in the html page that is embedded within the iframe (telling it to gotoAndPlay()."

So in the the timeline code of the Fla I can see basically the following code (stripped to bare bones):

var here = this;

here.stop();

window.playWhenInBrowserView = function () {

    here.play();

};

Subscribing the function to the window object is paramount. And in the main HTML page in the javascript, where everything's ready to trigger the play() within the canvas:

document.getElementsByTagName("iframe")[0].contentWindow.playWhenInBrowserView();

Of course the iframe in question needs to be the first (and maybe but not necessarily the only)  iframe in your main page. I guess this is the case. It would be more convenient to talk to the iframe by its id and for the sake of an example your iframe has got the id flaframe a triggering like this

window.frames['flaframe'].contentWindow.playWhenInBrowserView();

would be nicer and more direct, but pityfully it works in Fx and Chrome but not in Safari. And what's about Edge or IE I can't tell.

anyway, maybe ...

Klaus

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...
Mar 18, 2019 0
Contributor ,
Mar 18, 2019

Copy link to clipboard

Copied

Klaus,

That looks like the solution. I must be doing something wrong, though. It's not working for me.

This is in this page's head:

<script>

document.getElementsByTagName("iframe")[0].contentWindow.playWhenInBrowserView();

</script>

This is in that FLA's first frame's script:

var here = this;

here.stop();

window.playWhenInBrowserView = function () {
here.play();
};

I've posted a test page with my source FLA here:

https://goo.gl/CDVjbc

Do you see what I'm missing?

Thanks a lot

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...
Mar 18, 2019 0
Advocate ,
Mar 19, 2019

Copy link to clipboard

Copied

Paul

Tuesday morning, I haven't got so much time right now but I see the problem. I can't work the way you implemented it. The code in the main page

  1. <script> 
  2. document.getElementsByTagName("iframe")[0].contentWindow.playWhenInBrowserView(); 
  3. </script> 

does not work on it's own. It must be integrated into Javascript which actually detects when the iFrame scrolled into view.

As I said I have urgent other work now, I'll come back to this later. Maybe closer to the evening.

Klaus

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...
Mar 19, 2019 0
Contributor ,
Mar 19, 2019

Copy link to clipboard

Copied

Thanks for the note, Klaus.

I now incorporated that code line into the Waypoints, animate on scroll method and it's still not talking to the FLA in the iframe. (I re-posted the example page with this change: https://goo.gl/CDVjbc) That Waypoints method does work when used in the same page as the FLA.  (When the FLA is not in an iframe.)

This is what I now have in the head of my main page (with the iframe):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"> </script>

<script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js"></script>

<script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/shortcuts/inview.js"></script>

<script type="text/javascript">

    $(window).load(function(){

     var $elem = $('.AOS_parent .AOS_child'); // These are the names of the classes used in the nested divs that contain the iframe with the FLA.

     var in_view = new Waypoint.Inview({

         element: $elem[0],

         enter: function() {

// Now trying different ways to access the FLA's animation handle..to get it to play:

      document.getElementsByTagName("iframe")[0].contentWindow.playWhenInBrowserView();

    //window.contentWindow.playWhenInBrowserView();

   //window.frames['trajectory'].contentWindow.playWhenInBrowserView();

    //exportRoot.gotoAndPlay(); //This 'exportRoot' is the method that Adobe recommends one uses to cause the FLA to play(), stop(), etc.

    //$elem.addClass('start');  // This is the variable in the original Waypoints code.

    },

    exit: function() {

            // exportRoot.stop();

            // $elem.removeClass('start'); // This is the variable in the original Waypoints code.

    }

     });

    });

</script>

Any help is appreciated.

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...
Mar 19, 2019 0
Advocate ,
Mar 20, 2019

Copy link to clipboard

Copied

Hi Paul

I've got it working.

Your main mistake was, that you put the Inview Javascript part which deals with the DOM, more precisely with the coming in and out of browser view, into the <head> of your main document. That's a too early position because the structure (DOM) of the page is not known at that stage.

This should be in the <head>:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Main Page</title>

   

   

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js"></script>

  <script type="text/javascript" src="https://rawgit.com/imakewebthings/waypoints/master/lib/shortcuts/inview.js"></script>

   

</head>

Then follows your entire document including the iframe id="trajectory" and all the rest of it until you reach the </body>. Here you put the following:

<script type="text/javascript">

        inview = new Waypoint.Inview({

            element: $('.AOS_parent')[0],

            entered: function(direction) {

                document.getElementsByTagName("iframe")[0].contentWindow.playWhenInBrowserView()

            },

        });

  </script>

   

</body>

</html>

The complete page code is here (I called it main2.html in my test setup): Adobe Creative Cloud

I've left only the entered state, so that the iframe has fully entered the view before the playWhenInBrowserView() is triggered. If you need the other states as exit or exited you have to add those as well and appropriate functions within the fla/canvas/js (QB_careerPrep_iFrm).

Klaus

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...
Mar 20, 2019 2
Contributor ,
Mar 20, 2019

Copy link to clipboard

Copied

Thanks very much for this, Klaus!

You've shed light on my general ignorance about how JavaScript works. I'm learning.

The AOS method works well now.

(Wonder why it doesn't work on my desktop.)

I appreciate the time you spent on this.

Paul

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...
Mar 20, 2019 0
Advocate ,
Mar 20, 2019

Copy link to clipboard

Copied

You're welcome.

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...
Mar 20, 2019 0
Explorer ,
Aug 15, 2019

Copy link to clipboard

Copied

Hi, joined this thread late... This works great when you have 1 iframe with a html5 canvas project on the scr.

Any ideas if you were to have multiple iframes with similar content?

e.g Main Page

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 15, 2019 0