Hi Community,
I'm creating an horizontal timeline using horizontal layouter/slider (cf video hereafter). The result is good but it's difficult to navigate horizontally on desktop pc, and using the horizontal scrollbar is not user friendly. I'm trying to find a solution or a trick to simplify the scrolling (perhaps arrows to navigate between items, or a kind of horizontal anchor). I saw a discussion about Timeline API but I'm not sure it works horizontally. If you have any idea, it would be helpful and appreciated 😊
Hi, loic.darolles,
currently, there is no solution for horizontal navigation on desktop pc with a layouter or a slider.
For your usage, I can recommend you using a repeater with an absolute amount of items:
In this solution, it is necessary for you to declare the number of items to the total of all the items in the repeater and to set the repeater margin with a negative value, also The section that holds the repeater has an overflow hidden.
The usage of Timeline API, in this case, is possible. Just notice that if you use forEachItem all the animations work the same way and if you use forItems with specific items each one of them will animate differently.
I’ve added an example usage for you:
Code
import wixWindow from 'wix-window'; import wixAnimations from 'wix-animations'; $w.onReady(function () { const repeater = $w('#repeater'); $w('#dataset').onReady(async function () { repeater.forEachItem(($item, itemData, index) => { let item = $item('#item'); let mainText = $item('#mainText'); let playOnce = true; let hoverTextAnimation = wixAnimations.timeline().add(mainText, { y: -20, x: 80, duration: 1000, opacity: 1, easing: "easeInSine" }, 0); item.onMouseIn(() => { console.log(item.id) if (playOnce) { animationComplete = false; hoverTextAnimation.play(); playOnce = false; } }); let counter = 0; let animationComplete = true; let repeaterMove = ($w('#repeater').data.length) / 3; console.log(repeaterMove); $w('#next').onClick(() => { if (counter < repeaterMove - 1 && animationComplete) { animationComplete = false; counter++; wixWindow.getBoundingRect() .then((windowSizeInfo) => { let windowWidth = windowSizeInfo.window.width; // wixAnimations.timeline().add($w('#repeater'), { x: `-=${windowWidth}`, duration: 900, easing: "easeInOutQuart" }).play().onComplete(() => { animationComplete = true; }); }); } }) $w('#prev').onClick(() => { if (counter > 0 && animationComplete) { animationComplete = false; counter--; wixWindow.getBoundingRect() .then((windowSizeInfo) => { let windowWidth = windowSizeInfo.window.width; // wixAnimations.timeline().add($w('#repeater'), { x: `+=${windowWidth}`, duration: 900, easing: "easeInOutQuart" }).play().onComplete(() => { animationComplete = true; }); }); } }) var initWidth; wixWindow.getBoundingRect() .then((windowSizeInfo) => { initWidth = windowSizeInfo.window.width; // console.log(initWidth) screenChange(); }) function screenChange() { wixWindow.getBoundingRect() .then((windowSizeInfo) => { let rWidth = windowSizeInfo.window.width; // if (rWidth !== initWidth) { console.log('inside if') let repeaterPosition = counter * rWidth; console.log(repeaterPosition); wixAnimations.timeline().add($w('#repeater'), { x: -repeaterPosition, duration: 900, easing: "easeInOutQuart" }).play().onComplete(() => { animationComplete = true; }); initWidth = rWidth; } }) setTimeout(() => { screenChange(); }, 50) } }) }) })
Demo: https://edensh0.editorx.io/layoutergallerypc
Also, here you can get some more information on the forEachItem and forItems repeater loops:
forEachItem link
forItems link
I've been looking for a solution to this matter for ages now. Thank you @Eden for taking your time to write a detailed answer.