Jump between sections

Design help Animations & Interactions
1

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

https://amaze-ab6f4c.webflow.io/

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?
Thanks!

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

1 Like
2

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:

3

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

Thanks

1 Like
4

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,
   
        }); 
});

</script>

<script>$('#fullpage').fullpage({
	anchors: ['p1', 'p2', 'p3', 'p4', 'p5'],
	menu: '#myMenu'
  
              responsiveWidth: 720,
              scrollingSpeed: 1,
              
              //Scrolling
              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,
           
         
                });
        });
</script>

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

<script>
$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
    var idx = Math.abs(index - nextIndex)*.250;
    $.fn.fullpage.setScrollingSpeed(idx*5000);
    }
})
</script>

Hope this helps

Piter :webflow_heart:

5

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

https://amaze-ab6f4c-b30c1f461996b8e64de91f7e89.webflow.io/

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:
https://preview.webflow.com/preview/amaze-ab6f4c-b30c1f461996b8e64de91f7e89?utm_source=amaze-ab6f4c-b30c1f461996b8e64de91f7e89&preview=575dbad5c43a3dc3960462ffdecb8897

6

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