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: https://static.raymondcamden.com/demos/2013/apr/3/Untitled-1.html Please try not to be too amazed at my incredible animation and design skills.
Archived Comments
That will come in handy, thanks. +1 for the bacon ipsum.
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?
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.
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.
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.
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.
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.
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!
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.
https://gist.github.com/cfj...
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.
So glad it worked for you!
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! :)
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?
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! :)
If you want, share the URL and I'll take a look.
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
How does it fail? Does it not start when scrolled into view?
no , can you give more steps , what i do exactly , and what i need to change in the js
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?
:( i need it urgent that`s will kill me , any other way .. :(
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.
Very interesting how to integrate this script with Adobe Muse to play imported Edge Animate files right in Muse.
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?
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.
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.)
Um - nope - not sure what to suggest unless I can see it myself. Is it online?
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.
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!)
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 http://www.derbyllc.com/eas...
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!
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.
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?
https://www.dropbox.com/s/4...
Again appreciate you looking at it!
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.)
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?
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.
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!
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.
Glad it helped Dan.
Chris - I've got something for you. Going to - possibly - blog it tomorrow. Depends how long I've got at the airport.
Thanks Raymond really looking forward to seeing it!
ill keep an eye out for it.
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.
Interesting - thanks for sharing that Maarten.
Hey there, very new to edge. What file would I put this code in to make this work? Thanks!
foo_edgeActions.js, where foo is the name of your animation. For me it is typically Untitled-1_edgeActions.js.
Hahah Thanks! So just a good ol' copy and paste job should do the trick for this then?
I'd recommend carefully doing the copy and paste - but it should work.
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
Um... did you try the demo? :) If you did, you see it does not restart when you scroll back in.
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.
"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: {*}.
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 : http://legroupenorplan.com/...
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
Hmm, it seemed ok for me in Chrome. Not sure I saw what you saw.
Humm!
Dont you see the background appearing like 5 sec after the animation starts?
I didn't notice it myself. Seemed ok.
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.
Nevermind.. I was pasting the code found here: http://www.raymondcamden.co...
When I downloaded the 4.zip 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.
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?
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.
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?
I'm sorry you found this difficult. I tried to make it as simple as possible.
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.
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?
Um... no idea. If you can check the item's position on page load it might give some clue.
thank you
I was banging my head over this!
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"
Ok, I'll try to recreate it here.
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.
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?
Pretty much - writing it up now.
See update here: http://www.raymondcamden.co...
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?
Cheers
I'm not a small cog at Adobe. I'm like half a tooth on a small cog.
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
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 .
You would need to associate a click action for your EA element. In the event handler, just do
document.location.href='....'
where the value is the URL of the PDF.
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.
I'll take your word on it - that darn logic haunted my mind for a few days. ;)
Hi
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?
Did you read carefully? The post tells you where to put the code in.
I tried everything but it still doesn't work.... what I might be forgetting? could you post the exemple files?
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.
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.
Nope, not really. Unfortunately I no longer have a Creative Cloud subscription so I don't have Edge Animate.
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).
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. :)
alright, much appreciated.
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.
Is your demo online?
yeah zaksportfolio.com/podify
just pushed up my local stuff. the empty white section is where the animation would appear.
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.
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!
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. ;)