3 Replies Latest reply on Jun 21, 2014 4:09 PM by Nicholas Prebezac

    Hold first frame until all 1st scene transitions take place.

    Nicholas Prebezac

      I have a parallax animation that is more than the max 10,000 px in height. Scene/page dimensions (1280 x 1000) To make it work I have to make it smaller than 10,000 px but add more transitions to each page/frame. With a page height of 1000 px the animation works when scrolling. When I increase the height to 2000 or 10,000, the first frame animation doesn't finish the scene timeline before it scrolls to the next page. How can I make the animation complete the 1st frame /page scroll before it moves down to the next page.

       

      settings:

      width: 1224

      height: 2000 to 10000

      overflow: hidden

      responsive scaling: width

       

      composition complete:

      yepnope({

          load: "http://cdn.edgecommons.org/an/1.0.2/js/min/EdgeCommons.js",

        callback: function() {

        EC.centerStage(sym);

        EC.Parallax.setup(sym);

        }

      });

       

      Thanks

        • 1. Re: Hold first frame until all 1st scene transitions take place.
          heathrowe Most Valuable Participant

          I think you have to consider the length of the animation in view as you scroll downward. For example you would not want to place a 10sec animation in a portion of the page when all it takes a a minimum of 2-3 seconds for the average user to scroll to the bottom of the page. If the end user is engaged enough to finish viewing the 10sec animation when they reach  that point then they will finish viewing it - otherwise it will be a hit and miss for most people. I can't see what much else you can do other than ensure that the animation is not too long. Or engage the end user to click a 'See this Animation' event button/link somewhere on the page that will take them to the viewport area of that animation.

           

          hth

          Darrell

          • 2. Re: Hold first frame until all 1st scene transitions take place.
            heathrowe Most Valuable Participant

            On second thought, I would think you should be able to disable scrolling, untill the current animation is complete, then re-enable scrolling when it is complete.

             

            See example here jquery - How to disable scrolling until animation is complete? - Stack Overflow , thread #8 - there a jsfiddle link in there to check out.

             

            Sadly, I have next to no experience with the Edge Commons library to see if it work, in this case.

             

            Darrell

            1 person found this helpful
            • 3. Re: Hold first frame until all 1st scene transitions take place.
              Nicholas Prebezac Level 1

              Thanks

              All of the animation is activated by scrolling, so I can't disable it.

              The long parallax page is made with 9 scenes, 3 screens each. Each one is a scroll activated animation.

              This would be simple if I could break it down to 27 x 950 px animations, but the 10,000 px maximum is making me jump thru all of these hoops.

               

              Is there any other fix you can think of?

               

              I tried changing the length of each scene in the timeline, but it didn't seem to have an effect on how long the animation stayed in the view port.