Scrolling content template

I think the scrolling style I came up with for the introduction to ATP draft works well. So, I spend some time this week modifying the structure to come up with a scrolling template that I hope to use as a starting point for some of the new illustrations I plan to develop over the next few months.

This example has enough functionality to allow it to be a stepping off point for new illustrations. Text scrolls in at fixed points and the animation events targeting the red rectangle in the illustration area are timed to occur in sync with the text movement.



Key elements -

  • From a development perspective I've tried to make this as easy to start using as possible. It is up on github and I will keep that repo up to date with any changes I make over time.
  • In an effort to make the illustration as mobile friendly as possible the size of the content will scale to fit smaller screens.
  • The navigate to top button may be overkill for many shorter illustrations, but will be useful for any longer ones I may develop.