• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

html scrollable div trigger for Adobe Animate animation

Explorer ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

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?

Views

816

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

correct answers 1 Correct answer

Community Expert , Apr 09, 2024 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:
...

Votes

Translate

Translate
Community Expert ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Explorer ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Apr 09, 2024 Apr 09, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Explorer ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

Awesome!

 

I'm glad it is helpful.

 

Just let us know if you need further assistance.

 

Regards,

JC

Votes

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
community guidelines
Explorer ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

Hi!

Yeah, sure. Let's see.

Votes

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
community guidelines
Explorer ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

Thank you for looking at this. 

 

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

             }

         </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 class="wheel">

             <div class="circle">

                  <img id="reload" src="any.svg" alt="scrollWheel">
             </div>

          </div>

     </body>

</html>

Votes

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
community guidelines
Explorer ,
Apr 26, 2024 Apr 26, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Apr 27, 2024 Apr 27, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Explorer ,
Apr 29, 2024 Apr 29, 2024

Copy link to clipboard

Copied

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? 

Votes

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
community guidelines
Explorer ,
May 06, 2024 May 06, 2024

Copy link to clipboard

Copied

LATEST

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.

Votes

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
community guidelines
Community Expert ,
Apr 10, 2024 Apr 10, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Explorer ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Explorer ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Explorer ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

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:

<div id="anim-thumb" class="thumb"></div>

 

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

Votes

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
community guidelines
Community Expert ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Explorer ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Explorer ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

you're welcome.

Votes

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