User Events

With our user events and animation triggers, you can now seamlessly integrate animations that respond to user actions. Whether it's a click, hover, scroll, or any other user event, our system allows you to effortlessly associate animations with these actions, creating engaging and immersive interactions. Imagine stunning image transitions on hover, subtle element fades on scroll, or dynamic button effects on click.

Hover

• These interactions are triggered when the user hovers over the item with the defined class.
• This item needs to be an anchor element <a></a>.
• No JS file required for these animations.

        --hover-duration: 0.3s;
        --hover-easing: ease-in-out;
      

Click

• These interactions are triggered via javascript whenever called.
• This item can be any type of element.
• JS file needs to be added and initialized.

        // Initialize library
        var ex = new EX().init();

        // Call the animation event on item whenever required
        ex.triggerAnimation(item);
      

Scroll

• These interactions are triggered when user scrolls the the item the class has been added on.
• This item can be any type of element.
• This item needs the animation class already added.
• JS file needs to be added and initialized.

        // Initialize library
        var ex = new EX().init();

        // Item animation will be triggered when user scrolls to it
        <div class="fade-in ex-watch">
          Lorem Ipsum
        </div>