Streaming live at 10am (PST)

One Page Scroll Animation


#1

Hello,
Anybody here successful in getting this kind of scroll animation in a Webflow powered site?

http://www.thepetedesign.com/demos/onepage_scroll_demo.html


Can we produce this cool scroll behaviour in Webflow?
One Page Scroll
#2

Yes http://fixx.webflow.io


#3

Hey,
Do you know how ??


#4

Mind sharing the share-link with me? (you can message me )


#5

It's very easy, webflow already have such components to create the structure as shown in the demo:

<div class="main">
  <section>...</section>
  <section>...</section>
  ...
</div>

You drop a div, give it a class of "main", then drop sections inside it.

Then you paste this in the Page Settings > Custom Code (before body tag):

<script>
$.getScript('https://raw.githubusercontent.com/peachananr/onepage-scroll/master/jquery.onepage-scroll.min.js', function() {
  $(".main").onepage_scroll();
});
<script>

Then you copy the CSS from here https://github.com/peachananr/onepage-scroll/blob/master/onepage-scroll.css, and paste it in your Site Settings > Custom Code > Before body tag


#6

Hello ! Thx for sharing all this ! I'm really looking for managing to set up this one page scrolling for a little website. I've tried following those steps but i'm probably missing something. Not a big expert on adding custom code indeed ^^...
Is there a link to download the Jquery one page ?
Does the elements i put in my page have to be named the same as the elements of the CSS i copied in the site setting ?

I'm a bit confused, but the only sure thing, is that is doesn't work .. :frowning:
https://preview.webflow.com/preview/boheme-folk?preview=189c53ab2aab185d94b228cf848a8ce9

Thx for any potential help !


#7