Twitter: raymondcamden


Address: Lafayette, LA, USA

Delaying an Edge Animate asset until visible - Part 3

08-09-2013 4,427 views JavaScript, HTML5 22 Comments

Surprisingly, my blog posts (see the Related Entries section below) on Edge Animate and delaying animations were much more popular than I thought. In the comments section folks came up with some interesting questions and discussions about the techniques I presented. One of them was rather fascinating - and like all good questions - led to some interesting code.

A reader had created a vertically large animation. The animation was more than large enough to require scrolling to see the entire thing. What he wanted to then was to have internal items, i.e. animations inside the core animation, that would delay their animation until visible.

In order to demo this, I created a new Edge Animate animation and edited the stage to be very large vertically. I then created a Symbol and defined an animation on the symbol itself. Lastly, I set the autoplay to false.

So... now came the interesting part. I assumed I could do something similar to my previous entries. Wait for the element to be visible and then start the animation.

I began by working with the creationComplete event. I should point out that symbols have their own events as well. I'm not convinced I know what best to use here. I assumed that that the creationComplete on the stage made the most sense since to me, it meant that everything was ready. I then wrote code to get my symbol and used the same logic as before:

Pardon the somewhat wonky spacing there. If you read the previous entries then you know isScrolledIntoView is a utility function I included to see if the DOM item was visible.

Here is where things broke down. My item was being reported as always in view, even when it certainly was not! I added some logging, and discovered that when the web page loaded, my symbol had a "page x" and "page y" of 0,0!

And then things got crazy. For the heck of it, I added a setTimeout call for one second. When I did that and reported the position of my symbol, it was correct.

What. The. Heck. (And that's not what I said. ;)

Luckily I've got friends in high places. I spoke a bit with Josh Hatwich, a principal scientist on the Edge Animate team, and he suggested checking the display property of the symbol. When I did that, I found that my symbol had a display value of none initially, and then block in my setTimeout. This is why the positioning was so screwy.

What he recommended then was a simple fix - force the display property on the item and then check if it is visible. Here is the version I went with - there is only one line different:

And this works. (There is a demo link at the bottom.) Speaking more with Josh, he agreed that this use case may need some additional help from the JS API to work better in the future. So please note that what you see here may be better handled in a future EA update. I've included a zip of my code - but know that the .an file is not working correctly. I'm looking into that as well.

When you view this demo, you'll see a very tall pink box. In theory, you will not see a yellow box. When you scroll down and you see it, it should begin to move to the right. Please be sure you are sitting. My design skills are so incredible you may fall to the ground and I do not wish to be the cause of any physical damage.

Download attached file

Related Blog Entries

22 Comments

  • Commented on 08-12-2013 at 3:58 PM
    awesome! keep up the great work you doing
  • Chris Jones #
    Commented on 08-13-2013 at 5:56 AM
    Hi Raymond,

    Thanks for taking the time to write another article on this!
    I have tried to copy you instructions word for word in a new doc but mine just fails to play.

    I have attached the link to my Edge file.
    https://www.dropbox.com/sh/eta2sepe4cmyjeg/ydt4M2Te6

    I know you had an error with your file so i cant access the 'creation complete' to see if mine matches up to yours in the Edge files and also i noticed your referencing the symbol "Symbol
    12" but the asset in the library is named 'Symbol_1'.

    Maybe this is to do with why my file isnt working and your file is braking? (it comes up with syntax error in the actions when I try to open any in your actions.

    Again any help would be greatly appreciated Ray!

    Many Thanks,
    Chris
  • Commented on 08-13-2013 at 5:59 AM
    You have 2 of these:

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

    Remove one.
  • Chris Jones #
    Commented on 08-13-2013 at 8:48 AM
    Hi Raymond,

    Im not sure why it put that in as i only input this once into creation complete, but i deleted from 'test4_edgeActions' manually but still to no avail :(.

    think i might have to give this up unless you have any other suggestions!?

    thanks,
    Chris
  • Commented on 08-13-2013 at 8:53 AM
    Can you put it online so I can run it as you have it?
  • Chris Jones #
    Commented on 08-13-2013 at 9:15 AM
    Hi Raymond,

    Of course it is

    https://www.dropbox.com/sh/e0ugbo3897cvvts/5I15eNm...
  • Commented on 08-13-2013 at 9:29 AM
    I meant online as in running online. :) But i downloaded it.

    You have 3 issues:

    1) I opened the HTML file, opened Chrome Dev Tools, and immediately saw this:

    Uncaught SyntaxError: Unexpected token }

    This is from test5edgeactions.js, line 51.

    You have an extra }); on line 35.

    2) As you mentioned, your symbol name was
    1, not 12, so I changed this:

    mysym=sym.getSymbol("Symbol
    1");

    3) Finally, and this is partially my fault. I mentioned here (I think) that you should reference the earlier blog entries, and the isScrolledIntoView function. You need to include that in your code. I didn't include it above as it didn't change for this entry.

    See this Gist for a complete working example:

    https://gist.github.com/cfjedimaster/6221864
  • Chris Jones #
    Commented on 08-13-2013 at 10:00 AM
    sorry i didn't realize you meant working online apologies!
    Raymond thanks I love you it works!

    one more thing, now i have done with "Symbol1"
    Could i hypothetically get this working on multiple symbols by adding another line like below for "symbol
    2"? or is it another way?

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

    console.log("Ready");
    mysym=sym.getSymbol("Symbol1");
                 mysym=sym.getSymbol("Symbol
    2");

    P.S i think this help deserves an item being ticked off your Amazon wishlist!
  • Chris Jones #
    Commented on 08-13-2013 at 10:03 AM
    Actually i just tried this and then it only plays the second symbol when in view!
  • Commented on 08-13-2013 at 10:09 AM
    Let me whip up another example with 2 symbols.

    FYI - iTunes is having a huge sale on movies today so I'd much rather have an emailed iTune cert instead. Or a PayPal donation. And yeah, that's totally crass for me to even ask. But that's how I roll!
  • Commented on 08-13-2013 at 10:28 AM
    Ok, the solution. I'm writing this a bit quickly as I have an appointment, so forgive any rough edges. Also note - in general- the code could be tightened up a bit.

    I added another symbol, symbol2. This was a bit higher and moved up and to the right. Look at this Gist for the full code:

    https://gist.github.com/cfjedimaster/6222503

    There's some things you should note.

    Obviously I duplicate the code to set the second symbol to block.

    I use 2 variables, mysym1Started and mysym2Started as a way to remember which guys have already started. This will be explained in a second.

    Look in the scroll handlers now. First, I check to see if this one already started, and if so, I leave.

    I then set the started flag to true.

    The final mod is - I don't kill the scroll handler unless BOTH were started. This ensures that if I scroll slowly and see my new one first (remember I built it higher) then it can start and finish, and when I scroll deeper, I see the other one.

    TO BE CLEAR: I think this JS code needs to be refactored. I'm going to follow this up with something a bit more generic.

    You can find a zip of the project here:

    https://dl.dropboxusercontent.com/u/88185/test%205...
  • Chris Jones #
    Commented on 08-13-2013 at 10:43 AM
    Thanks Raymond I'll go through this tomorrow see if it works for me, and make a donation also!
  • Chris Jones #
    Commented on 08-15-2013 at 6:27 AM
    Hi Raymond,

    So i have got my simple file working correctly with this method, now i am trying to input the same code into my infographic, and it seems buggy, I have attached the infographic file im working on if you can help?

    https://www.dropbox.com/sh/3w7bw0sdab541q4/2sdCvJR...

    Two steps foward one step back! nearly there ;).
    Paypal donation made!

    thanks,
    Chris
  • Chris Jones #
    Commented on 08-15-2013 at 6:28 AM
    oh yer one other thing adding my web address to the website button on your comment form crashes my internet not sure whats going on there!
  • Commented on 08-15-2013 at 10:14 AM
    Thank you for the donation. To your last comment, you say it crashes your internet - what does that mean?

    To your issue: I opened up Chrome Dev Tools and looked at the console messages. From what I can see, it looks like the first (highest) symbol "works" but it keeps restarting. The second symbol (lowest) works right. It runs once. Digging now.
  • Commented on 08-15-2013 at 10:18 AM
    It was a typo. My code had this:

    mysysm1Started=true;

    Notice the extra s? It should be

    mysym1Started=true;

    Fixing this in the Gist right now. (In case you read the comment in the next 60 seconds and beat me.)
  • Chris Jones #
    Commented on 08-19-2013 at 4:24 AM
    Hi Raymond,

    This works now perfectly by the look of it, Thanks for all your help this will definitely be a valuable asset in my Infographic to help give it the 'Wow' factor visually.

    as for the issue in you comment box, the 'website' type box is always red even when i have typed a valid web address in (the others boxes ((Name, email etc)) are obviously blue) and if i try to submit a comment with a website input into it, it just crashes my browser and asks to restart. i have to delete or leave this box empty to make a comment :).

    thanks!
    Chris
  • Commented on 08-19-2013 at 9:00 AM
    What website did you enter? And what browser are you using? I can't imagine anything I've got here crashing it.
  • Chris Jones #
    Commented on 08-19-2013 at 9:31 AM
    just my website www.chrisjcreative.co.uk, i am using Chrome, just tried in FF and they both just stay red,

    also tried www.msn.com just to see that also stays red, didnt crash when i just tried it just blocks me from posting if i have anything input into the website box.
  • Commented on 08-19-2013 at 9:43 AM
    You know those aren't valid URLs though, right? You need http:// in front.
  • Chris Jones #
    Commented on 08-19-2013 at 10:13 AM
    Ah ok I see, I just personally never put the Http:// infront when putting my address down, so i guess my fault!
  • Commented on 08-19-2013 at 10:17 AM
    I could make it more explicit. :)

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