Check on Github

ScrollFlow

Your new library for the best scrolling experiences

Download

Check on Github

With ScrollFlow.js, it’s easy for you to immerse users in your interface

It’s a new way to create scroll animations, smooth effects and overlapping elements.

Everyone can get the flow

ScrollFlow is designed to be lightweight, fully responsive and stable, available under the MIT license.

Open Source Library

Responsive behavior for any usage

An excellent performance for your website

Multiples features, only one scroll library

Overlapping on scroll Exclusive

Create a smooth navigation flow with overlapping sections

Vertical and horizontal support

Implement fluid transitions supporting navigation in any direction

ContentOverflow

Develop extensive sections without worrying about layout breaking

Fade

Apply the Fade for an even smoother experience

Fade Content

Choose ‘Fade Content’ for showing elements in overlapped content

Pagination

Offer users a precise section navigation with pagination

ScrollFlow.js in use

website.com

Intuitive usability

To beginners and advanced developers

Documentation

                      
                        <div class="scrollflow">
                          <div class="sf-wrapper">
                            <div class="sf-section">
                              ...
                            </div>
                            <div class="sf-section">
                              ...
                            </div>
                          </div>
                        </div>

                        document.addEventListener('DOMContentLoaded'
                        , () => {
    
                            const scrollFlow = new ScrollFlow();    
                            
                            scrollFlow.init();
                        
                            // Example of using onChange 
                            //callback
                            scrollFlow.onChange((direction
                            , currentIndex, targetIndex) => {
                                console.log(direction, 
                                currentIndex, targetIndex);
                            });
                        });

                        <div 
                        class="scrollflow horizontal fade-content 
                        paginate">
                          <div class="sf-wrapper">
                            <div class="sf-section">
                              ...
                            </div>
                            <div class="sf-section">
                              ...
                            </div>
                          </div>
                        </div>

                    
                      <div class="scrollflow">
                        <div class="sf-wrapper">
                          <div class="sf-section">
                            ...
                          </div>
                          <div class="sf-section">
                            ...
                          </div>
                        </div>
                      </div>

                      document.addEventListener('DOMContentLoaded', () => {
  
                          const scrollFlow = new ScrollFlow();    
                          
                          scrollFlow.init();
                      
                          // Example of using onChange callback
                          scrollFlow.onChange((direction, currentIndex, targetIndex) => {
                              console.log(direction, currentIndex, targetIndex);
                          });
                      });

                      <div class="scrollflow horizontal fade-content paginate">
                        <div class="sf-wrapper">
                          <div class="sf-section">
                            ...
                          </div>
                          <div class="sf-section">
                            ...
                          </div>
                        </div>
                      </div>

Let your creativity flow

Download

Check on Github