The work - running text
Slideshow, All interactions
import wixWindow from 'wix-window';
$w.onReady(function () {
//nav animation first line
const news01Container = $w('#newsStrip01');
const news02Container = $w('#newsStrip02');
const news01Timeline = wixAnimations.timeline({
repeat: -1,
});
const news02Timeline = wixAnimations.timeline({
repeat: -1,
});
getWindowSizes().then((winWidth) => {
news01Timeline
.add(news01Container, { x: -winWidth, duration: 25000, easing: 'easeLinear' })
.add(news01Container, { x: winWidth, duration: 0, easing: 'easeLinear' })
news02Timeline
.add(news02Container, { x: -winWidth, duration: 25000, easing: 'easeLinear' })
.add(news02Container, { x: winWidth, duration: 0, easing: 'easeLinear' })
news01Timeline.play();
news01Timeline.onStart(() => {
setTimeout(() => {
news02Timeline.play();
}, 12500)
});
});
// nav animation second line
const news03Container = $w('#newsStrip03');
const news04Container = $w('#newsStrip04');
const news03Timeline = wixAnimations.timeline({
repeat: -1,
});
const news04Timeline = wixAnimations.timeline({
repeat: -1,
});
getWindowSizes().then((winWidth) => {
news03Timeline
.add(news03Container, { x: winWidth, duration: 25000, easing: 'easeLinear' })
.add(news03Container, { x: -winWidth, duration: 0, easing: 'easeLinear' })
news04Timeline
.add(news04Container, { x: winWidth, duration: 25000, easing: 'easeLinear' })
.add(news04Container, { x: -winWidth, duration: 0, easing: 'easeLinear' })
news03Timeline.play();
news03Timeline.onStart(() => {
setTimeout(() => {
news04Timeline.play();
}, 12500)
});
});
// nav animation third line
const news05Container = $w('#newsStrip05');
const news06Container = $w('#newsStrip06');
const news05Timeline = wixAnimations.timeline({
repeat: -1,
});
const news06Timeline = wixAnimations.timeline({
repeat: -1,
});
getWindowSizes().then((winWidth) => {
news05Timeline
.add(news05Container, { x: -winWidth, duration: 25000, easing: 'easeLinear' })
.add(news05Container, { x: winWidth, duration: 0, easing: 'easeLinear' })
news06Timeline
.add(news06Container, { x: -winWidth, duration: 25000, easing: 'easeLinear' })
.add(news06Container, { x: winWidth, duration: 0, easing: 'easeLinear' })
news05Timeline.play();
news05Timeline.onStart(() => {
setTimeout(() => {
news06Timeline.play();
}, 12500)
});
});
});
function getWindowSizes() {
return wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
return windowSizeInfo.window.width;
});
}
Explore more Hover interactions
Appearing Hot Dog
Jonathan Tsodikovitch
Appearing Hot Dog
Jonathan Tsodikovitch