Streaming live at 10am (PST)

Scrolling page transition


#1

Hi folks

I wonder if anyone can give me a steer on how i create a full page transition like this:
https://codyhouse.co/demo/page-scroll-effects/fixed.html

I've managed to establish create it once but not sure how to do it for multiple pages:
https://preview.webflow.com/preview/somatestsite?preview=65e64358b4c898ee273ea3dbd821a13f

Thanks in advance


Here is my public share link: https://preview.webflow.com/preview/somatestsite?preview=65e64358b4c898ee273ea3dbd821a13f
(how to access public share link)


#2

Did you try to download and use the plugin? https://codyhouse.co/gem/page-scroll-effects/


#3

Hey, I'm not sure how to do it. would you mind giving me a few pointers


#4

Hi samliew

I'd be extemely grateful if you could explain to me how I add the plug in to my site?

I'm trying to implement a plug-in (if it is even required?) to create a full page scroll transition. some examples of what I want to achieve:

Here's my site in progress:
https://preview.webflow.com/preview/somatestsite?preview=65e64358b4c898ee273ea3dbd821a13f

very best,
Tom


#5

Seems like the plugin doesn't have a github, so you have to download and upload the script and css files using this Github hosting tutorial.


Then, following the sections in the plugin tutorial https://codyhouse.co/gem/page-scroll-effects/,

  1. How it works - You need to add custom attributes to body

  2. Creating the structure - You will need to re-structure the page following the tutorial (follow exactly including the class names and tag names and element hierarchy)

  3. Adding style - If you have followed the tutorial exactly up to this point, you should be able to paste the code in this section into the Page Settings > Header Code, and wrap them between <style></style> tags

  4. Events handling - At this point you will need quite a bit of custom coding depending on the animation type you decide to use. In their demo's JavaScript file, they have combined all their animation types into this file, but it should be possible to just include this file without modifications in your project using the Github hosting tutorial I linked above.


If it's too difficult to use, search for a plugin with a simpler tutorial (like fullpage.js, which has a tutorial on Webflow forums), or simply hire a web developer.


Page scroll effect - plug in help
#6

I've tried to follow the github hosting tutorial but when I try to '1. Get embeddable link from any github resource' after clicking of 'Raw' all I get is a 'gist' url and not the stage you mentioned here:

I have never worked with code / github but if I can get these files hosted then your steps above look straight forward


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.