Inspiring

Answered

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

Forum|Forum|6 years ago
February 15, 2019
2 replies
6469 views

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>

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

Any help is greatly appreciated!

Discussions

This topic has been closed for replies.

Correct answer kdmemory

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.

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

kdmemory

Inspiring

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

paul_james123Author

Inspiring

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

kdmemory

Inspiring

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

<script>  
document.getElementsByTagName("iframe")[0].contentWindow.playWhenInBrowserView();  
</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

R

RoGuE_StreaK3

Participating Frequently

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

paul_james123Author

Inspiring

Thanks RoGuE_StreaK3.

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

paul_james123Author

Inspiring

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

$(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:

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

src="myFLApage.html">

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

</iframe>

</div>

I can post the actual pages if needed.

Any help is greatly appreciated.

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.

$(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!

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.

Scanning file for viruses.

This file cannot be downloaded