Twitter: raymondcamden


Address: Lafayette, LA, USA

Delaying an Edge Animate asset until visible - Part 4

12-06-2013 8,128 views Design, JavaScript, HTML5 47 Comments

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.

Related Blog Entries

47 Comments

  • jerzero #
    Commented on 01-16-2014 at 7:22 PM
    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.
  • Commented on 01-16-2014 at 8:25 PM
    Are you saying you want it to reset?
  • jerzero #
    Commented on 01-17-2014 at 1:58 PM
    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
  • Commented on 01-17-2014 at 2:07 PM
    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.
  • jerzero #
    Commented on 01-17-2014 at 2:32 PM
    Yes , thanks Raymond! i will try that and will let you know, thanks again =)
  • Ernesto #
    Commented on 02-09-2014 at 1:52 PM
    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.
  • Commented on 02-09-2014 at 2:24 PM
    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.
  • Anthony Butterfield #
    Commented on 03-03-2014 at 1:46 PM
    Hi Raymond,
    Any chance i can get hold of the source files for the example in this last post?
    Thanks You
    Anthony
  • Commented on 03-04-2014 at 8:06 AM
    Here ya go: https://dl.dropboxusercontent.com/u/88185/4.zip
  • Heather #
    Commented on 03-23-2014 at 6:07 PM
    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!
  • Commented on 03-23-2014 at 8:28 PM
    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.
  • Heather #
    Commented on 03-23-2014 at 8:44 PM
    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.
  • Commented on 03-23-2014 at 9:00 PM
    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.
  • Heather #
    Commented on 03-23-2014 at 10:06 PM
    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!
  • Heather #
    Commented on 03-24-2014 at 12: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.
  • Commented on 03-24-2014 at 6:52 AM
    I assume the animation is down now? I don't see it at kenneydesigns.co.
  • Heather Kenney #
    Commented on 03-24-2014 at 5:31 PM
    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.
  • Commented on 03-25-2014 at 5:59 AM
    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?
  • Heather Kenney #
    Commented on 03-25-2014 at 5:02 PM
    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.
  • Commented on 03-26-2014 at 9:27 AM
    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. :)
  • Commented on 03-26-2014 at 9:36 AM
    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.
  • Commented on 03-26-2014 at 9:52 AM
    Ok, I believe the issue is your responsive design and the top header thing.

    https://www.evernote.com/shard/s3/sh/f1c652ed-c6bd...

    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.
  • Heather Kenney #
    Commented on 03-26-2014 at 8:05 PM
    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.
  • AKall #
    Commented on 04-09-2014 at 11:57 AM
    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?
  • Commented on 04-09-2014 at 2: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.
  • Demian #
    Commented on 04-12-2014 at 6:00 AM
    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
  • Demian #
    Commented on 04-12-2014 at 6:27 AM
    Nevermind, i got it.
  • Igor #
    Commented on 05-11-2014 at 1: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?
  • Igor #
    Commented on 05-11-2014 at 3:11 AM
    Also, what would you say about this viewport detection jquery plugin? http://static.pixeltango.com/jQuery/Bullseye/ Will it be suitable (and how) with our problem, what do you think?
  • Commented on 05-11-2014 at 7:17 AM
    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. :)
  • Igor #
    Commented on 05-11-2014 at 7:44 AM
    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.
  • Commented on 05-12-2014 at 7:00 AM
    "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").
  • Commented on 07-27-2014 at 9:42 AM
    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.
  • Commented on 07-27-2014 at 9:58 AM
    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).
  • Commented on 07-27-2014 at 10:05 AM
    Thanks for sharing this Chris.
  • Commented on 07-27-2014 at 10:27 AM
    *** 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/488073/52160
          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) );
          }
  • Commented on 07-27-2014 at 10:52 AM
    As just an FYI, you can always just post a Gist that you can edit independently. :)
  • Commented on 07-30-2014 at 8:32 AM
    Thanks for the tip! Sorry for the double posts
  • Kel #
    Commented on 08-01-2014 at 10:30 AM
    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?
  • Kel #
    Commented on 08-01-2014 at 10:31 AM
    So it doesn't run the animation in the viewport..
    Thank Raymond
  • Commented on 08-01-2014 at 7:59 PM
    Can you share the URL?
  • Commented on 10-02-2014 at 3:54 PM
    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?
  • Commented on 10-03-2014 at 5:33 AM
    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.
  • Commented on 10-14-2014 at 3:41 AM
    It didn't work on the new edge animate cc 2014 :(
  • Commented on 10-14-2014 at 5:08 AM
    How did it not work?
  • Commented on 10-14-2014 at 10:06 AM
    I got this error https://www.dropbox.com/s/jo6hoofssl2orez/Screensh...

    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.com/palm-c-1_65.html
  • Commented on 10-14-2014 at 1:09 PM
    That errors looks like a bad paste. Are you sure you copied the code correctly?

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