Twitter: raymondcamden


Address: Lafayette, LA, USA

Delaying an Edge Animate asset until visible - Part 2

07-11-2013 6,227 views JavaScript 47 Comments

A few months back I wrote a blog entry (Delaying an Edge Animate asset until visible) that discussed how to ensure folks actually saw your Edge Animate animation. It used a bit of code to detect if the asset was available and if not - listened for scroll events to figure out when it should fire off. A reader asked me an interesting side question. Given an animation that may loop, or a user who may scroll up and down, is it possible to just pause the video when not visible and re-enable it when viewed? Yes! Here is my solution.

First - I wanted an animation that would loop. There isn't a simple button you can click to enable this in Edge Animate, but it isn't terribly difficult either. Read this forum post with a great answer by user dhosford: Edge Animate questions. Basically you add a label and use the "complete" action to send the playback back to the label.

The next step was easy. I used the code from my previous demo in a slightly modified form. My last entry would only check for scroll events once. I modified this to always listen for scroll events and see if the asset was in, or out, of the view port. I'm a bit concerned about the performance implications this may have, but... here it is:

Yeah, not exactly rocket science, but it seems to work well. You can view a complete working demo below. I use a large amount of text to push the asset down, but I recommend making your browser a bit skinnier before you load it.

p.s. On a quick note - I seem to remember that Edge Animate would sometimes blow away your modifications. When I used it to load my previous demo and worked on it, it didn't touch my code at all. I don't know if that's new with CC or not, but, that's cool!

Related Blog Entries

47 Comments

  • pablo #
    Commented on 08-01-2013 at 7:02 PM
    thats really nice, works perfect, but just wondering, could be a way of delay the loading of the images (for a lot o images in a site) not just the animation.

    but great work.
  • Commented on 08-01-2013 at 7:05 PM
    @Pablo: Sure. I think I've seen someone demo that before.
  • Commented on 08-01-2013 at 7:06 PM
    This is an example: http://stackoverflow.com/questions/1736215/make-im...
  • Mikkel Madsen #
    Commented on 09-22-2013 at 9:17 AM
    Hey there Raymond Camden.

    I have no clue how to get part 2 to work :/ I copied:

    function isScrolledIntoView(elem) {
          var docViewTop = $(window).scrollTop();
          var docViewBottom = docViewTop + $(window).height();

          var elemTop = $(elem).offset().top;
          var elemBottom = elemTop + $(elem).height();

          return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
           && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
       }      

    $(window).on("scroll", function(e) {
    if(isScrolledIntoView(sym.element)) {
    sym.play();
    } else {
    sym.stop();
    }

    });

    into the stage under creationComplete function.

    And my Symbol_1 wont play its rotation 360 degree with loop via trigger at end and a label at the start.

    Can you please help me out?:)
  • Commented on 09-22-2013 at 5:08 PM
    Is it online where I can see?
  • adalgise wing #
    Commented on 09-23-2013 at 6:13 AM
    hi did you find a solution it didnt work for me as well ,i did just use a simple animation to test it and i used this code but it didnt work
  • Commented on 09-23-2013 at 6:13 AM
    @wing - if you can post your failing sample online, I (and possibly others) can take a look.
  • adalgise wing #
    Commented on 09-23-2013 at 6:54 AM
    hello again thank you for your answer
    well you ca find the project file at
    https://github.com/darkhunter32/test

    my page where i did use the animation is sans titre 2

    for the source of adge animator you can find the oam file in the folder publish2

    thank you again
  • adalgise wing #
    Commented on 09-25-2013 at 6:27 AM
    any answer yet
  • Commented on 09-25-2013 at 6:47 AM
    Nope - been busy.
  • Commented on 09-25-2013 at 6:49 AM
    It seems to work for me. As I scroll I see stuff moving. Btw, what is this for? The picture I mean.
  • adalgise wing #
    Commented on 09-25-2013 at 7:11 AM
    thank y

    no it didnt work i tested it on different machines and the same result tha animations plays at the load of the page .
    well like i said at first its just a test i wanted to test the new stuff in muse and edge animator
    so i got in this problem what if i want to place my animation in the middle of the website and i want it t play just when the scroll arrives at her place thats it, but i cant get it work
    their is no meaning for the pic or the phrases its just that im used to write or use what ever comes on my mind or i find on my pc when i test new softwars ,
    the other thing that i didnt find convinient in muse is that theire is no rotation when i use the parallaxe fonctionnality wich really desapointing .
    anyway thank you for your answer ^^
  • Commented on 09-25-2013 at 9:11 AM
    Can you describe what I should see? Cuz as I said - as I scrolled down I saw stuff move around.
  • adalgise wing #
    Commented on 09-25-2013 at 10:02 AM
    yep what you saw in sans titre 2 its a test for parallaxe so what you saw movig its parallaxe effect
    what should start moving its the animation in the bottom of the page the same animation that y can find the source in the folder publish2, thats this one that should play when the scroll comes t it
  • Commented on 09-25-2013 at 4:35 PM
    You got me then. I'd have to dig into your project, but I won't have time this week - sorry.
  • adalgise wing #
    Commented on 09-26-2013 at 4:39 AM
    no problem thank you so much
    just take your time im not in a hurry like i said it just a test this way when i need them i can easily use them without problem ^^
    thank you again
  • Felix #
    Commented on 12-03-2013 at 4:11 AM
    Hi Raymond,

    You really made my day with this little tutorial.
    Everything worked like a charm. But now I wonder if it is possible to launch my animation again (no loop), once you scoll it out and then back in to the viewport?

    Looking forward to your answer.

    Yours sincerely,
    Felix
  • Commented on 12-03-2013 at 5:53 AM
    In theory this should already work this way.
  • Commented on 12-04-2013 at 5:57 AM
    hey friend! i have try this content in my web site, but i donĀ“t get!~
    do you can help me !?
  • Commented on 12-04-2013 at 6:16 AM
    You need to provide more detail about your problem.
  • Commented on 12-04-2013 at 6:21 AM
    Raymond! there my website :

    http://www.caofashion.com.br


    when scroll down...you can see the animation...
    is a house with a car....
  • Commented on 12-04-2013 at 6:42 AM
    Raymond....do you see my problem ???
  • Felix #
    Commented on 12-04-2013 at 7:31 AM
    Hi Raymond,
    Yes, indeed it works, but it starts obver everytime I scroll, even when I scroll just a little.
    What I was looking for, is a way to make the animation start again, only when it was completely outside of the viewport, and then scrolled back in.
    I Hope you get what I mean.

    Many thanks in advance.

    Felix
  • Commented on 12-04-2013 at 7:37 AM
    Felix..you did it !
    do you can help me?
    I'm not getting


    this is my website : http://www.caofashion.com.br

    go down the page and you will see the animation
  • Commented on 12-04-2013 at 8:32 AM
    @Fexlix: Ah, interesting. I'd create a variable called moving:

    var moving=false;

    Set it to true when you fire off the animation, and before you fire off the animation again only do it if moving is false. Set moving to false in the other branch where we stop the animation if not visible.

    The only issue with this is if the user sits there and lets it end. It won't restart unless they scroll out and return. Well, that may be desirable actually.
  • Commented on 12-04-2013 at 8:39 AM
    @Felipe: I see this error in the JS console:

    Uncaught TypeError: Cannot call method 'bindSymbolAction' of undefined

    This seems to be because this line is missing from the code.

    var Composition = Edge.Composition, Symbol = Edge.Symbol;

    It should be above:

    //Edge symbol: 'stage'
    (function(symbolName) {

    Try adding it in.
  • Commented on 12-04-2013 at 8:44 AM
    @Felipe: Nope, that isn't it. You do have that. So I added a break point, and at this area:

    (function($, Edge, compId){
    var Composition = Edge.Composition, Symbol = Edge.Symbol;

    Edge does NOT have a Symbol property. I don't know why. Best I can suggest is perhaps trying to create it again and seeing if it works in a simpler page. If you want me to dig deeper into this I could but it would need to be a paid engagement.
  • Felix #
    Commented on 12-04-2013 at 8:50 AM
    Hey Raymond,
    clever idea! I understand it, but as I'm not very good at scripting, and if it not too much to ask, I'd really appreciate if you could post me the updated code so I can simply paste into the edgeActions.js.

    Thank you so much in advance.

    Felix
  • Commented on 12-04-2013 at 8:55 AM
    @Felix: Hmm, wait a sec. So when you run .play(), if the animation is already playing, it doesn't restart. I just confirmed that on my demo. Do you see the same?
  • Felix #
    Commented on 12-04-2013 at 9:05 AM
    Yes. The animation just plays until the end.
  • Commented on 12-04-2013 at 9:08 AM
    So... its ok on mine, but not yours?
  • Felix #
    Commented on 12-04-2013 at 9:16 AM
    Hey, I must admit, I'm a bit lost right now.
    When you say "run .play()" do you mean the "sym.play();" from your example above?
    Because the only code I've got is the code from your example above...
  • Commented on 12-04-2013 at 9:20 AM
    Yes, I meant sym.play. So you have the exact same code as mine, but when you scroll, it restarts? If so, can you share the URL so I can see?
  • Felix #
    Commented on 12-04-2013 at 9:24 AM
    Sure!
    http://www.felix-irurozqui.de/
    Should have shared it much earlier, sorry :)
  • Felix #
    Commented on 12-04-2013 at 9:25 AM
    Just scroll down to "Vita" and the animation should fire.
    Once finished, if you scroll a bit more, it will restart...
  • Commented on 12-04-2013 at 10:09 AM
    Raymond.....
    how i can solve this problem ?
    Uncaught TypeError: Cannot call method 'bindSymbolAction' of undefined

    please...
  • Commented on 12-04-2013 at 10:10 AM
    @Felipe: As I said, I'd have to spend some time debugging this and would be willing to do it as a paid engagement.
  • Commented on 12-04-2013 at 10:12 AM
    @Felix: I am not seeing what you see. You have a short-ish animation. Maybe 10 seconds or so? If i let it finish, and scroll, it restarts, which is expected. If I quickly scroll when it starts, it does not restart.
  • Felix #
    Commented on 12-04-2013 at 10:28 AM
    Yes, true.
    But as I told I'd like it to restart only when it comes into the viewport again, So the idea of the variable "moving" seems good to me, but as a designer with no scripting skills, i'm lost here...
  • Commented on 12-04-2013 at 10:30 AM
    Raymond..... thanks for support!

    i get!

    i just put code direct in the Adobe Edge!
  • Commented on 12-04-2013 at 10:30 AM
    Hmm. I think I get you now. It isn't noticing that it was previously visible anyway. Let me chew on this a bit.
  • Felix #
    Commented on 12-04-2013 at 10:44 AM
    Great!
    Thanks in advance Raymond.
  • Commented on 12-04-2013 at 10:51 AM
    Please check this demo and see if it works like you expect. If so, I'll write a new blog post on it.

    http://www.raymondcamden.com/demos/2013/dec/4/Unti...
  • Commented on 12-04-2013 at 10:53 AM
    @Raymond

    one way that I can determine the size of the height, so that when I do the scroll, he did not stop, for example, so stop running when he disappears once the screen


    ??
  • Commented on 12-04-2013 at 10:54 AM
    @Felipe: I do not think I can help you anymore. I am sorry.
  • Felix #
    Commented on 12-04-2013 at 11:00 AM
    Swell!
    That's it :)
  • Commented on 12-06-2013 at 8:54 AM
    Felix, not that I wrote a lot, but the blog entry is here - http://www.raymondcamden.com/index.cfm/2013/12/6/D...

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