Delaying an Edge Animate asset until visible - Part 4

This post is more than 2 years old.

Welcome to the final blog post on delaying Edge Animate animations. I'm saying final just because I can't believe how such a simple thing has turned into so many different blog posts, so many different variations, and so many different fun diversions. Most likely because I said this will be the final post, someone will discover some other interesting opportunity and I'll have to write a part 5. But hey - that's the fun part about being a developer, right? Before we start though, please be sure you've read the earlier posts. I'll link to them at the bottom.

I had an interesting discussion with Felix in the comments on my second blog entry on this topic. He discovered an interesting bug. If the animation was scrolled into view, it would play. If the animation completed, and you scrolled it a bit, but just a tiny bit so it never left the view, it would start over.

The issue was simple. My code didn't know that the asset had stayed visible during the scroll event. To fix this, I simply keep track of the asset becoming visible.

/***********************
* Adobe Edge Animate Composition Actions
*
* Edit this file with caution, being careful to preserve 
* function signatures and comments starting with 'Edge' to maintain the 
* ability to interact with these actions from within Adobe Edge Animate
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {
      
      
      Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
         // insert code to be run when the symbol is created here
		var wasHidden = true;

		//http://stackoverflow.com/a/488073/52160
		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) );
		}		  
		
		//Immedidately see if visible
		if(isScrolledIntoView(sym.element)) {
			console.log('on load vis');
			wasHidden=false;
			sym.play();
		}
		  
		function doStart() {
            if(isScrolledIntoView(sym.element)) {
				if(wasHidden) {
					console.log('Start me up');	
					sym.play();
				}
				wasHidden = false;
            } else {
                console.log('stop');
                sym.stop();
				wasHidden = true;
            }
            
		}
		  
        $(window).on("scroll", doStart);
        

      });
      //Edge binding end

      Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "complete", function(sym, e) {
         //sym.play("Loop")

      });
      //Edge binding end

   })("stage");
   //Edge symbol end:'stage'

})(jQuery, AdobeEdge, "EDGE-62515662");

If you've read the other posts then most of this should make sense already. To see this in action try the demo below.

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 jerzero posted on 1/17/2014 at 6:22 AM

Hi raymond -

thanks again for sharing this information.

what if the animation resets everytime its not visible and will start from zero again when visible.

Im trying to avoid the animation to continously play.

Comment 2 by Raymond Camden posted on 1/17/2014 at 7:25 AM

Are you saying you *want* it to reset?

Comment 3 by jerzero posted on 1/18/2014 at 12:58 AM

yes, something like this:
http://www.cupsannual.ca/

the animation resets.

what code should i change to reset the animation if it went back hidden.

thank you

Comment 4 by Raymond Camden posted on 1/18/2014 at 1:07 AM

Err, so to be clear, when it comes back from hidden you want it to start at time 0? If you change play() to play(0), it should do that.

Comment 5 by jerzero posted on 1/18/2014 at 1:32 AM

Yes , thanks Raymond! i will try that and will let you know, thanks again =)

Comment 6 by Ernesto posted on 2/10/2014 at 12:52 AM

Thanks for your work.

As i see, the code doesn´t work when I embed the animation using "insert the oam" method on dreamweaver. Is there something i can do to make it work ?
I works perfectly when I embed it as usually, but inserting via dreamweaver is so easy and fast...

Thanks in advance and sorry for my english.

Comment 7 by Raymond Camden posted on 2/10/2014 at 1:24 AM

No idea. I've never embedded via DW. If the same code works when you embed it normally, best I can suggest is that it is a bug with DW and you should avoid embedding it that way. You should be able to use DW just fine outside of that.

Comment 8 by Anthony Butterfield posted on 3/4/2014 at 12:46 AM

Hi Raymond,
Any chance i can get hold of the source files for the example in this last post?
Thanks You
Anthony

Comment 9 by Raymond Camden posted on 3/4/2014 at 7:06 PM
Comment 10 by Heather posted on 3/24/2014 at 3:07 AM

Hey Raymond,

I've read through your 4 tutorials on delaying Edge animations and have pasted your js code from the 4th tutorial into my animation's _edgeActions.js file. It works great on desktop and laptops but when I test it on tablets and mobile devices the animation doesn't appear at all.

I thought that the poster image would at least appear if the animation was viewed on a device that doesn't support an Edge animation but all I get is a bank white space.

I was hoping you might have come accross this issue before and have a solve for it.

Thanks!

Comment 11 by Raymond Camden posted on 3/24/2014 at 5:28 AM

I'd recommend testing *without* my code and see if it works. It sounds like you are having multiple issues and you should start w/ a simple test case first.

Comment 12 by Heather posted on 3/24/2014 at 5:44 AM

Hey Raymond,

I did test the animation without your code and it worked fine with out the delay code. Since the animation I'm working with is not a looping animation and it pretty short (33seconds) it ends before the user scrolls to where the animation is within the viewport.

To make sure that it wasn't something I did when I added the code or when I created the animation I tried testing your animation from tutorial 4 on an iphone. When I use Safari on an iphone 4 to navigate to this page and click on the demo CTA the animation on the demo page does not animate.

Is it not possible to have an Edge animation with a delay play on iOS? I've scorwered the internet to see if Adobe or anyone else has come across this but haven't had any luck.

Thank you again for your help.

Comment 13 by Raymond Camden posted on 3/24/2014 at 6:00 AM

Hmm. So to be clear, *with* my code it worked ok outside of iOS? Can you share the URL so we can all see? I'd try using Safari Remote Debugging to see if something shows up.

Comment 14 by Heather posted on 3/24/2014 at 7:06 AM

Hey Raymond,

You are correct. When I added your code it works fine when I tested it in Chrome, Firefox and Safari on both my desktop and 2 different laptops. It stopped working when I viewed my website on an iphone and ipad.

I'm unfamilar with Safari's Remote Debugging but I will look into it.

Since I'm still in the process of designing my website I have a maintenance mode on. I will turn off the maintenance mode for the next few hours but will have to turn it back on by 12pm. The animation is in the about section.

kenneydesigns.co

Please let me know if you were not able to review the issue when the maintenance mode was turned off. Thanks again!

Comment 15 by Heather posted on 3/24/2014 at 9:30 AM

I ran the Safari Remote debugger and in the console view the following line appears:

[Log] [ DEBUG | EdgeSuite | Info]: Other jQuery include exists: Version 1.7.1 (edge-wordpress.js, line 212)

When I click on (edge-wordpress.js, line 212) it directs me to the following code:
if(AdobeEdge.edgesuiteDebug){
console.log('[ DEBUG | EdgeSuite | ' + level + ']: ' + msg);
}

The console.log line is line 212 and I am assuming that the issue is with the ('[ DEBUG | EdgeSuite | ' + level + ']: ' + msg) section since that area is highlighted blue when I review it.

This is above my code knowledge and I'm hoping you might know a solve to correct this code so I can have the animation work on iOS devices.

Comment 16 by Raymond Camden posted on 3/24/2014 at 3:52 PM

I assume the animation is down now? I don't see it at kenneydesigns.co.

Comment 17 by Heather Kenney posted on 3/25/2014 at 2:31 AM

The animation is not down. It is located in the about section. The fist several seconds of the animation is set at 0% opacity and then elements starts to fade in to finish at 100% opacity.

If you are viewing it on a desktop or laptop you should be able to view the animation as it was meant to animate. If you try viewing it on an iphone or ipad you will only see a white space where the animation should appear.

I will turn off the maintenance mode for the rest of the afternoon but will need to turn it back on by the end of the day today.

Comment 18 by Raymond Camden posted on 3/25/2014 at 2:59 PM

When I go to kenneydesigns.co I get a maintenance message. You and I work different schedules. :) Maybe you can put it up in a temporary folder that you don't have to remove?

Comment 19 by Heather Kenney posted on 3/26/2014 at 2:02 AM

Hey Raymond,

Yep, we do seem to work on opposite schedules. I took down the Maintenance Mode and will keep it down for the next few days. Hopefully this will give you enough time to take a look at it.

The animation is in the about section. If you are using Safari's Remote Debugging tool then you will find the animation in a div, within the about section, called span 7.

Thanks again for all your help.

Comment 20 by Raymond Camden posted on 3/26/2014 at 6:27 PM

Ok, so I went to the page. I see the console saying it start up, but I don't actually see anything animating. Oh wait - I do. It is just subtle. THe little triangle things move.

It seems to be working for me.

Oh crap - you said it DOES work desktop, just not mobile safari. Let me fire up my simulator. :)

Comment 21 by Raymond Camden posted on 3/26/2014 at 6:36 PM

So yeah - honestly I'm not sure. Obviously it is failing isScrolledIntoView. I debugged the function and see this.

docViewTop is 436.
docViewBottom is 896

So this represents the 'window' we are looking at.

elemTop is 631
elemBottom is 1076

This is the animation top and bottom. Subtracting, we see the animation is 445 tall. The window is 460. So in theory it should "fit". Digging.

Comment 22 by Raymond Camden posted on 3/26/2014 at 6:52 PM

Ok, I believe the issue is your responsive design and the top header thing.

https://www.evernote.com/sh...

I was able to get the animation to fire by VERY precisely getting it to fit - but since the animation is behind the top bar, you can't see it.

Comment 23 by Heather Kenney posted on 3/27/2014 at 5:05 AM

Hey Raymond,

Thank you for looking into this issue. I assume that when the animation is below the header/top nav menu it should animate automatically. At this point it's looking like it's not even worth having the animation at all.

I'll see if changing some of the CSS on the mobile nav will make the animation work. If that doesn't work then I give up.

Thanks for your help.

Comment 24 by AKall posted on 4/9/2014 at 8:57 PM

Hello Raymond,
I've gotten the isScrolledIntoView code to work wonderfully, but I had a question. Our animation doesn't fire until the /entire/ stage is in view, which is a problem because it just looks like a large white space. We are afraid the user won't continue to scroll and trigger the animation.

Is there a way to trigger the animation once the top of the stage is visible, instead once the entire thing is in view?

Comment 25 by Raymond Camden posted on 4/9/2014 at 11:38 PM

In theory just mod the logic - right now it is checking the top and bottom. You could modify it to just ensure the top is in sight.

Comment 26 by Demian posted on 4/12/2014 at 3:00 PM

Hello,

Thanks for your script.
I am trying to make it work but i think i'm missing on something. I'm a beginner to muse and EDGE. I am trying to import an Edge animation to a parallax website made with Muse.
So i would like to the export the animation in a OAM format. Can i do this with your script?
Thanks

Comment 27 by Demian posted on 4/12/2014 at 3:27 PM

Nevermind, i got it.

Comment 28 by Igor posted on 5/11/2014 at 10:58 AM

Raymond, can you please help me figure out, how to change your script, so that I could include several Edge animations on a single page and check if they became visible?

Comment 29 by Igor posted on 5/11/2014 at 12:11 PM

Also, what would you say about this viewport detection jquery plugin? http://static.pixeltango.co... Will it be suitable (and how) with our problem, what do you think?

Comment 30 by Raymond Camden posted on 5/11/2014 at 4:17 PM

Are you asking about checking *all* of them at once, or checking them independently?

As to that plugin - never used it so I can't say. Try it and see. :)

Comment 31 by Igor posted on 5/11/2014 at 4:44 PM

I've tested using several Edge animations on a single page after I've already asked you, and it worked, though not quite a bit like I was expecting to, that's why I've tried to look for another viewport detection plugin, just to see if it will work better.

It's a pity, but I'm quite poor at understanding javascript :(, so just wanted to ask you, -- maybe the usage of this plugin could shorten the code a bit (maybe not) -- it just adds two new events to jquery like "enterviewport" and "leaveviewport" -- detecting whether current element entered the viewport or not. Seems rather easy -- a jquery trigger, but... I can't understand how to launch Edge animation, when they trigger. What do I have to add after them in the code, to target them directly to my Edge animation, to play it?

Thanks in advance, Raymond.

Comment 32 by Raymond Camden posted on 5/12/2014 at 4:00 PM

"What do I have to add after them in the code, to target them directly to my Edge animation, to play it?" If it works like other jQuery items, you would need to get the selector for the Edge animation, and add the event listener. $("#someidentifier").on("enterviewport").

Comment 33 by Chris posted on 7/27/2014 at 6:42 PM

For those who are looking for a way to make this code work so that the animation triggers after a certain scroll down amount (eg 100px), replace the following line:

var elemTop = $(elem).offset().top;

with this line:

var elemTop = $(elem).offset().top - 100; //This number adds a buffer zone of 100px of scroll to trigger the animation

This line will ensure that the animation doesn't trigger until the browser has scrolled 100px downward from the top of the element. Replace the number with whatever you need, eg 50 or 200px as appropriate.

Comment 34 by Chris posted on 7/27/2014 at 6:58 PM

Also, I needed to make the 100px scroll down trick work with a responsive animation, so I modified the following code from:

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

to:

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

Now the code runs whenever the first two conditions are met only (which determines whether the animation is partially visible or not).

Comment 35 by Raymond Camden posted on 7/27/2014 at 7:05 PM

Thanks for sharing this Chris.

Comment 36 by Chris posted on 7/27/2014 at 7:27 PM

*** EDIT: Sorry, there was a bug in my 2nd response regarding the responsive functionality. Just use this whole block of code instead to set up the function's logic properly. This trick also pauses the animation if the user scrolls up into the buffer zone again, which is handy.

//http://stackoverflow.com/a/...
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height() + 100; //Adjust this number to match the 2nd one below

var elemTop = $(elem).offset().top - 100; //This number adds a buffer zone of 100px of scroll to trigger the animation. It should be the same number as above.
var elemBottom = elemTop + $(elem).height();

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

Comment 37 by Raymond Camden posted on 7/27/2014 at 7:52 PM

As just an FYI, you can always just post a Gist that you can edit independently. :)

Comment 38 by Chris posted on 7/30/2014 at 5:32 PM

Thanks for the tip! Sorry for the double posts

Comment 39 by Kel posted on 8/1/2014 at 7:30 PM

Hi Raymond

I am new to edge animate.. I have an animation running on a wordpress site. The problem is it is at the bottom of the page.. So it runs way before you even get there.. I basically put your example code in and changed the (jQuery, AdobeEdge, "EDGE-62515662"); to my js animation number.. My firefox has the following error
ReferenceError: AdobeEdge is not defined
})(jQuery,AdobeEdge,"EDGE-407577062");

Do you have any ideas why?

Comment 40 by Kel posted on 8/1/2014 at 7:31 PM

So it doesn't run the animation in the viewport..
Thank Raymond

Comment 41 by Raymond Camden posted on 8/2/2014 at 4:59 AM

Can you share the URL?

Comment 42 by Tyler Sammy posted on 10/3/2014 at 12:54 AM

Hi Raymond, thanks so much for this bit of script it's working really well for me as I've applied it to specific symbols on my stage to trigger their individual timelines when they become visible. I've been trying to tweak your code, but have been unsuccessful at this point.
What I'm trying to do is add in another bit of code so that if I scroll back up to where the symbol is visible from the top of the frame it plays in reverse. Can you help a noob out?

Comment 43 by Raymond Camden posted on 10/3/2014 at 2:33 PM

Um - hmmm. Generically - you could

remember last scroll position

in the event handler, see if current is lesser, if so, it means scrolling up

use playReverse instead of play. I'm *mostly* sure I remember seeing that in the JS API for EA.

Comment 44 by Molham Bakir posted on 10/14/2014 at 12:41 PM

It didn't work on the new edge animate cc 2014 :(

Comment 45 by Raymond Camden posted on 10/14/2014 at 2:08 PM

How did it not work?

Comment 46 by Molham Bakir posted on 10/14/2014 at 7:06 PM

I got this error https://www.dropbox.com/s/j...

Here's the demo link http://animate.club/bhavik/

I want to start the animation of these separate boxes when the displayed
http://www.naturalveneers.c...

Comment 47 by Raymond Camden posted on 10/14/2014 at 10:09 PM

That errors looks like a bad paste. Are you sure you copied the code correctly?

Comment 48 by benedikt posted on 2/9/2015 at 3:09 PM

Hi Raymond,

this script is exactly what I need at the moment! Thank you very much!

But it does not work with my version of Edge Animate CC 2014.1.1.

When starting in Safari I get this error message:
[Log] Javascript error in event handler! Event Type = symbol (edge.5.0.1.min.js, line 154)'.

What do I have to change to make it work? Any idea?

Comment 49 (In reply to #48) by Raymond Camden posted on 2/9/2015 at 10:15 PM

Try the last entry: http://www.raymondcamden.co...

Comment 50 by will posted on 3/5/2015 at 6:15 PM

Hello, I am sooooo close! I am having issues with "Uncaught TypeError: Cannot read property 'stage' of undefined". can someone help me figure out if its my code or the .an file?