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!
Archived Comments
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.
@Pablo: Sure. I think I've seen someone demo that before.
This is an example: http://stackoverflow.com/qu...
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?:)
Is it online where I can see?
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
@wing - if you can post your failing sample online, I (and possibly others) can take a look.
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
any answer yet
Nope - been busy.
It seems to work for me. As I scroll I see stuff moving. Btw, what is this for? The picture I mean.
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 ^^
Can you describe what I should see? Cuz as I said - as I scrolled down I saw stuff move around.
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
You got me then. I'd have to dig into your project, but I won't have time this week - sorry.
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
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
In theory this should *already* work this way.
hey friend! i have try this content in my web site, but i don´t get!~
do you can help me !?
You need to provide more detail about your problem.
Raymond! there my website :
http://www.caofashion.com.br
when scroll down...you can see the animation...
is a house with a car....
Raymond....do you see my problem ???
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
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
@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.
@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.
@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.
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
@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?
Yes. The animation just plays until the end.
So... its ok on mine, but not yours?
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...
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?
Sure!
http://www.felix-irurozqui.de/
Should have shared it much earlier, sorry :)
Just scroll down to "Vita" and the animation should fire.
Once finished, if you scroll a bit more, it will restart...
Raymond.....
how i can solve this problem ?
Uncaught TypeError: Cannot call method 'bindSymbolAction' of undefined
please...
@Felipe: As I said, I'd have to spend some time debugging this and would be willing to do it as a *paid* engagement.
@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.
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...
Raymond..... thanks for support!
i get!
i just put code direct in the Adobe Edge!
Hmm. I think I get you now. It isn't noticing that it was previously visible anyway. Let me chew on this a bit.
Great!
Thanks in advance Raymond.
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...
@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
??
@Felipe: I do not think I can help you anymore. I am sorry.
Swell!
That's it :)
Felix, not that I wrote a lot, but the blog entry is here - http://www.raymondcamden.co...
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();