Someone has tried to use node-module "locomotive Scroll"? or someone knows how to integrate this and run it?

Ask the community
1

2

Locomotive scroll requires you to a dd the base styles to your CSS file. With Wix/Corvid you can’t edit your CSS with code/Add CDNs. Also, Locomotive Scroll works primarily through specific attributes in HTML which cannot be changed from the editor.

Since thats the case I can recommend the following that will give you a similar scrolling effect: on both Editor X and the Classic editor there are built in features to create a parallax scrolling effect for different UI elements like images for example.

Here are the steps:

  1. Click the image in your Editor.

  2. Click the Settings icon (looks like a gear/cog).

  3. Click the Scroll Behavior drop-down and choose an option:

  • None: There is no scroll effect on your image.

  • Parallax: The image moves at a different speed to the other elements, giving a 3D effect.

  • Reveal: The image is revealed as you scroll down your site.

Is there something else you were specifically trying to do with the locomotive scroll module?

3

Joshua, tks for reply, but I already use regular parallax effects, but in EditorX makes the image bigger and the movement is not smouth. Also in wix animation there are a lot of limitation. Right now we are trying to find something that shows to our clients different visual effects. Anyway if you have any suggestions for how to use locomotive scroll I’ll be so grateful, also we are trying to use vanilla-tilt and if you have any tip it will be good. We are a small agency based in São Paulo - Brasil and we are always looking for someone who can collaborate and be able to work together on our projects.

4

First sorry for delay, I’m looking for 2 things, implementing a horizontal scroll effect using vanilla JavaScript and smooth scroll effect with locomotive scroll.
In Off Barcelona website they have a horizontal text scroll controlled by scroll.

5

Hey @info60133 , I’ve made this example a while ago, is this what you’re trying to achieve?
Here’s the snippet for it. You will need to make some adjustments to make it work exactly as you want. For more advanced help you can visit the Velo forum .

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

$w.onReady(function () {
    txtScroll()

 function txtScroll() {
        wixWindow.getBoundingRect()
        .then((windowSizeInfo) => {
        let scrollY = windowSizeInfo.scroll.y;
        timeline().add($w('#mytxt'), { x: scrollY, duration: 100 }).play();
 });
        setTimeout(txtScroll, 10);
 }
});
6

This is great. Thank You.