Twitter: raymondcamden


Address: Lafayette, LA, USA

Delaying an Edge Animate asset until visible

04-03-2013 15,764 views Development, JavaScript 67 Comments

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: http://www.raymondcamden.com/demos/2013/apr/3/Untitled-1.html Please try not to be too amazed at my incredible animation and design skills.

Related Blog Entries

67 Comments

  • Commented on 04-03-2013 at 12:38 PM
    That will come in handy, thanks. +1 for the bacon ipsum.
  • Alex Affonso #
    Commented on 04-03-2013 at 3:15 PM
    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?
  • Alex Affonso #
    Commented on 04-03-2013 at 4:59 PM
    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.
  • Commented on 04-03-2013 at 7:41 PM
    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.
  • Alex Affonso #
    Commented on 04-04-2013 at 7:49 PM
    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.
  • Commented on 04-04-2013 at 9:26 PM
    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.
  • Commented on 04-05-2013 at 6:10 AM
    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.
  • Alex Affonso #
    Commented on 04-09-2013 at 9:40 AM
    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!
  • Commented on 04-10-2013 at 8:33 PM
    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/cfjedimaster/5359941
  • Commented on 04-17-2013 at 11:34 PM
    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.
  • Commented on 04-18-2013 at 6:26 AM
    So glad it worked for you!
  • Commented on 05-02-2013 at 5:18 AM
    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! :)
  • Commented on 05-02-2013 at 5:41 AM
    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?
  • Commented on 05-02-2013 at 5:56 AM
    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! :)
  • Commented on 05-02-2013 at 6:07 AM
    If you want, share the URL and I'll take a look.
  • Mohamed #
    Commented on 05-07-2013 at 9:56 AM
    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
  • Commented on 05-07-2013 at 3:28 PM
    How does it fail? Does it not start when scrolled into view?
  • Mohamed #
    Commented on 05-10-2013 at 2:55 AM
    no , can you give more steps , what i do exactly , and what i need to change in the js
  • Commented on 05-10-2013 at 5:49 AM
    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?
  • Mohamed #
    Commented on 05-10-2013 at 12:36 PM
    :( i need it urgent that`s will kill me , any other way .. :(
  • Commented on 05-10-2013 at 1: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.
  • Timur #
    Commented on 06-12-2013 at 5:44 PM
    Very interesting how to integrate this script with Adobe Muse to play imported Edge Animate files right in Muse.
  • Commented on 06-13-2013 at 8:37 AM
    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?
  • Commented on 06-13-2013 at 2: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.
  • Commented on 06-13-2013 at 5:06 PM
    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.)
  • Dan Duhaime #
    Commented on 07-22-2013 at 5:27 PM
    This is exactly what I was looking for! I'm very grateful that you put this up here. However, I replaced the composition name and call the right JS in order with no avail.

    The only thing I believe I did differently was I tried using the console method but didn't understand how to locate or edit it in another editor so I've created the creationComplete on Stage and put the code directly in there, thinking it was just a difference of editing preference.

    Any advice is deeply appreciated! And thanks again for releasing this.
  • Commented on 07-22-2013 at 7:43 PM
    Um - nope - not sure what to suggest unless I can see it myself. Is it online?
  • Dan Duhaime #
    Commented on 07-23-2013 at 9:24 AM
    My apologies, but it's not online yet. Here is a dropbox link though. I wish I didn't have to burden you with it, but thanks for your input! It is deeply appreciated.

    https://dl.dropboxusercontent.com/u/64021431/Berli...
  • Commented on 07-23-2013 at 1: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.
  • Dan Duhaime #
    Commented on 07-31-2013 at 5:48 PM
    Hello again Raymond!

    Sorry for the delay, it's been pretty busy over here. Below is a link to a test on a simple rectangle moving from upper left to lower right. I extended the height of the page so that we could scroll. Unfortunately, even on test it's having trouble. Could you take a look?

    https://dl.dropboxusercontent.com/u/64021431/Scrol...

    Again, much appreciated.
  • Commented on 08-01-2013 at 4:44 PM
    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!)
  • Chris Jones #
    Commented on 08-02-2013 at 5:50 AM
    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/eastern-tennessee/

    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!
  • Commented on 08-02-2013 at 6:26 AM
    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.
  • Chris Jones #
    Commented on 08-02-2013 at 6:37 AM
    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/42ui8eknzuvi4m2/edge%20i...

    Again appreciate you looking at it!
  • Commented on 08-02-2013 at 6:48 AM
    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.)
  • Commented on 08-02-2013 at 6:49 AM
    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?
  • Commented on 08-02-2013 at 6:53 AM
    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.
  • Chris Jones #
    Commented on 08-06-2013 at 9:39 AM
    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!
  • Commented on 08-06-2013 at 9:44 AM
    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.
  • Dan Duhaime #
    Commented on 08-06-2013 at 2:27 PM
    YES! That did the trick! I copied only the non-generated portion of the code and it worked nicely. Thank you for your help! A very cool piece of code we can implement on our website.
  • Commented on 08-06-2013 at 4:23 PM
    Glad it helped Dan.
  • Commented on 08-06-2013 at 8:31 PM
    Chris - I've got something for you. Going to - possibly - blog it tomorrow. Depends how long I've got at the airport.
  • Chris Jones #
    Commented on 08-07-2013 at 3:10 AM
    Thanks Raymond really looking forward to seeing it!
    ill keep an eye out for it.
  • Maarten Scholz #
    Commented on 12-16-2013 at 8:22 AM
    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.
  • Commented on 12-17-2013 at 5:52 AM
    Interesting - thanks for sharing that Maarten.
  • Commented on 01-14-2014 at 3:18 PM
    Hey there, very new to edge. What file would I put this code in to make this work? Thanks!
  • Commented on 01-14-2014 at 3:23 PM
    fooedgeActions.js, where foo is the name of your animation. For me it is typically Untitled-1edgeActions.js.
  • Commented on 01-14-2014 at 4:11 PM
    Hahah Thanks! So just a good ol' copy and paste job should do the trick for this then?
  • Commented on 01-14-2014 at 4:44 PM
    I'd recommend carefully doing the copy and paste - but it should work.
  • jerzero #
    Commented on 01-16-2014 at 6:31 PM
    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
  • Commented on 01-16-2014 at 8:28 PM
    Um... did you try the demo? :) If you did, you see it does not restart when you scroll back in.
  • Peter #
    Commented on 03-21-2014 at 2: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.
  • Commented on 03-21-2014 at 2: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: {*}.
  • Commented on 04-15-2014 at 8:16 AM
    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/animation/NorplanAnimationnew4.html

    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
  • Commented on 04-15-2014 at 3:47 PM
    Hmm, it seemed ok for me in Chrome. Not sure I saw what you saw.
  • Commented on 04-16-2014 at 1:20 PM
    Humm!

    Dont you see the background appearing like 5 sec after the animation starts?
  • Commented on 04-16-2014 at 1:31 PM
    I didn't notice it myself. Seemed ok.
  • Gary #
    Commented on 04-27-2014 at 10:12 AM
    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.
  • Gary #
    Commented on 04-27-2014 at 10:23 AM
    Nevermind.. I was pasting the code found here: http://www.raymondcamden.com/index.cfm/2013/4/3/De...

    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.
  • Jason Thompson #
    Commented on 05-16-2014 at 1: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?
  • Commented on 05-16-2014 at 6:44 PM
    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.
  • Peter #
    Commented on 06-26-2014 at 11:15 AM
    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?
  • Commented on 06-26-2014 at 11:27 AM
    I'm sorry you found this difficult. I tried to make it as simple as possible.
  • Commented on 06-26-2014 at 1: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.
  • Commented on 09-04-2014 at 4:46 PM
    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?
  • Commented on 09-04-2014 at 5:04 PM
    Um... no idea. If you can check the item's position on page load it might give some clue.
  • ekspanzi #
    Commented on 09-05-2014 at 2:34 AM
    thank you
    I was banging my head over this!

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty