Moving elements

Discussion Ask a question
,
1

I want to make these two media strips (around 5 images each) move/float across the landing page. (Moving automatically on their own without any triggers)

Any ideas on how to achieve this?

Thanks!!

2732×2048 242 KB

2

https://www.wix.com/velo/reference/wix-animations

3

Thank you @russian-dima or the reply! How could I apply this?

4

Simple example…

import { timeline } from 'wix-animations';


$w.onReady(async()=>{let revealTimeline;
    let myImage = $w('#img1');
    setInterval(async function() {
        let array = ['easeOut', 'easeIn', 'zoomOut', 'zoomIn'];
        let randomNumber = get_randomDigits(); console.log(randomNumber);
        let randomAnimation = getRandomValueFromArray(array);
        let x = Number(await get_randomDigits());
        let y = Number(await get_randomDigits());
        revealTimeline = timeline()
        .add(myImage, {
            easing:randomAnimation,
            delay:1000, 
            duration:300,
            scale:1.0, 
            x:x, y:y, 
        });
        await revealTimeline.play();
    }, 1000);

    function get_randomDigits() {
        return Math.floor(Math.random() * (600 - 50 + 1)) + 50;
    }
    function getRandomValueFromArray(arr) {
        var randomIndex = Math.floor(Math.random()*arr.length);
        return arr[randomIndex];
    }
});
1 Like
5

Thank you so much!!!

1 Like
6

Did it solve your issue?

Of course you can change the whole random behaviour of the code-function.
This was just a quick generated example-code.

Work on it and improve it. :wink:

7

It does seem to work. I applied it to a container instead of an image. I’m trying to figuring out how to make it move just on a straight line instead of running around.

8

The example works with 2-axes —> x + y!
Cut of (deactivate one of them), this will change the movement to just one direction → UP and DOWN or LEFT+RIGHT.