Sites on X - Showcase and Code Sharing

Ask the community
1

We’re very excited to share a new showcase page where you can see amazing sites built on Editor X.
There’ll be copy-pasteable code snippets ready for you to use if you’d like to recreate any effects you see that were made with code.
If you’d like your site to also be featured, just submit it to the page and we’ll review it. Keep in mind that some websites will be cloneable in our next update, so please check the box if you want people to be able to clone it.
A lot more website are coming soon with prebuilt sliders and cool interactions so stay tuned.
https://www.sitesonx.com/

9 Likes
2

3

Super cool, you guys are killing it!

4

I love this multiple scroll animation. Where can I find the code snippet for it and will there be a step-by-step instruction how to include it in one of my sites?

1266×611 248 KB

5

Here’s the snippet:

import wixWindow from 'wix-window';
import { timeline } from 'wix-animations';


$w.onReady(function () {
    onScroll();
});


function onScroll() {
    let scrollY;


    wixWindow.getBoundingRect()
        .then((windowSizeInfo) => {
            scrollY = windowSizeInfo.scroll.y;
            let windowHeight = windowSizeInfo.window.height;
            let oldY = 0;
            let scrollStart1 = windowHeight * 2;
            var scrollEnd1 = windowHeight * 3;
            var scrollRange1 = scrollEnd1 - scrollStart1;
            if (scrollY != oldY) {
                ////////////////////////////////////////////////////BOXES ANIMATION///////////////////////////////////////////////////////////////////////


                if (scrollY > scrollStart1 && scrollY < scrollEnd1) {


                    let scrollDiff2 = Math.abs(scrollY - scrollStart1);
                    let moveDown = (scrollDiff2 / scrollRange1) * windowHeight;
                    let moveUp = -((scrollDiff2 / scrollRange1) * windowHeight);


                    timeline().add($w('#text1'), { y: moveDown, duration: 100, easing: "easeLinear" }).play();
                    timeline().add($w('#text2'), { y: moveUp, duration: 100, easing: "easeLinear" }).play();


                } else if (scrollY <= scrollStart1) {
                    timeline().add($w('#text1'), { y: 0, duration: 200 }).play();
                    timeline().add($w('#text2'), { y: 0, duration: 200 }).play();
                } else {
                    timeline().add($w('#text1'), { y: scrollEnd1, duration: 200 }).play();
                    timeline().add($w('#text2'), { y: -scrollEnd1, duration: 200 }).play();
                }
            }
            oldY = scrollY;
        })
    setTimeout(() => {
        onScroll();
    }, 100)
}

You can see it by scrolling down on this website and clicking on See Snippet.

6

https://www.sitesonx.com/websites/multiple-scroll-animation
On this page, the color of the snippet text and the background is black so the snippet is not legible. This needs to be fixed.

1876×1730 89.4 KB

1876×1730 359 KB

7

Fixed it, thank you :slightly_smiling_face:

8

Hi Jonathan, I took a look in this creation, I think it yours… https://jonathant99.editorx.io/stickyscrollanim
Can you explain how the arrow scrolls in a different rate?
Maybe I can use like a alternative for horizontal images scrolling.
Tks
Edilson

9

This is great. How have I just seen this?!