Delaying an Edge Animate asset until visible

This post is more than 2 years old.

Here's a simple little modification that may be useful for people using Edge Animate. The default behavior for an Edge Animate animation is to play immediately. You can disable this of course and use the JavaScript API to play whenever you want. Here's an interesting use for this. What if your Edge Animate asset is on a page where it may not be visible? For example, a page with lots of text or other assets above it? Here is how I solved it.

First, ensure you disable autoplay on the Stage element:

Next, click on the "Open Actions" panel and enter some text for the creationComplete event. I don't write much JavaScript directly in Edge Animate, instead, I simply put in something simple, like console.log('yo mama!'), just to get Edge Animate to create the event and make it easier for me to find in my editor.

I created a simple application, ran the code, and ensured that it was not running (since I had disabled autoplay). Now for the fun part. How do we tell if we the Edge Animate asset is visible? I turned to Stack Overflow and found a great utility for this (well, for DOM items in general): Check if element is visible after scrolling As you can see, it checks the Window's current scroll setting as well as the DOM item's size.

Given this function, I decided on this basic pseudo-code:

if(visible) run the animation else listen for scroll events and check if visible

Here is the code I came up with:

You can try a demo of this here: Please try not to be too amazed at my incredible animation and design skills.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by kris korsmo posted on 4/3/2013 at 9:38 PM

That will come in handy, thanks. +1 for the bacon ipsum.

Comment 2 by Alex Affonso posted on 4/4/2013 at 12:15 AM

Great Raymond! I was looking for something like this and eded up with waypoints.js. But that didn't make the trick the way I need too.

Actually, I implemented your code to one of my pages and it works perfectly. But when I do have more than one Edge animate at the same page, only the first one starts to play automatically when scrolling. I'm trying to figure it out how to solve it, but I'm not an expert in JavaScript and I don't know what to do. Do you have any clue?

Comment 3 by Alex Affonso posted on 4/4/2013 at 1:59 AM

Actually I figured out that if I have more than one Edge animations at the same page, both out of view area, only the first one plays when the scroll pass through it. The second one doesn't animate.
On my tests, if the first one is already into view, so it starts playing automatically, them the second one plays when the user scrolls to it. Such strange behavior.

Comment 4 by Raymond Camden posted on 4/4/2013 at 4:41 AM

I'm confused. Based on your last paragraph, it sounds perfect. Animation 1 was visible so it played. That's expected. Animation 2 wasn't, but did display when visible.

Comment 5 by Alex Affonso posted on 4/5/2013 at 4:49 AM

I wasnt't so clear. Sorry. The issue I found occurs when both animatons are out of view. When I scroll past the first one, it plays! But when I scroll past the second one, it do not.

Comment 6 by Franck Payen posted on 4/5/2013 at 6:26 AM

What about the "light inside of the fridge" effect ?
I put a console.log inside a looping animation, and right now try to search for a way to stop playing when out of view.

Comment 7 by Raymond Camden posted on 4/5/2013 at 3:10 PM

Alex: I'd have to see your code to help.

Franck: You could keep the scroll events in there but add logic to say:

if visible and playing already, don't do squat
if not visible and playing, stop.

Comment 8 by Alex Affonso posted on 4/9/2013 at 6:40 PM

Raymond, I'll sent you an email with a link to a test page I built to show you the issue. I appreciate your help!

Comment 9 by Raymond Camden posted on 4/11/2013 at 5:33 AM

I worked with Alex's code and figured out what the issue was. He duplicated my code in both of the main JS files for his Edge animations.

Notice this part of the code: $(window).off("scroll");

This removes the event handler when the animation is in view. However, since he had two of them attached, they were both removed as soon as the first one came into view.

The answer is to create the event handler separately as a function, and when you remove it, pass it again to the off() function. Here is an example.

Comment 10 by Alex Affonso posted on 4/18/2013 at 8:34 AM

Thank you so much Raymond! It worked perfectly and saved my project.
I also noticed that with 2 or more animations at the same page I could not name their elements with the same name, since it leads to trigger issues. So I reviewed all my animations landing on the same page and gave their elements unique names. That's something we need to think ahead when creating with Edge Animate.

Comment 11 by Raymond Camden posted on 4/18/2013 at 3:26 PM

So glad it worked for you!

Comment 12 by Mr. Anderson posted on 5/2/2013 at 2:18 PM

Hey Raymond! Amazing bit of code buddy - saved my bacon. I'm having a bit of trouble with multiple animations on a single page failing to trigger like Alex had though; I've just been copying and pasting that revised code into my separate Edge Animate files, publishing them and then hooking them up in my html file.

I'm guessing there's a problem with my implementation. Do you think you could elaborate a bit on how to implement this code for multiple animations? Thanks for your help! :)

Comment 13 by Raymond Camden posted on 5/2/2013 at 2:41 PM

The only real elaboration I can give is the code sample I linked too. Are you seeing what he did, the after animation 1 was shown animation 2 didn't work when visible?

Comment 14 by Mr. Anderson posted on 5/2/2013 at 2:56 PM

I think I'm getting something a bit different Raymond - for me no animations are playing when I have multiples on the page. They work perfectly individually though, ie. if I just have one edgePreload.js file on the page. Cheers anyway, I'll keep jostling about with it! :)

Comment 15 by Raymond Camden posted on 5/2/2013 at 3:07 PM

If you want, share the URL and I'll take a look.

Comment 16 by Mohamed posted on 5/7/2013 at 6:56 PM

I try to put the code into my project , but i can understand it , i take it copy and paste it like u said. and change the Edge ID , but still not work should i change some names in the code or something .im not good with JS . please help me

Comment 17 by Raymond Camden posted on 5/8/2013 at 12:28 AM

How does it fail? Does it not start when scrolled into view?

Comment 18 by Mohamed posted on 5/10/2013 at 11:55 AM

no , can you give more steps , what i do exactly , and what i need to change in the js

Comment 19 by Raymond Camden posted on 5/10/2013 at 2:49 PM

If you do not know JS at all, this will be difficult. Were you able to follow the instructions I said about actions and adding console.log?

Comment 20 by Mohamed posted on 5/10/2013 at 9:36 PM

:( i need it urgent that`s will kill me , any other way .. :(

Comment 21 by Raymond Camden posted on 5/10/2013 at 10:11 PM

Sorry, I can't build this for you myself. If the blog entry makes *no* sense at all, then I'm not sure what to suggest.

Comment 22 by Timur posted on 6/13/2013 at 2:44 AM

Very interesting how to integrate this script with Adobe Muse to play imported Edge Animate files right in Muse.

Comment 23 by Raymond Camden posted on 6/13/2013 at 5:37 PM

I've never used Muse, so can't really help. I know Muse is more 'drag and drop'. Does it let you modify the source code or do you have to save first and then open in another editor?

Comment 24 by Alex Affonso posted on 6/13/2013 at 11:53 PM

Yes, Muse is a drag and drop software for non-developers who wants to build simple websites. You can import Edge Animate animations into it, but you can't acceas its code.
You can though export its generated files to a folder and import to a Dreamweaver site, so you can acceas and edit the code. But it's not a workflow designers are comfortable with.

Comment 25 by Raymond Camden posted on 6/14/2013 at 2:06 AM

Ah, unfortunately I'd assume this (my type of example above) is too complex to be compat with Muse. (If I had to guess anyway.)

Comment 26 by Raymond Camden posted on 7/23/2013 at 4:43 AM

Um - nope - not sure what to suggest unless I can see it myself. Is it online?

Comment 27 by Raymond Camden posted on 7/23/2013 at 10:34 PM

Hmm. Not sure what to say - your output looks very different from mine. I hate to say - but I'd suggest starting over again - get your animation ok and THEN make a copy - and then try my mods again.

Comment 28 by Raymond Camden posted on 8/2/2013 at 1:44 AM

Something was seriously wrong with your code. Your initial HTML file had multiple script tags in it. It should only have this:

<script type="text/javascript" charset="utf-8" src="scrolltest_edgePreload.js"></script>

Since edgePreload actually loads the other items. I did that and got the animation to show on screen, but the creationComplete is never properly fired. Best I can recommend is to start again since you did something wrong here. (And I say that with respect - what you did wrong was probably accidental - and I hope we can figure it out as it may be a common issue. And frankly, I could be wrong too!)

Comment 29 by Chris Jones posted on 8/2/2013 at 2:50 PM

Hi Raymond,

I have a question, i am making an infographic on edge animate an i have a few symbols that i want to have this effect of popping up when in view like the example

Is have input the code above into creation complete but it doesnt work for me, is the example provided doable withing edge animate?

I can send the edge file through if it helps :).

Appreciate any help greatly!

Comment 30 by Raymond Camden posted on 8/2/2013 at 3:26 PM

To me this is the exact same thing. Start the animation when visible. In theirs though the animation starts w/ nothing so it seems to pop more.

So yes - it should just work. If you want to send the file, you can, or put it online yourself and just post the URL.

Comment 31 by Chris Jones posted on 8/2/2013 at 3:37 PM

Hi Raymond,

Thanks for the reply, i have attached the zip of all the files,

What im trying to do is have the symbol desktops to play when scrolled into that area but struggling to see what ive done wrong! I also have one animation on loop and on triggered by a button, i dont know if thats what is complicating it?

Again appreciate you looking at it!

Comment 32 by Raymond Camden posted on 8/2/2013 at 3:48 PM

Something is off in your code. If you look at win7infographic_edgeActions.js, you can see this:

Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

That's line 22. Then a bit lower you see the exact same line again, embedded inside. Somehow you got one creationcomplete embedded in the other.

Unfortunately my advice is the same as I gave Dan. I'd suggest starting over and seeing if you can pinpoint where something went wrong. Again I think it is your fault, but as I said to Dan, it is probably something innocent. (Or maybe even a bug in EA.)

Comment 33 by Raymond Camden posted on 8/2/2013 at 3:49 PM

Oh! If you copied my code EXACTLY, than that would explain it. You weren't supposed to copy EVERYTHING I had as it includes some of the code EA would have given you already. Did you do that?

Comment 34 by Raymond Camden posted on 8/2/2013 at 3:53 PM

I removed the extra code and it 'worked', but, your animation is considered in view because the *whole thing* is an animation. You would need to bind the code I used on one of the elements, not the entire stage. For what you want you need to do something different.

Comment 35 by Chris Jones posted on 8/6/2013 at 6:39 PM

Hi Raymond,

Thanks for looking at this I did originally copy all your code yes sorry, i'm primarily a Print designer trying to find my feet online so learning little by little!

I was worried it would be the case that my whole animation would be classed as in view yes :/ . so is my best option to have a look at the code and manipulate it a tad then place it attached to the symbol?

Im struggling to figure out where this code would be placed is it inside the symbol and attached to 'complete'?

if im asking too much for you too answer its ok!

Comment 36 by Raymond Camden posted on 8/6/2013 at 6:44 PM

So Chris a few things. I'm working on a demo of this, specifically:

"I've got a symbol that is a bit down the page and want to know when IT is ready."

I've run into an interesting side-issue though and I'm working w/ an Edge Animate engineer to come up with the 'best' solution. (Chris, as a designer, you probably recognize that what is best for A isn't always best for B of course. Same thing applies to developers.)

To your second question - you CAN attach event handlers to symbols. I just discovered that myself last week. It's in the UI for sure (I mean the UI of Edge Animate.)

As a warning - I'm on the road this week so may be slow to respond.

Comment 37 by Raymond Camden posted on 8/7/2013 at 1:23 AM

Glad it helped Dan.

Comment 38 by Raymond Camden posted on 8/7/2013 at 5:31 AM

Chris - I've got something for you. Going to - possibly - blog it tomorrow. Depends how long I've got at the airport.

Comment 39 by Chris Jones posted on 8/7/2013 at 12:10 PM

Thanks Raymond really looking forward to seeing it!
ill keep an eye out for it.

Comment 40 by Maarten Scholz posted on 12/16/2013 at 7:22 PM

Instead of het *creationComplete* event you should use *compositionReady*. If you have a slow connection, or a "heavy" site, some of the assets won't get loaded when opening the site for the first time.

Comment 41 by Raymond Camden posted on 12/17/2013 at 4:52 PM

Interesting - thanks for sharing that Maarten.

Comment 42 by Queryous posted on 1/15/2014 at 2:18 AM

Hey there, very new to edge. What file would I put this code in to make this work? Thanks!

Comment 43 by Raymond Camden posted on 1/15/2014 at 2:23 AM

foo_edgeActions.js, where foo is the name of your animation. For me it is typically Untitled-1_edgeActions.js.

Comment 44 by Queryous posted on 1/15/2014 at 3:11 AM

Hahah Thanks! So just a good ol' copy and paste job should do the trick for this then?

Comment 45 by Raymond Camden posted on 1/15/2014 at 3:44 AM

I'd recommend carefully doing the copy and paste - but it should work.

Comment 46 by jerzero posted on 1/17/2014 at 5:31 AM

Raymond thanks for sharing this info.
I'm just wondering if this code resets the animation from the beginning when its not visible?

thanks Raymond

Comment 47 by Raymond Camden posted on 1/17/2014 at 7:28 AM

Um... did you try the demo? :) If you did, you see it does not restart when you scroll back in.

Comment 48 by Peter posted on 3/21/2014 at 11:02 PM

I am a little lost on where all this code is supposed to live? I am new to Edge Animate... seems like they forgot about the designers again and left everything to the programmers like they did with FLASH. Where are the build in behaviors that can do 90% of what the designers need to do? Bring back Macromedia :)

Seriously... I am not following what Edge Animate is writing and what custom code is be entered.

Comment 49 by Raymond Camden posted on 3/21/2014 at 11:09 PM

"seems like they forgot about the designers again"
Obviously I'm biased, but I can't disagree with you more. What I've done in this blog post is something that is useful I think, but not necessarily a very common use case perhaps. The entire tool (imo) is built around designers, for designers, and does a great job of letting you build animations. As I said, I'm biased, but I honestly feel that.

Could they have added a simple "Pause when hidden" checkbox? Maybe. And it is certainly something you could suggest to Adobe if you think it makes sense.

As for your specific question - it sounds like you don't know where to enter code. You want to use the Actions icon. It is on the left hand side to the right of the project title. It looks a bit like this: {*}.

Comment 50 by khalil posted on 4/15/2014 at 5:16 PM

hey !

I have a little problem with my animation and I was wondering if you could help me out !

here is the link to my animation :

It works perfectly with Firefox, but with google chrome, images are slowly showing 1 by 1. And on IE it's shaking :S

Thanks alot :D

Comment 51 by Raymond Camden posted on 4/16/2014 at 12:47 AM

Hmm, it seemed ok for me in Chrome. Not sure I saw what you saw.

Comment 52 by khail posted on 4/16/2014 at 10:20 PM


Dont you see the background appearing like 5 sec after the animation starts?

Comment 53 by Raymond Camden posted on 4/16/2014 at 10:31 PM

I didn't notice it myself. Seemed ok.

Comment 54 by Gary posted on 4/27/2014 at 7:12 PM

I'm pasting this code in the correct actions area {#} under creationComplete. The only thing I'm editing is making sure the composition class matches the one in my document. I add a custom SVG to the timeline, animate it, make sure Autoplay is off, add a <div style="height:1500px;width:10px;display:block;"></div> above the <div id="Stage" portion, and it doesn't work; it won't play the animation. :/

I'm actually fairly experienced with coding in general, baffled that I've been messing with this for 2 hours and no luck.

Comment 55 by Gary posted on 4/27/2014 at 7:23 PM

Nevermind.. I was pasting the code found here:

When I downloaded the project file someone requested earlier and checked out the coding in the action, it was entirely different. Copied/pasted that in mine and it worked.

Comment 56 by Jason Thompson posted on 5/16/2014 at 10:33 PM

Great tutorial!

Being a javascript newbie, what would be the best way to turn this whole script into a function so that I can utilize it for many animations on one page?

Comment 57 by Raymond Camden posted on 5/17/2014 at 3:44 AM

Hmm. I'm not sure I have a good answer for that. You could just wrap the code in a function and call it automatically - but the snippet is so short I'm not sure what you would gain from that, and it still has to be in this particular event handler for the EA script anyway.

Comment 58 by Peter posted on 6/26/2014 at 8:15 PM

a video tutorial would be nice.... your tutorial seems lengthy you make seem like its one the most hardest things ever. Please do a video tutorial. Who reads now days?

Comment 59 by Raymond Camden posted on 6/26/2014 at 8:27 PM

I'm sorry you found this difficult. I tried to make it as simple as possible.

Comment 60 by Raymond Camden posted on 6/26/2014 at 10:24 PM

Perhaps you could expand on how this is too lengthy, or what was confusing? I see two steps before the code is pasted in. And that's it.

Comment 61 by Josh posted on 9/5/2014 at 1:46 AM

Thanks for your post, I'm able to get this to work in the scrolling context. However I'd like to use it within a JQuery based carousel (FlexSlider). When I try you code, it must think it's visible because it always auto-plays when I load the page. Perhaps I need to trigger it differently, using a callback function?

Comment 62 by Raymond Camden posted on 9/5/2014 at 2:04 AM

Um... no idea. If you can check the item's position on page load it might give some clue.

Comment 63 by ekspanzi posted on 9/5/2014 at 11:34 AM

thank you
I was banging my head over this!

Comment 64 by jdesi posted on 10/14/2014 at 10:46 PM

Looks like we have an issue with the latest Animate JavaScript API - Version 0.1.7

I'm getting "Javascript error in event handler! Event Type = element"

Comment 65 by Raymond Camden posted on 10/14/2014 at 10:47 PM

Ok, I'll try to recreate it here.

Comment 66 by Raymond Camden posted on 10/14/2014 at 11:07 PM

Ok, I got it fixed, but have to pick up my daughter. I'll be posting a *new* blog entry, so check the blog later today.

Comment 67 by jdesi posted on 10/14/2014 at 11:28 PM

Wow! That was amazingly quick .. I cant wait to see the update .. anything specific I need to look into? Something to do with $(elem) perhaps?

Comment 68 by Raymond Camden posted on 10/15/2014 at 12:29 AM

Pretty much - writing it up now.

Comment 69 by Raymond Camden posted on 10/15/2014 at 12:58 AM
Comment 70 by jdesi posted on 10/15/2014 at 2:30 AM

Awesome! That was super quick - really really appreciate. Keep up the great work you're doing for the Edge community.

Also, looking at the number of blog posts you have done and I believe you work for Adobe - can't you push this to be a feature in Edge animate itself? Like "autoplay on visible/viewport" perhaps?


Comment 71 by Raymond Camden posted on 10/15/2014 at 3:09 AM

I'm not a small cog at Adobe. I'm like half a tooth on a small cog.

Comment 72 by jdesi posted on 10/15/2014 at 6:20 AM

lol .. but looking at comments and the interaction you have been having for past 1 and half years is evident enough that people need this feature. Intrude the next board meeting - may or may not help but worth a shot eh :D

Comment 73 by sajad posted on 11/7/2014 at 2:31 PM

hi Raymond

I have one question .
I want to have a link in my adobe edge animate project that when i click on it open a pdf file . Ok ? Can you help me? , thanks .

Comment 74 by Raymond Camden posted on 11/7/2014 at 7:44 PM

You would need to associate a click action for your EA element. In the event handler, just do


where the value is the URL of the PDF.

Comment 75 by Phivos posted on 11/9/2014 at 6:40 AM

Thanks for this, it is exactly what I wanted.

However, I don't understand the second line of the conditions. since it bypasses the first line of conditions, i.e.
if elemTop >= docViewTop , then elemBottom >= docVewTop is always true
if elmBottom <= docViewBottom, then elemTop <= docViewBottom is always true

So the first line suffices if you want the animation to start when you are just about to see the element.
Or use just the second line if you want to see the whole element before the animation starts.

Comment 76 by Raymond Camden posted on 11/10/2014 at 12:45 AM

I'll take your word on it - that darn logic haunted my mind for a few days. ;)

Comment 77 by A posted on 3/30/2015 at 7:37 PM

I´m new in this stuff

And it doesn't work for me
Where should I place this code?

And does it work with multiple animations?

Comment 78 (In reply to #77) by Raymond Camden posted on 3/30/2015 at 8:06 PM

Did you read carefully? The post tells you where to put the code in.

Comment 79 by Giulianna Trivellato posted on 7/20/2015 at 7:22 PM

I tried everything but it still doesn't work.... what I might be forgetting? could you post the exemple files?

Comment 80 (In reply to #79) by Raymond Camden posted on 7/20/2015 at 7:46 PM

They are posted at the URL towards the end of the blog post. The JS files are viewable if you view source to get the URLs. That's not as easy as a zip, but is the best I can do right now.

Comment 81 by the_gurden posted on 10/28/2015 at 8:31 PM

Are there portions of the code I need to change that are unique to the animation? I've been trying to get this to work for awhile to no avail.

Comment 82 (In reply to #81) by Raymond Camden posted on 10/28/2015 at 8:52 PM

Nope, not really. Unfortunately I no longer have a Creative Cloud subscription so I don't have Edge Animate.

Comment 83 (In reply to #82) by the_gurden posted on 10/28/2015 at 8:56 PM

righton, wasn't sure you even checked this anymore. every google search even close to this leads right back to your article so you seem to be the only expert.

i do get 3 console errors:

two of them are:
Cannot read property 'stage' of undefined

the other says unexpected token in regard to the last line of the js. which is the last line of your code incidentally, has the project ID which i did change to my own (only thing).

Comment 84 (In reply to #83) by Raymond Camden posted on 10/28/2015 at 9:00 PM

Best I can suggest is Adobe's forums. I don't use any Adobe software anymore for the most part. Frankly I'm surprised Edge Animate still exists. :)

Comment 85 (In reply to #84) by the_gurden posted on 10/28/2015 at 9:02 PM

alright, much appreciated.

Comment 86 (In reply to #84) by the_gurden posted on 10/29/2015 at 1:34 AM

shot in the dark here so sorry to bug you again.

just realized i get this error: Cannot read property 'top' of undefined

and when i run your demo that console error isn't there. just not sure what the difference is and it's driving me crazy.

Comment 87 (In reply to #86) by Raymond Camden posted on 10/29/2015 at 1:40 AM

Is your demo online?

Comment 88 (In reply to #87) by the_gurden posted on 10/29/2015 at 1:44 AM


just pushed up my local stuff. the empty white section is where the animation would appear.

Comment 89 (In reply to #88) by Raymond Camden posted on 10/29/2015 at 1:56 AM

I was hoping to see something stand out, but nothing seems obvious to me. It is most likely the fact that EA has been updated and my code just no longer works. :\ As I said, I don't have the software myself anymore so I'm not able to test it.

Comment 90 (In reply to #89) by the_gurden posted on 10/29/2015 at 2:01 AM

yeah that's kinda what i figured was going on. guess i didn't realize this stuff is on it's way out. all the adobe forums posts cite this so if this was the last bastion all is lost for this functionality with edge.

thanks for taking the time though, really appreciate it!

Comment 91 (In reply to #90) by Raymond Camden posted on 10/29/2015 at 2:03 AM

To be fair, me saying EA is on the way is *totally* my opinion and as I'm no longer at Adobe I have *zero* basis for that thought. I just tend to think Adobe's concerns outside of Photoshop and the mobile apps around it is pretty much null. ;)