top of page

Forum Posts

Studio Shapeshift
Jan 21, 2021
In Coding with Velo
Hi everyone, I am a bit desperate and blocked in my project. Below is a code that the Editor X's Team has shared to help me. I have edited it accordingly to his indications, and here's the live result (mobile breakpoints not optimized again) : https://www.stage.studioshapeshift.com/who-we-are As you can see, the result is very buggy. Could you tell me what I have missed, please ? Thanks in advance for your help and return on this try. import wixAnimations from 'wix-animations'; import wixWindow from 'wix-window'; $w.onReady(function () { let repeater = $w('#aboutslider'); let leftSliderBtn = $w('#back'); let rightSliderBtn = $w('#next'); let counter = 3;     rightSliderBtn.onClick(() => {         slideRight();     })     leftSliderBtn.onClick(() => {         slideLeft();     }) function slideRight() {         counter++;         wixWindow.getBoundingRect()             .then((windowSizeInfo) => { let documentWidth = windowSizeInfo.document.width; let moveDistance = documentWidth * 0.68; // Container width if (counter > 0) {                     wixAnimations.timeline().add(repeater, { x: -(counter * moveDistance), duration: 300, easing: 'easeOutSine' }).play()                 } else {                     wixAnimations.timeline().add(repeater, { x: -(counter * moveDistance), duration: 300, easing: 'easeOutSine' }).play();                 }             });     } function slideLeft() {         counter--;         wixWindow.getBoundingRect()             .then((windowSizeInfo) => { let documentWidth = windowSizeInfo.document.width; let moveDistance = documentWidth * 0.68; // Container width if (counter < 0) {                     wixAnimations.timeline().add(repeater, { x: (repeater.data.length - 1) * -moveDistance, duration: 300, easing: 'easeOutSine' }).play();                     counter = 0;                 } else {                     wixAnimations.timeline().add(repeater, { x: counter * -moveDistance, duration: 300, easing: 'easeOutSine' }).play();                 }             });     } });
0
0
190

Studio Shapeshift

More actions

This website was designed with Velo by Wix

bottom of page