Known Participant

Answered

html scrollable div trigger for Adobe Animate animation

23 replies
2274 views
Translate

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?

This topic is closed to new replies. Start a new post to keep the conversation going.

JoãoCésar17023019Correct answer

Community Expert

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

kglad

Community Expert

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

Translate

S

slipperAuthor

Known Participant

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.

Translate

kglad

Community Expert

@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"); )

Translate

JoãoCésar17023019

Community Expert

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

Translate

S

slipperAuthor

Known Participant

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.

Translate

JoãoCésar17023019

Correct answer

Community Expert

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

Translate

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.