Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Mar 24
Edited: Mar 24

Sites on X - Showcase and Code Sharing

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/





6 comments

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?




Mar 24Edited: Mar 24

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.

Editor X

Design your boldest creations.