Welcome back to the thread that won't die. I've blogged (see related links below) about this topic six times now. It started off as something simple - making an Edge Animate animation wait to run until visible - but it has turned into a pretty complex set of entries discussing not only how to do it but alternatives and other modifications. Today's entry is rather simple though as it just covers updates for the October 2014 release of Edge Animate.
Reader @jdesi posted a comment this morning about an issue he was having with my code in the latest release of Edge Animate. (You can read details about that update here: Edge Animate reduces runtime size by 55%, "Save to Custom Folders" feature, new Preloader options, and more!) I did some digging and discovered a few different issues with my code.
The first thing I discovered is that jQuery is no longer included by default in the HTML template. This is discussed in the blog entry I linked to above and while I could have certainly worked around needing jQuery, it was simpler to just add it back in. I did so in the index.html file and included it before the Edge JavaScript include.
The next thing I noticed was that sym.element
wasn't available. I checked the (updated) JavaScript API and saw that a new API existed: sym.getSymbolElement
The next change was a bit more subtle (but still documented!) - the element will now be wrapped in jQuery, if you have included it. From the docs:
"Note: If you have added jQuery as an external dependency in the Edge Composition, then sym.getSymbolElement() will return a jQuery wrapper, as AdobeEdge.$ gets redefined to jQuery in such cases. You can use any of the jQuery APIs on the result in this case."
So with that being the case, the method I wrote to check if the element was in view was able to remove the $ wrappers. Here is the updated version of the code.
Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
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) );
}
var element = sym.getSymbolElement();
if(isScrolledIntoView(element)) {
sym.play(0)
} else {
$(window).on("scroll", function(e) {
if(isScrolledIntoView(element)) {
console.log('Start me up');
sym.play(0);
$(window).off("scroll");
}
});
}
});
You can test this version here: http://www.raymondcamden.com/demos/2014/oct/14/test.html. As a reminder, this one won't pause if you scroll out and won't restart if you scroll back in. That's covered by later versions of my demo and can be used if you simply apply the fixes described here to them. Enjoy!
Archived Comments
Thanks a lot - tested and works like a charm :))
Hi Raymond,
thank you for sharing your code!
Unfortunately the code does not work with my animation.
When I look into the console, I see an error message:
[Log] Javascript error in event handler! Event Type = symbol (edge.5.0.1.min.js, line 154)
Unfortunately I don't know where 'symbol' is called.
I had this problem with the same message with an erlier version of your code and you directed me to this one because of compatibility reasons with the newer version of Edge Animate. It looks as there are some more issues with my version of Edge Animate (2014.1.1).
The code I use is (it's the only code I wrote in the animation):
--------------------------------
/***********************
* Adobe Edge Animate-Aktionen für Composition
*
* Bearbeiten Sie diese Datei mit Vorsicht. Achten Sie darauf, dass
* Funktionssignaturen und Kommentare, die mit „Edge“ anfangen, beibehalten werden,
* damit Sie mit diesen Aktionen weiterhin in Adobe Edge Animate interagieren können.
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // Aliase für häufig verwendete Edge-Klassen
//Edge symbol: 'stage'
(function(symbolName) {
Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
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) );
}
var element = sym.getSymbolElement();
if(isScrolledIntoView(element)) {
sym.play(0)
} else {
$(window).on("scroll", function(e) {
if(isScrolledIntoView(element)) {
console.log('Start me up');
sym.play(0);
$(window).off("scroll");
}
});
}
});
//Edge binding end
})("stage");
//Edge symbol end:'stage'
})(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-7808737");
---------------------------------
Do you have any idea what to do?
Not immediately. I'd need to get the project, and I don't even have Edge Animate installed anymore. Best I can suggest is the Adobe forums.
Thank you so much! I am an intern and am using this code for an animation to be used on a real estate site. They are very impressed, thanks again
great script! but how do i make this work from an iframe.. i'm trying with window.parent... but no succes yet..
Sorry - I don't have Creative Cloud anymore and don't even have Edge Animate installed now.
What is the trick to get this to work with multiple assets on one page? Please help!!!
Wish I could help - don't have CC anymore.
Can't point me in the right direction? Anything would help at all. I have it working great on one animation on the page. But when I add it to another animation everything dies.
I thought I had covered this already - so I'd check all 5 previous entries.
I did check all previous entries. I couldn't find the solution on any of them.
Hmm. Well best I can suggest is repeating the code for each element. I coulda sworn I had a blog entry on this, but I can't rebuild the demo as I don't have the software anymore. Lost CC when I left Adobe.
That's exactly what I did. I repeated the code for each one. But when you add each animation to the page you have to change the ID so they all don't say "Stage". Do you think that has something to do with it?
yeah - you would need to ensure the IDs match
Match where? In the script? On the page in the DIVs?
Both would need to match.
We got it working! Here is the code we used...
var isScrolledIntoView = function(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));
};
var element=sym.getSymbolElement();
if(isScrolledIntoView(element)){
sym.play(0)
}else{
var handler;
handler=function(e){
if(isScrolledIntoView(element)){
console.log('Start me up');
sym.play(0);
$(window).off("scroll",handler);
}
};
$(window).on("scroll",handler);
}
We have an Infographic with 13 animations on it. I will post the link when it goes live. Good stuff!
Glad you got it. :) Sorry I couldn't help more.
Where would you put this code to make it work? In the AE File? A seperate js file? Would you need to make sperate ID's?
I'd check the earlier posts as I talk about how to get the JS file. Specifically check part 1.
I was getting the same error. It was caused by not loading jquery.
I'd like to see the infographic. I'm still having trouble getting them to load
properly with your code. Only the first composition loads with the scrolledintoview code. https://forums.adobe.com/th...
Here you go... http://careers.state.gov/ho...
Awesome work! Would it be too much to ask for the files so I can dissect the code and apply it for a school project?
Mainly its because I can't figure out why it's not working "Javascript error in event handler! Event Type = symbol"
https://www.dropbox.com/s/m...
Best I can suggest is view source and save, it's all online. Unfortunately, you aren't the first person to report this error, so I think something changed in the Edge Animate product. I no longer have this product so I can't help fix it.
I've re-written the code but am getting an error when mutiple comps are added. Seperately they work fine. I've posted the issue here https://forums.adobe.com/me...
Its all good, I solved it https://forums.adobe.com/me...
Hopefully this will come in handy to anyone else trying to achieve this effect. (for future people trying to contact me for help, message me on the forum)