Ed Opare-Aryee, front-end dev at SOON_ offers a beginner-level look at the Skrollr.js plugin
1. What is Skrollr?
2. Add the skrollr library
3. Animation starting states
Add the starting state of your animation by selecting the keyframe you would like your animation to begin. By setting the element’s CSS opacity value at 0 using the ‘data-bottom-top’ attribute, the CSS properties specified in the attribute will be added to the element at the point of the keyframe. For example, in this instance the element will start by being invisible when it is just below the browser’s viewport.
<p data-bottom-top="opacity: 0"> My first paragraph </p>
4. Animation ending state
Add animation end states by choosing the keyframe where you would like the animation to end and adding the CSS properties to be applied to the element at that keyframe. In this case using the ‘data-center’ attribute and specifying the element’s opacity as 1, the invisible element will become visible when it’s in the middle of the browser viewport. Skrollr will transition between CSS property values, so when the element is halfway between the bottom and centre of the screen its opacity will be 0.5:
<p data-center="opacity: 1" data- bottom-top="opacity: 0"> My first paragraph </p>
5. Specify the easing function
When specifying CSS properties in the keyframe attributes you can also specify an easing function the animation should use to transition between values. We do this inside the keyframes by adding the name of the easing function after the property within square brackets. In this instance we can see the “swing” easing function stipulated like so:
<p data-center="opacity[swing]: 1" data-bottom-top="opacity[swing]: 0"> My first paragraph </p>
6. Add more keyframes
Multiple keyframes can then be added to elements to create more complex animations during scroll. The following will make the element appear and disappear repeatedly as the element moves up or down the page. Check Skrollr’s full documentation on GitHub (github.com/Prinzhorn/skrollr) for more options, along with the accompanying project files.
<p data-top="opacity: 0" data-100-top="opacity: 1" data-200-top="opacity: 0" data-300-top="opacity: 1" data-400-top="opacity: 0" data-500-top="opacity: 1" data-600-top="opacity: 0" data-700-top="opacity: 1"> My first paragraph </p>