News #01
News #02
News #03
News #04
News #05
News #06
News #07
News #08
ANIMATED NEWS STRIP
Assets:
1 Section.
2 Containers.
8 Text elements.
Instructions:
1. Add to each container a grid with as many columns as you like.
2. Add the contents to the cells of the containers.(See image below)
3. Stretch the containerד to fill the entire width of the section.
4. Give IDs to the containers as it appears in the code (news01Container, news02Container).
5. Copy and paste the code.
6. Learn how the code works.
import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';
$w.onReady(function () {
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: 20000, easing: 'easeLinear' })
.add(news01Container, { x: winWidth, duration: 0, easing: 'easeLinear' })
news02Timeline
.add(news02Container, { x: -winWidth, duration: 20000, easing: 'easeLinear' })
.add(news02Container, { x: winWidth, duration: 0, easing: 'easeLinear' })
news01Timeline.play();
news01Timeline.onStart(() => {
setTimeout(() => {
news02Timeline.play();
}, 10000)
});
});
});
// Window API: https://www.wix.com/corvid/reference/wix-window/getboundingrect
function getWindowSizes() {
return wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
return windowSizeInfo.window.width;
});
}