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.

Related articles

  • patty

    Good job!

  • Nick Kos

    Hello! Thank you for this really good decisions! I`m using this one with yours fade effect for fullpage and have a question. On my site I have a footer that takes only half of page (using fp-auto-height for that) and other half is just white screen because previous section becomes not active and all its content fade out. Can you please help, how can I make visible content for section before footer when I scrolled to footer? Sorry for my english.

  • balaji a k

    HI Luka,

    Nice Job!.
    i need the animation in fullpage fade effect section.

  • باسل يحيى زعرور

    Thank you very much for this nice lesson
    but i noticed that the first slide animation didn’t work and stay visible ,while second slide fire the animation when it load
    how to solve this problem

  • Trần Nhựt

    Thank you very much !