0.1.2-alpha Alpha Version. Not for production.

This project is still in a very early stage. You shouldn't use this for production unless you really know what you're doing.


  • Design for Mobile
  • Nested Component
  • Hide safari's header on Scroll on iphone and ipad
  • Hide Google Chrome's header on Scroll on iOS and Android
  • Drived by the scroll
  • CSS animation
  • GPU/CPU swtich
  • Very Small
  • MIT License

Create Fullscreen Scrolling Websites


npm install --save


import React, { Component } from 'react'
import Fullpage, { FullPageSections, FullpageSection } from ''

export default class App extends Component {
  render () {
    return (


          <FullpageSection style={{
            backgroundColor: 'lime',
            height: '80vh',
            padding: '1em',
          <FullpageSection style={{
            backgroundColor: 'coral',
            padding: '1em',
          <FullpageSection style={{
            backgroundColor: 'firebrick',
            padding: '1em',



Migation from previous version.
Add the ``` <FullPageSections> ... </FullPageSections>```

For IE

npm i babel-polyfill

import "babel-polyfill";

Mobile First



open 2 terminal

In the first terminals windows.

> npm i
> npm link
> npm start

In the second terminal

> cd example
> npm i
> npm link
> npm start