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.
1 person found this helpful
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.
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.