Help with „Snap-Scroll“ Effect

Design help Animations & Interactions
1

Hello guys,

For our new agency website we wanna use some type of FullPage.js effect. The problem is that the old content should stay and the new content slides in from different sides…

Its quite similar idea like: Clocklab.design

Fullpage.js isnt what we want… i thought Sticky elements would work but then i need some Snappy Scrolling Effect… i mean no problem with Costum Code but maybe somebody already did this or has a better idea…

Thanks!

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

2

Hello @Matzinger,

The example that you are talking about uses FullPage.js horizontal scroll. You can get the extension here Scroll Horizontally Extension - fullPage.js

3

Are you sure? Because if you scroll further down than i think fullpage.js even with the extension want be enough… Because the old content stays in place and some more little details…

4

Hello @Matzinger,

I think so, because it actually slides the full page with the minimum scrolling. I think you can do what you want with position sticky though, but not with full page effect though. Good luck.

5

Hi @Matzinger,

You probably achieve that by using fullPage.js together with the Parallax extension as long as you use a parallax offset value of 100%.

You can see an example emulating Tumblr website here:

And you’ll find a tutorial on how to do it here:

If for any reason you have issues using it, you can perhaps try using my other library, pagePiling.js which does exactly what you want, but bear in mind I do not maintain it as much as I do fullPage.js and that it won’t have as many options either.
So I would really encourage you to try using fullPage.js first and see if that works out for you.

1 Like
6

Yeah i will use fullpage.js but in a different way… I will create a fake fullpage div which then gets scrolled and with scroll-triggerd animations i will fade in and out my sites from every direction i need… So there will be 2 layers

  1. Wrapper for the real content of the page
  2. Wrapper for the fullpage.js script to work properly (with z-index to -9999) :wink:

First Version and my testing area is here: LINK

It would be great if Webflow supports your scripts and we can use the events of fullpage.js, pagepiling.js, multiscroll.js for IX2 :smiley:

1 Like
7

@Matzinger, wow your first version is looking really cool! Good Job :clap::clap:

1 Like
8

@Matzinger looking great!
Just bear in mind you are not using the right CSS file. You are using the CSS for fullPage.js 2.9.7 but then using fullPage.js 3.0.7.

You can get the CSS from the exact same CDN as the JS file:
https://unpkg.com/fullpage.js@3.0.7/dist/fullpage.min.css

It would be great if Webflow supports your scripts and we can use the events of fullpage.js, pagepiling.js, multiscroll.js for IX2 :smiley:

It would, wouldn’t it? Unfortunately not sure if it is in their plans! :slight_smile:

9

Thanks for the info :smiley:

I created a Wishlist Post for this. Maybe it helps :smiley:

10

Thanks for that! :slight_smile:
Perhaps it can be helpful for others!