Tips&Tricks Animating fullpage.js content
In this article, we will, once again, be taking a look at the fullpage.js slider plugin. This time, instead of implementing the fade effect to the section/slide transitions, I will show you how to animate the section/slide content.
For those that are not familiar with it, fullpage.js is a simple and easy-to-use plugin that allows you to create stunning fullscreen scrolling websites. You can check out some of those websites here.
Animating fullpage.js content isn’t hard as you might expect. In fact, it’s quite easy and doesn’t require any JavaScript at all!
Yes, you read that correctly! No JavaScript!
Everything can be done with plain old CSS(3).
Don’t believe me? Check out this demo page.
Breaking things down:
HTML
The snippet is a bit long, but the HTML markup is pretty straight-forward. The main thing to look out for are the additional CSS classes on sections and slides.
For example “section-one” & “slide-one“.
These classes are used to target specific sections and/or slides in CSS, so we can have different content animations for each one.
JavaSript
Although, animating fullpage.js content doesn’t require any JavaScript, we still need to initialize the fullpage.js plugin.
This peace of JS is also responsible for section background colors and navigation functionality. You can read more about these (and other options) in the plugin documentation.
CSS
This is the most important part.
This snippet of CSS holds all fullpage.js content animations for our demo page.
Don’t be alarmed by the amount of CSS in this snippet.
There is a lot of code repetition going on.
I wanted to keep the CSS for all sections/slides separated, so you can follow along more easily and understand the code behind each effect.
In essence, animating fullpage.js content is done by changing CSS property values between the default and active section/slide states and adding CSS transitions.
For example the ‘Section 1’ title has a default ‘transformY’ value of ‘-1000px’. When the first section becomes active, the ‘Section 1’ title ‘transformY’ value changes to ‘0’. This, by itself does nothing if we don’t add a transition between these two values. In our case ‘Section 1’ title has a transition value of ‘transform .8s cubic-bezier(0.16, 0.68, 0.43, 0.99)’.
This results in ‘Section 1’ title sliding in from the top.
I won’t analyse each HTML element on our demo page by itself, but the same logic applies to all of them:
- HTML element has a CSS property with is basic value when the section/slide is in its default state (not active)
- that same CSS property has a different value when the section/slide is in its active state
- HTML element has CSS transition defined
You may also notice that paragraphs have a slight delay and appear after the title. This is achieved by using the ‘transition-delay‘ CSS property.
That’s all there is to it! Just your ordinary CSS transitions.
You can read more about them here.
Conclusion
Going through each HTML element on our demo page and describing its transition properties wouldn’t make much sense, so I encourage you to open up your browser developer tools and start fiddling around with it. If you prefer, you can also download the demo page and experiment on your computer locally.
If you run into any issues or have any questions, don’t hesitate to ask for help in the comments below.
