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;

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2022: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 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!