I have a set of custom checkboxes that I'm applying an Animejs animation to on click. I figured this was the only way to get the animation working for each checkbox without having to manually add event listeners to each checkbox.
I'm having some troubles figuring out how to reverse the animations, however.
For reference, here's a codepen of what I'm working with so far:
https://codepen.io/osaisus/pen/BaJWvPv
HTML:
<p>How can I get the animations to reverse on second click?</p>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
.container {
display: flex;
align-items: center;
}
.box, .box2 {
border: 1px solid black;
padding: 10px;
margin: 1rem 1rem;
}
JS:
const checkbox = document.querySelectorAll(".box");
checkbox.forEach(item => {
item.addEventListener("click", (e) => {
e.preventDefault();
anime({
targets: item,
duration: 200,
easing: "easeInOutQuint",
borderRadius: [3, 50],
backgroundColor: "#ffd54f",
borderColor: ["#212529", "#ffd54f"],
});
})
})
There are many other posts out there on how to reverse animations on SINGLE elements, but none of the methods (as far as I've tested) work when applying the animation to a set of elements like what's done above.
Any help is much appreciated!
Doesn't take too much. Don't have to do it the way I did here, just keep some record of where you've been accessible to your event handler.
const checkbox = document.querySelectorAll(".box");
checkbox.forEach(item => {
let props = {
borderRadius: [3, 50],
backgroundColor: ["rgba(255, 255, 255, 0)", "#ffd54f"],
borderColor: ["#212529", "#ffd54f"],
};
item.addEventListener("click", (e) => {
e.preventDefault();
anime({
targets: item,
duration: 200,
easing: "easeInOutQuint",
...props
});
for (i in props) {
props[i].reverse();
}
})
})