How to stop an animation when another begin?

Animations
1

Hello everyone!

I’ve been trying to create something on my main page, but I’m stuck. The idea is to have four categories (text), and when I click on one, the corresponding images appear. For example, if I click on “Illustrations,” the illustrations should appear, but if I then click on “Hobbies,” the illustrations should disappear and be replaced by the hobbies.

I’ve managed to get the images to appear, but the categories just overlap each other! How can I make one animation stop when another begins?

For reference, here’s the link to my main page: https://emdvolder.xyz/

PS: The animation I used is “Opacity,” and I set the trigger on the word.

1 Like
2

this is only possible with custom code and would require some css/ javascript coding.
With inbuild RM widgets this is only possible if you have 2 tabs.

1 Like
4

Thank you a lot, after some research and typing I did find how to code it!
Besides, maybe it’s obvious and I’m a bit slow, but: How do you put pictures in the code line in the widget tool? My code works, but I can’t find how to insert the images in my code!

1 Like
5

one option is to insert the pictures manually with html or you arrange the pictures in RM and address them with the data-id and js/css

6

do you mind sharing how you done it with code? I have having the same problems but would love to learn how! thank you in advance!

1 Like
7

It sounds like you’re on the right track, but the issue is that the images for different categories are overlapping because the “opacity” animation doesn’t necessarily hide the elements, it just makes them transparent. To fix this, you can use a combination of opacity and display properties. Here’s how you can do it:

  1. CSS Display Property: Along with setting the opacity, you’ll want to set the display property to none when an image group is inactive and block (or flex) when it’s active. This way, the images won’t just be invisible, but they’ll also stop occupying space on the page.
  2. JavaScript for Triggering: Use JavaScript to detect when a category is clicked and then apply both opacity and display changes for the corresponding image group.

Here’s an example of how you could structure it:

css

Copy code

/* Initially hide all categories */
.category {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Active class to show the current category */
.active {
    display: block;
    opacity: 1;
}

Then, in your JavaScript:

javascript

Copy code

const categories = document.querySelectorAll('.category');
const buttons = document.querySelectorAll('.category-button');

buttons.forEach(button => {
    button.addEventListener('click', (e) => {
        // First, hide all categories
        categories.forEach(cat => {
            cat.classList.remove('active');
        });

        // Now, show the selected category
        const selectedCategory = document.getElementById(button.dataset.target);
        selectedCategory.classList.add('active');
    });
});

Make sure each button has a data-target attribute corresponding to the ID of the category it’s meant to show, like this:

html

Copy code

<button class="category-button" data-target="illustrations">Illustrations</button>
<button class="category-button" data-target="hobbies">Hobbies</button>

<div id="illustrations" class="category">...</div>
<div id="hobbies" class="category">...</div>

This way, when you click on a category, it will hide the other images and show only the ones you want. Hope this helps!

By the way, if you’re ever looking to take your visuals to the next level with professional animations, check out Illustration Services for stunning Illustration services. They can really make your project stand out!