Delaying an Edge Animate asset until visible - Part 2

This post is more than 2 years old.

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!

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 https://www.raymondcamden.com

Archived Comments

Comment 1 by pablo posted on 8/2/2013 at 4:02 AM

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.

Comment 2 by Raymond Camden posted on 8/2/2013 at 4:05 AM

@Pablo: Sure. I think I've seen someone demo that before.

Comment 3 by Raymond Camden posted on 8/2/2013 at 4:06 AM

This is an example: http://stackoverflow.com/qu...

Comment 4 by Mikkel Madsen posted on 9/22/2013 at 6:17 PM

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?:)

Comment 5 by Raymond Camden posted on 9/23/2013 at 2:08 AM

Is it online where I can see?

Comment 6 by adalgise wing posted on 9/23/2013 at 3:13 PM

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

Comment 7 by Raymond Camden posted on 9/23/2013 at 3:13 PM

@wing - if you can post your failing sample online, I (and possibly others) can take a look.

Comment 8 by adalgise wing posted on 9/23/2013 at 3:54 PM

hello again thank you for your answer
well you ca find the project file at
https://github.com/darkhunt...

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

Comment 9 by adalgise wing posted on 9/25/2013 at 3:27 PM

any answer yet

Comment 10 by Raymond Camden posted on 9/25/2013 at 3:47 PM

Nope - been busy.

Comment 11 by Raymond Camden posted on 9/25/2013 at 3:49 PM

It seems to work for me. As I scroll I see stuff moving. Btw, what is this for? The picture I mean.

Comment 12 by adalgise wing posted on 9/25/2013 at 4:11 PM

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 ^^

Comment 13 by Raymond Camden posted on 9/25/2013 at 6:11 PM

Can you describe what I should see? Cuz as I said - as I scrolled down I saw stuff move around.

Comment 14 by adalgise wing posted on 9/25/2013 at 7:02 PM

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

Comment 15 by Raymond Camden posted on 9/26/2013 at 1:35 AM

You got me then. I'd have to dig into your project, but I won't have time this week - sorry.

Comment 16 by adalgise wing posted on 9/26/2013 at 1:39 PM

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

Comment 17 by Felix posted on 12/3/2013 at 3:11 PM

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

Comment 18 by Raymond Camden posted on 12/3/2013 at 4:53 PM

In theory this should *already* work this way.

Comment 19 by Felipe Furlan posted on 12/4/2013 at 4:57 PM

hey friend! i have try this content in my web site, but i don´t get!~
do you can help me !?

Comment 20 by Raymond Camden posted on 12/4/2013 at 5:16 PM

You need to provide more detail about your problem.

Comment 21 by Felipe Furlan posted on 12/4/2013 at 5:21 PM

Raymond! there my website :

http://www.caofashion.com.br

when scroll down...you can see the animation...
is a house with a car....

Comment 22 by Felipe Furlan posted on 12/4/2013 at 5:42 PM

Raymond....do you see my problem ???

Comment 23 by Felix posted on 12/4/2013 at 6:31 PM

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

Comment 24 by Felipe Furlan posted on 12/4/2013 at 6:37 PM

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

Comment 25 by Raymond Camden posted on 12/4/2013 at 7:32 PM

@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.

Comment 26 by Raymond Camden posted on 12/4/2013 at 7:39 PM

@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.

Comment 27 by Raymond Camden posted on 12/4/2013 at 7:44 PM

@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.

Comment 28 by Felix posted on 12/4/2013 at 7:50 PM

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

Comment 29 by Raymond Camden posted on 12/4/2013 at 7:55 PM

@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?

Comment 30 by Felix posted on 12/4/2013 at 8:05 PM

Yes. The animation just plays until the end.

Comment 31 by Raymond Camden posted on 12/4/2013 at 8:08 PM

So... its ok on mine, but not yours?

Comment 32 by Felix posted on 12/4/2013 at 8:16 PM

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...

Comment 33 by Raymond Camden posted on 12/4/2013 at 8:20 PM

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?

Comment 34 by Felix posted on 12/4/2013 at 8:24 PM

Sure!
http://www.felix-irurozqui.de/
Should have shared it much earlier, sorry :)

Comment 35 by Felix posted on 12/4/2013 at 8:25 PM

Just scroll down to "Vita" and the animation should fire.
Once finished, if you scroll a bit more, it will restart...

Comment 36 by Felipe Furlan posted on 12/4/2013 at 9:09 PM

Raymond.....
how i can solve this problem ?
Uncaught TypeError: Cannot call method 'bindSymbolAction' of undefined

please...

Comment 37 by Raymond Camden posted on 12/4/2013 at 9:10 PM

@Felipe: As I said, I'd have to spend some time debugging this and would be willing to do it as a *paid* engagement.

Comment 38 by Raymond Camden posted on 12/4/2013 at 9:12 PM

@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.

Comment 39 by Felix posted on 12/4/2013 at 9:28 PM

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...

Comment 40 by Felipe Furlan posted on 12/4/2013 at 9:30 PM

Raymond..... thanks for support!

i get!

i just put code direct in the Adobe Edge!

Comment 41 by Raymond Camden posted on 12/4/2013 at 9:30 PM

Hmm. I think I get you now. It isn't noticing that it was previously visible anyway. Let me chew on this a bit.

Comment 42 by Felix posted on 12/4/2013 at 9:44 PM

Great!
Thanks in advance Raymond.

Comment 43 by Raymond Camden posted on 12/4/2013 at 9:51 PM

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.co...

Comment 44 by Felipe Furlan posted on 12/4/2013 at 9:53 PM

@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

??

Comment 45 by Raymond Camden posted on 12/4/2013 at 9:54 PM

@Felipe: I do not think I can help you anymore. I am sorry.

Comment 46 by Felix posted on 12/4/2013 at 10:00 PM

Swell!
That's it :)

Comment 47 by Raymond Camden posted on 12/6/2013 at 7:54 PM

Felix, not that I wrote a lot, but the blog entry is here - http://www.raymondcamden.co...

Comment 48 by Jan Mellström posted on 10/2/2017 at 11:46 AM

I did not get it to work with the first line so I altered it a little, for other people that might have come here.

So basically you remove the first and the two last lines. Then you replace:
if(isScrolledIntoView(sym.element))
with
if(isScrolledIntoView('#canvas')) //Or another ID/element

And also change:
sym.play();
sym.stop();

To:
stage.play();
stage.stop();