html scrollable div trigger for Adobe Animate animation

Report · Apr 09, 2024

I've created a interactive animation in Adobe Animate. I have placed it into a fixed div in the upper left hand corner of my html page. Over this object there is a scrollable column of divs. I need to trigger the animation when a specific div exits or enters the browser window. Is that possible?

Report · Apr 09, 2024

Hi.

Yeah, I think that's possible.

But can you provide a sample code? Because I think a solution will be very specific to your case.

Regards,

JC

Report · Apr 09, 2024

Good afternoon JoãoCésar,

I work on a closed system so I'll have to hand jam.

The Adobe Animate animation only has "this.Stop()" action, which works. I copied the code from the outputed html from Animate and inserted it into an html document that is just a number of <div> tags that scroll over a fixed <div>. The css is:

//contains the other <div> tags that scroll over the .interactive css <div> tag:

.wrapper {

position: absolute;

width: 80%;

}

.interactive {

position: fixed;

top: 0;

left:0;

}

The .js output from Animate executes correctly regarding the interactive animation.

Thanks for your help.

Report · Apr 09, 2024

Alright.

Here is an example using an iframe for Animate's output.

Preview:

https://bit.ly/4405xfB

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Play Anim if DIV is in View</title>
    <style>
        body
        {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow: hidden;
        }

        #anim
        {
            position: absolute;
            left: 0;
            top: 0;
            width: 80%;
            height: 100%;
        }

        #list
        {
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            height: 100%;
            overflow-y: auto;
        }

        .thumb
        {
            width: 50vw;
            max-width: 256px;
            min-height: 196px;
            background-color: rgb(39, 39, 227);
        }

        .thumb:hover
        {
            transform: scale(0.95);
        }

        #anim-thumb
        {
            background-color: rgb(16, 197, 100);
        }
    </style>
</head>
<body>
    <iframe id="anim" src="anim.html" frameborder="0"></iframe>
    <div id="list">
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div id="anim-thumb" class="thumb"></div>
        <div class="thumb"></div>
    </div>
    <script>
        var observer = new IntersectionObserver(function(entries)
        {
            const root = document.querySelector('#anim').contentWindow.exportRoot;

            if (!root)
                return;

            if (entries[0].isIntersecting)
                root.play();
            else
                root.stop();
        });

        observer.observe(document.querySelector("#anim-thumb"));
    </script>
</body>
</html>

Source / FLA / files / download:

https://bit.ly/4auysL6

I hope this helps.

Regards,

JC

Report · Apr 10, 2024

This is magnificent! It will take me a while to digest, hehe. 🙂 I greatly appreciate your efforts and I'm glad you are here. I am blown away. I may need to ask a follow up or two.

Report · Apr 10, 2024

Awesome!

I'm glad it is helpful.

Just let us know if you need further assistance.

Regards,

JC

Report · Apr 23, 2024

This works great, but I need to add to this an image that rotates as the pages scrolls up or down. I have a script that will accomplish this on it's own, but not simultaniously with the above script. Can I show you that code? Thanks for your consideration.

Report · Apr 23, 2024

Hi!

Yeah, sure. Let's see.

Report · Apr 23, 2024

Thank you for looking at this.

<!doctype html>

<head>

window.onscroll = function() {

scrollRotate();

};

function scrollRotate() {

let wheel = document.getElementById("reload");

wheel.style.transform = "rotate(" + window.scrollY/2 + "deg)";

}

</script>

<style>

body {

margin: 0;

padding: 0:

min-height: 100vh;

height: 3000px;

}

.wheel {

margin: auto;

top: 50%;

left: 105%;

height: 100vh;

width: 100vh;

transform: translate(-50%, -50%);

position: fixed;

}

.circle {

width: 100px;

height: 100px;

border-radius: 50%;

text-align: center;

vertical-align: middle;

display: table-cell;

}

#reload {

width: 100vw;

height: 100vh;

}

</style>

</head>

<body>

</div>

</body>

</html>

Report · Apr 26, 2024

Jose, did you have a change to look at my script above? I appreciate your help.

Report · Apr 27, 2024

Hi, again.

Sorry for the late replay.

Here is an example:

<!doctype html>

<html lang="en">
    <head>
         <script>
             window.onscroll = function()
             {
                scrollRotate();
             };

             function scrollRotate()
             {
                  let wheel = document.getElementById("reload");
                  wheel.style.transform = "rotate(" + window.scrollY/2 + "deg)";

                  const root = document.querySelector('#anim').contentWindow.exportRoot;
                  root.gotoAndStop(root.currentFrame + 1);
             }
         </script>

         <style>
             body
             {
                  margin: 0;
                  padding: 0;
                  min-height: 100vh;
                  height: 3000px;
             }

             .wheel
             {
                  margin: auto;
                  top: 50%;
                  left: 105%;
                  height: 100vh;
                  width: 100vh;
                  transform: translate(-50%, -50%);
                  position: fixed;
             }

             .circle
             {
                  width: 100px;
                  height: 100px;
                  border-radius: 50%;
                  text-align: center;
                  vertical-align: middle;
                  display: table-cell;
             }

             #reload
             {
                  width: 25vw;
                  height: 25vh;
             }


             /* Animate's output  */
             #anim
            {
                position: fixed;
                left: 0;
                top: 0;
                width: 80%;
                height: 100%;
            }
         </style>
     </head>     

     <body>
          <div class="wheel">
             <div class="circle">
                  <img id="reload" src="any.svg" alt="scrollWheel">
             </div>
          </div>
          <iframe id="anim" src="anim.html" frameborder="0"></iframe>
     </body>
</html>

I'm not sure if this what you want, though.

Please let us know.

Report · Apr 29, 2024

Jose, thank you for trying to help. What you have provided most recently, shows the iframe page and the rotating image which is great! Additionally, I need to use the section of code you povided initally (above) that triggers the iframe src "anim.html" via "IntersectionObserver". I've tried to accomplish this, but I end up with two scroll bars on the rightside. Is this possible?

Report · May 06, 2024

Good morning. Did you have a thought on how to overcome this issue? If it's not possible I will look a different way. Thanks very much for your help.

Report · Apr 10, 2024

you can also communicate between animate and the other divs without using iframes.

Report · Apr 11, 2024

I'd be interested to hear more regarding not using iframes. JoãoCésar solution worked, but it stopped another script that makes an image rotate behind the iframe. My original set up was a string of <div> tags in a wrapper <div> that visually looked like the iframe container, but wouldn't trigger the start and stop of the Animate object. Any help would be appreciated.

Report · Apr 11, 2024

@slipper

External HTML buttons/elements can access the canvas' main timeline via exportRoot.

(Such as: exportRoot.play(); exportRoot.gotoAndPlay("frameNumber or label"); exportRoot.childName.stop(); etc..)

Also, from within the timeline or frame script, external elements can be accessed using their Id or class

(eg: document.getElementById("element ID"); )

Report · Apr 11, 2024

I'm unclear... Here is what I have that works, that rotates an image behind my scrolling group of div tags:

window.onscroll = function() {

scrollRotate();

};

function scrollRotate() {

let wheel = document.getElementById("reload"); //

wheel.style.transform = "rotate(" + window.scrollY/2 + "deg)";

}

What doesn't work is the scrolling that is to trigger the Animate file. In my other version with iframe the Animate file triggers, but the image file doesn't rotate. Does that make sense? Thank you.

Report · Apr 11, 2024

where's your code to trigger whatever you want to occur in your animate file?

Report · Apr 12, 2024

The script to trigger the animation to follow:

var observer = new IntersectionObserver(function(entries)

{

const root = document.querySelector('#anim').contentWindow.exportRoot;

if(!root)

return;

if (entries[0].isIntersecting)

root.play();

else

root.stop();

});

The div tag to trigger the script:

This all worked in the iFrame configuration. Thanks for your help.

Report · Apr 12, 2024

in your handleComplete function is a variable for the main timeline of your animate canvas; exportRoot. use it.

Report · Apr 12, 2024

Thanks for your quick responses, I'm struggling...

So inside the handleComplete function I found the variable:

exportRoot = new lib.FLowChart();

So the variable is "FLowChart"? - NOTE: this is also the name of the Animate file as well

I'm unclear where the variable name goes. Here? -

const root = document.querySelector('????').contentWindow.exportRoot;

sorry for my confusion

Report · Apr 12, 2024

no, exportRoot is the reference you should use to access the main timeline. eg, if you want to add text to a textfield (tf) in the main timeline's first frame:

in handleComplete(), use

exportRoot.tf.text += "hi";

or call another function from handleComplete and pass exportRoot to keep your code cleaner.

Report · Apr 12, 2024

Thank you for your help. This has gotten more complicated then I imagined. I'm not a programmer and only dable occassionally. I just figured since the animation triggered using iframes, it would trigger without iframes. Also doing this similtaniously with the rotating graphic. I will have to revisit again later.

Report · Apr 12, 2024

you're welcome.

html scrollable div trigger for Adobe Animate animation

1 Correct answer