top of page
How to move elements to random positions
ABOUT
Interested in randomizing animations? Learn how to move elements on your Wix site to random positions.
SUITABLE FOR
Editor X, Classic editor
PROJECTS USED

Chapter 01: Layout
01. Add some elements
02. Adjust the position of the elements
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Chapter 02: Velo
01. Turn on Dev Mode
02. Paste the code
03. Rename the element IDs (“Shape01”)
04. Adjust X and Y pixel distance
05. Customize the duration and easing
import wixAnimations from 'wix-animations';
$w.onReady(function () {
randomMove()
});
function randomMove() {
const shapes = ['#Shape01', '#Shape02'];
shapes.forEach(shape => {
$w(shape).onMouseIn(async () => {
let moveX = await randomInteger(-50, 50);
let moveY = await randomInteger(-50, 50);
wixAnimations.timeline()
.add($w(shape), { x: moveX, y: moveY, duration: 400, easing: 'easeOutBack' }).play();
})
})
}
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
MORE HOW TO'S
bottom of page







