Jump between sections

I am work on my site and i wll have 8 sections.
Every section have animation for enter inside and outside from the section:


I want to allow the user to jump just one section every scroll (up/down).

And to allow to scroll just the enter animation of the current section it’s finish.

It’s possible?

Here is my public share link: LINK
(how to access public share link)

1 Like

Hello @Shimon_Bar_Yacov

Something like > https://fullpage-js-speed.webflow.io/

Many people use fullpage.js

Check and clone the project here > https://webflow.com/website/Full-Page-js-speed

If you have some questions feel free to reach out.

Piter :webflow_heart:

Hi Piter,
Thanks for your answer. i don’t understand how i install & use this fullpage.js
Do you have tutorial?


1 Like

You can open the read-only link and explore, but I will share the process here :blush:

1. Add a div with a class name .page-wrap and ID #fullpage > the div will wrap the sections you have

2. Add your sections inside > add a custom div attribute to the sections > name: data-anchor / value: p1 > so if you have five sections they must have custom div attributes from p1 to p5 > section one > p1 > section two > p2 and so on.

3. Add this inside of the head tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.css">

4. Add this inside of the closing body tag

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.js"></script>

<script> $(document).ready(function() { $('#fullpage').fullpage({
    responsiveWidth: 900,
    verticalCentered: true,
    navigation: false,


	anchors: ['p1', 'p2', 'p3', 'p4', 'p5'],
	menu: '#myMenu'
              responsiveWidth: 720,
              scrollingSpeed: 1,
              css3: true,
              autoScrolling: true,
              fitToSection: true,
              fitToSectionDelay: false,
              scrollBar: true,
              easing: 'easeInOutCubic',
              easingcss3: 'ease',
              animateAnchor: true,
              loopBottom: true,
              loopTop: false,
              loopHorizontal: true,
              continuousVertical: true,
              continuousHorizontal: false,
              scrollHorizontally: false,
              interlockedSlides: false,
              resetSliders: false,
              fadingEffect: true,
              normalScrollElements: '#somesectionsID',
              scrollOverflow: false,
              scrollOverflowOptions: true,
              touchSensitivity: 5,
              normalScrollElementTouchThreshold: 15,
              bigSectionsDestination: null,
              /*My additions below this point*/      
              showActiveTooltip: true,

<!-- The script bellow controls the speed -->

    onLeave: function(index, nextIndex, direction){
    var idx = Math.abs(index - nextIndex)*.250;

Hope this helps

Piter :webflow_heart:

Thanks, i did what you wrote and this is the result:


now we don’t see section#2 when we scroll…

I think the problem is the height sections… what the height need to be?
and what the properties for the fullpage div? absolute / fixed, height and etc…

Read only link:

did you ever get this to work? having the same issue