Streaming live at 10am (PST)

One Page Scroll Animation

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

Yes http://fixx.webflow.io

Hey,
Do you know how ??

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

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

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 !