Want to know how you can use velo to animate Wix page elements? Find out how to use multiple animations and triggers to make your website visually appealing and interactive. Stay tuned for in-depth knowledge about this trick. Then stay tuned for in-depth knowledge about this trick and the code behind it.
Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!
📚 WHAT WAS COVERED:
00:00 CN Intro
01:00 Setup Elements for Website (Images, Boxes, Buttons, Vectors, etc.)
02:50 Animation Process Explained
06:51 Example 1 Code & Functionality (Repeating Animation)
11:20 Create Public Code to import Enum Objects
13:55 Example 1 Continued Timeline Add Method
20:57 Example 2 Same Animation to Multiple Elements
23:02 Example 3 Continuous Animation on Multiple Elements
26:16 Preview Animations & Timelines
27:44 Outro
Code Snippet to follow along with the video:
Page Code
This loads the page code. This code will be an event handler that will share data to the Rich Content Element. Connect a dataset to the rich content element and load the data by the filter. Filtering a data set will change the information on the page.
// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world
// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world
import wixAnimations from 'wix-animations';
import easeEnum from 'public/Enums/app.js';
/*
Typical Animation Process
import wixAnimations from 'wix-animations';
let timeline = wixAnimations.timeline(
{
"repeat": 3,
"repeatDelay": 100,
"yoyo": true
}
);
$w.onReady( function () {
const myImage = $w("#myImage");
timeline
.add( myImage, {
"rotate": 360,
"scale": .5,
"duration": 1000
} )
.add( myImage, {
"opacity": 0,
"duration": 1000
} );
$w("#playButton").onClick( () => {
timeline.play();
} );
$w("#reverseButton").onClick( () => {
timeline.reverse();
} );
$w("#pauseButton").onClick( () => {
timeline.pause();
} );
$w("#replayButton").onClick( () => {
timeline.replay();
} );
} );
*/
let timelineOptions = {
repeat: 3, // -1 means infinitely plays, 0 means play once, 3 means it plays 4 times
repeatDelay: 0, //waits 1 sec before the animation is displayed again
yoyo: true // false = A -> B -> C -> A -> B -> C -> A -> B -> C | true = A -> B -> C -> C -> B -> A -> A -> B -> C
}
$w.onReady(function () {
//Example 1
const image1 = $w("#image1");
const vimage1 = $w("#vectorImage5");
let bxTimeline = {},
bxrepeatnum = 1,
duration = 1000;
Object.assign(bxTimeline, timelineOptions);
bxTimeline.repeat = bxrepeatnum;
bxTimeline.yoyo = false;
let boxTimeline = wixAnimations.timeline(bxTimeline);
boxTimeline.add(vimage1,
[{
"opacity": 0.0,
"duration": 0,
"delay": 0
}, {
"rotate": 1020,
"rotateDirection": "cw",
"opacity": 1.0,
"scale": 1.0,
"duration": duration,
"easing": easeEnum.in.easeInCubic
}, {
"opacity": 0.0,
"duration": 0,
"delay": duration
}]
).add(image1,
[{
"opacity": 0.0,
"duration": 0,
"delay": 0
}, {
"x": "+=90",
"y": "+=90",
"scale": 0.5,
"opacity": 0.0,
"delay": duration,
"duration": duration * 0.2,
"easing": easeEnum.out.easeOutQuint
}, {
"opacity": 1.0,
"delay": duration * 2,
"duration": duration * 0.2,
"easing": easeEnum.out.easeOutQuint
}, {
"x": "-=180",
"y": "-=180",
"scale": 0.5,
"opacity": 1.0,
"delay": duration * 2.2,
"duration": duration * 3,
"easing": easeEnum.out.easeOutQuint
}, {
"opacity": 0.0,
"duration": 0,
"delay": duration * 2.5
}]
);
boxTimeline.onStart((event) => {
// handle timeline start
console.log("Timeline has started.");
console.log(event);
//cnt1 = cnt2 = 0;
vimage1.show();
setTimeout(() => {
//Putting rocket into position to start then showing the image at the low right hand corner
console.log("show image1");
image1.show();
}, duration * 2.2)
});
let bxfinished = false;
boxTimeline.onComplete((event) => {
console.log("Timeline has completed playing forwards.");
console.log(event);
vimage1.hide();
image1.hide();
bxfinished = true;
});
$w("#box40").onMouseIn((event) => {
if (!bxfinished) {
boxTimeline.play();
} else {
boxTimeline.replay();
bxfinished = false;
}
})
$w("#box40").onMouseOut((event) => {
boxTimeline.pause();
vimage1.hide();
image1.hide();
})
//Example 2
//Add animations on multiple page elements together
const vimage2 = $w("#vectorImage6, #vectorImage7");
let btnTimeline = {};
Object.assign(btnTimeline, timelineOptions);
btnTimeline.repeat = 0;
btnTimeline.yoyo = false;
let buttonTimeline = wixAnimations.timeline(btnTimeline);
buttonTimeline.add(vimage2,
[{
"y": "+=100",
"x": "+=50",
"rotate": "+=270",
"duration": 1000,
"easing": easeEnum.inOut.easeInOutExpo
}, {
"y": "-=100",
"rotate": "-=270",
"delay": 1005,
"duration": 1000,
"easing": easeEnum.inOut.easeInOutExpo
}]
);
buttonTimeline.onStart((event) => {
// handle timeline start
console.log("Timeline has started.");
console.log(event);
//cnt1 = cnt2 = 0;
});
let btnfinished = false;
buttonTimeline.onComplete((event) => {
console.log("Timeline has completed playing forwards.");
console.log(event);
btnfinished = true;
});
buttonTimeline.onRepeat((event) => {
console.log("Timeline is repeating.");
console.log(event);
});
buttonTimeline.onReverseComplete((event) => {
console.log("Timeline has completed playing backwards.");
console.log(event);
});
$w("#button1").onClick((event) => {
if (!btnfinished) {
buttonTimeline.play();
} else {
buttonTimeline.pause().reverse();
btnfinished = false;
}
})
//Example 3
//Add animations on multiple page elements together
const vimage3 = $w("#vectorImage3");
const vimage4 = $w("#vectorImage4");
const line1 = $w("#line1");
let txtTimeline = {};
Object.assign(txtTimeline, timelineOptions);
txtTimeline.repeat = -1;
txtTimeline.yoyo = false;
let textTimeline = wixAnimations.timeline(txtTimeline);
let textTimeline1 = wixAnimations.timeline(txtTimeline);
let textTimeline2 = wixAnimations.timeline(txtTimeline);
textTimeline.add(vimage3,
[{
"x": "-=100",
"duration": 1000,
"easing": easeEnum.inOut.easeInOutExpo
}, {
"x": "+=100",
"delay": 1005,
"duration": 1000,
"easing": easeEnum.inOut.easeInOutExpo
}]
);
textTimeline1.add(vimage4,
[{
"x": "+=100",
"duration": 1000,
"easing": easeEnum.inOut.easeInOutExpo
}, {
"x": "-=100",
"delay": 1005,
"duration": 1000,
"easing": easeEnum.inOut.easeInOutExpo
}]
);
textTimeline2.add(line1,
[{
"y": "+=100",
"duration": 1000,
"easing": easeEnum.inOut.easeInOutExpo
}, {
"y": "-=100",
"delay": 1005,
"duration": 1000,
"easing": easeEnum.inOut.easeInOutExpo
}]
);
textTimeline.onStart((event) => {
// handle timeline start
console.log("Timeline has started.");
console.log(event);
//cnt1 = cnt2 = 0;
});
textTimeline.onComplete((event) => {
console.log("Timeline has completed playing forwards.");
console.log(event);
txtfinished = true;
});
textTimeline.onRepeat((event) => {
console.log("Timeline is repeating.");
console.log(event);
});
textTimeline.onReverseComplete((event) => {
console.log("Timeline has completed playing backwards.");
console.log(event);
});
let txtfinished = false;
$w("#text88").onMouseIn((event) => {
textTimeline.play();
textTimeline1.play();
textTimeline2.play();
line1.show("fade");
vimage3.show("fade");
vimage4.show("fade");
})
$w("#text88").onMouseOut((event) => {
line1.hide("fade");
vimage3.hide("fade");
vimage4.hide("fade");
textTimeline.pause();
textTimeline1.pause();
textTimeline2.pause();
})
});
Public Code
Use public code to give access to all repeatable functions throughout the website. This is good to use when you have multiple pages using the same code.
// Filename: public/Enums/app.js
// Code written in public files is shared by your site's
// Backend, page code, and site code environments.
// Use public files to hold utility functions that can
// be called from multiple locations in your site's code.
const easeEnum = {
in: {
easeInSine: "easeInSine",
easeInQuad: "easeInQuad",
easeInCubic: "easeInCubic",
easeInQuart: "easeInQuart",
easeInQuint: "easeInQuint",
easeInExpo: "easeInExpo",
easeInCirc: "easeInCirc",
easeInBack: "easeInBack",
easeInElastic: "easeInElastic",
easeInBounce: "easeInBounce"
},
out: {
easeOutSine: "easeOutSine",
easeOutQuad: "easeOutQuad",
easeOutCubic: "easeOutCubic",
easeOutQuart: "easeOutQuart",
easeOutQuint: "easeOutQuint",
easeOutExpo: "easeOutExpo",
easeOutCirc: "easeOutCirc",
easeOutBack: "easeOutBack",
easeOutElastic: "easeOutElastic",
easeOutBounce: "easeOutBounce"
},
inOut: {
easeInOutSine: "easeInOutSine",
easeInOutQuad: "easeInOutQuad",
easeInOutCubic: "easeInOutCubic",
easeInOutQuart: "easeInOutQuart",
easeInOutQuint: "easeInOutQuint",
easeInOutExpo: "easeInOutExpo",
easeInOutCirc: "easeInOutCirc",
easeInOutBack: "easeInOutBack",
easeInOutElastic: "easeInOutElastic",
easeInOutBounce: "easeInOutBounce"
},
neutral: {
easeLinear: "easeLinear"
}
}
let easyingInEnum = {
easeInSine: "easeInSine",
easeInQuad: "easeInQuad",
easeInCubic: "easeInCubic",
easeInQuart: "easeInQuart",
easeInQuint: "easeInQuint",
easeInExpo: "easeInExpo",
easeInCirc: "easeInCirc",
easeInBack: "easeInBack",
easeInElastic: "easeInElastic",
easeInBounce: "easeInBounce",
easeLinear: "easeLinear"
};
let easyingOutEnum = {
easeOutSine: "easeOutSine",
easeOutQuad: "easeOutQuad",
easeOutCubic: "easeOutCubic",
easeOutQuart: "easeOutQuart",
easeOutQuint: "easeOutQuint",
easeOutExpo: "easeOutExpo",
easeOutCirc: "easeOutCirc",
easeOutBack: "easeOutBack",
easeOutElastic: "easeOutElastic",
easeOutBounce: "easeOutBounce"
};
let easyingInOutEnum = {
easeInOutSine: "easeInOutSine",
easeInOutQuad: "easeInOutQuad",
easeInOutCubic: "easeInOutCubic",
easeInOutQuart: "easeInOutQuart",
easeInOutQuint: "easeInOutQuint",
easeInOutExpo: "easeInOutExpo",
easeInOutCirc: "easeInOutCirc",
easeInOutBack: "easeInOutBack",
easeInOutElastic: "easeInOutElastic",
easeInOutBounce: "easeInOutBounce"
};
export {easyingInEnum, easyingOutEnum, easyingInOutEnum};
export default easeEnum;
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
📺 MY PLAYLISTS :
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 WEBSITE
Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!
