Start an animation when it's scrolled to?

I'm working on something similar at the moment - I calculate the scroll position and use that position to trigger a symbol to show and then play, then I also get it to reset if the user scrolls back up. It resets so if they scroll back down it will trigger again

I am like you - I use bits and pieces and tweak until the job is done, this works for me so I hope it can be of benefit to you too

You can calculate and inject the scroll position directly onto your page with:

function checkScroll(){

var scrollPos = $(window).scrollTop();

}

------------------------------------------------------------------------------------------ ------

Once you know your scrollPos you can use the following

//Playing symbols based on scroll position

sym.setVariable("symbolPlayed", false);

var mySymbolObject = sym.getSymbol("yourSymbolToPlay");

//change the number of scroll_pos to whatever you calculated

$(window).scroll(function() {

    var y_scroll_pos = window.pageYOffset;

    var scroll_pos = 282;         

       if(y_scroll_pos > scroll_pos) {

var symbolPlayed = sym.getVariable("symbolPlayed");

if (!symbolPlayed) {

    sym.$("yourSymboToPlayl").show();

    mySymbolObject.play("start");

    sym.setVariable("symbolPlayed", true);

  }

  } if(y_scroll_pos < scroll_pos){

  sym.setVariable("symbolPlayed", false);

  }

});

Yeah sorry that was a typo, For my project I'm doing all of the triggering inside edge in the compositionReady, and I have a seperate js script included in my project, which I use the bootstrapCallback to access the composition - that has the checkscroll function, but I don't see why you can't include it in an html page in script tags - it's only while you are developing to get the number, then you can get rid of it.

I'm really not sure I think 'Stage' may work but if you are not wanting to trigger anything inside your actual edge project like I am via compositionReady, then I think this method should still work but you would have to use bootstrapCallback

eg.

AdobeEdge.bootstrapCallback(function(compId){

var myComposition = AdobeEdge.getComposition('YourCompositionId');

};

Theres a bit of documentation out there on this - I'm not an expert but basically this allows you access and control of your composition externally

And I could possibly be wrong or there may be a much easier way to achieve what you want - it's just what is working for me

Sorry I've just been copy and pasting the relevant bits from my own project and forgot to include the   $(window).on('scroll',function(){

            $(window).on('scroll',function(){

                checkScroll();

            function checkScroll(){

        var scrollPos = $(window).scrollTop();

$('p').html('scrollPos = '+scrollPos);

            }

            });

I'm thinking something like this may work for you, maybe try including the checkScroll function within this if it's not working, or maybe someone with better jquery /javascript experience can fix/ tweak this to suit your project 

====================================================================

AdobeEdge.bootstrapCallback(function(compId){

  //Access your edge composition (change to whatever your edge composition class is and the name of symbol to play)

  var myAnim = AdobeEdge.getComposition("yourCompositionClass");

  //access your symbol

  var mySymbol = myAnim.getSymbols("yourSymbol")[0];

  //Playing symbols based on scroll position

sym.setVariable("symbolPlayed", false);

var mySymbolObject = mySymbol;

//change the number of scroll_pos to whatever you calculated

$(window).scroll(function() {

    var y_scroll_pos = window.pageYOffset;

    var scroll_pos = 282;        

       if(y_scroll_pos > scroll_pos) {

var symbolPlayed = sym.getVariable("symbolPlayed");

if (!symbolPlayed) {

    //Add a label "start" on the timeline of your symbol to be played

    mySymbolObject.play("start");

    sym.setVariable("symbolPlayed", true);

  }

  } if(y_scroll_pos < scroll_pos){

  sym.setVariable("symbolPlayed", false);

  }

});

});

Read through parts 1-6. http://www.raymondcamden.com/?s=Edge+Animate&submit=Search

It works but my only issue is getting it to work with multiple compositions on 1 page

I've re-written the code, place it in compositionReady:

=============

var check = 0;

function checkAnim(){

  if(check == 0){

  sym.play(0);

  check = 1;

  return check;

  }

}

$(window).scroll(function(e) {

  var y = $(window).scrollTop();

  var h = $(window).height();

  if(y+h > sym.getSymbolElement().position().top){

  checkAnim();

  }

});

=================

You can download it here Dropbox - test5.zip

The only issue is if you try to use it with mulitple composions. Maybe you can figure it out? How to resolve javascript error in Edge 6.0.0 resulting from multiple compositions using the same function? (Javascript error in event handler! Event Type = symbol)

I have his working with multiple compositions. I have 3 on one page, by placing this code into all 3 of them

(note: I have added a buffer zone because the animation wasn't getting triggered on a small screen

  Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

  function isScrolledIntoView(elem) {

var docViewTop = $(window).scrollTop();

var docViewBottom = docViewTop + $(window).height() + 190; //Adjust this number to match the 2nd one below

var elemTop = $(elem).offset().top - 190; //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) );

} 

  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);

}

      });