Good afternoon. Is it possible to set up multiple types of hover animations? So that when hovering over different triggers, the object has a different animation?
For example, point to a square and the picture moves to the right, point to a triangle and the picture moves to the left.
I need to make several images side by side and when hovering over each, the rest should move apart.
1 Like
Hi @Valeria_Gavrilyuk, welcome to the Readymag forum!
You can indeed have two step or more animations on a single project element, but these can not be independently triggered by different elements as you have proposed. Certainly something to suggest in this thread!
Alternatively, using code injection we achieved this by selecting the elements’ element data-id and using Javascript to trigger a ‘mouseover’ event. I have attached the code here as a starting point, got close to getting it to work! @neueMeta any chance you can take a look at this?
https://dev.headless.horse/multiple-triggers/
<style>
[data-id="TARGET"] {
background-color: yellow;
height: 100px;
width: 200px;
}
/* --------------- SPIN ANIAMTION --------------- */
[data-id="TARGET"].animate_spin {
animation: spin 1.5s forwards;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* --------------- SCALE ANIAMTION --------------- */
[data-id="TARGET"].animate_scale {
animation: scale 1.5s forwards;
}
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
background: red;
}
100% {
transform: scale(1);
}
}
</style>
<script>
// Change the elemnt id's of the values below //
const btn_spin = document.querySelector('[data-id=""]')
const btn_scale = document.querySelector('[data-id=""]')
const target_element = document.querySelector('[data-id="TARGET"]')
btn_spin.addEventListener('mouseover', () => {
target_element.classList.add('animate_spin')
setTimeout(() => {
target_element.classList.remove('animate_spin')
}, 1500)
})
btn_scale.addEventListener('mouseover', () => {
target_element.classList.add('animate_scale')
setTimeout(() => {
target_element.classList.remove('animate_scale')
}, 1500)
})
</script>
2 Likes
Well,
this isn´t that easy…
another solution as using CSS like @HEADLESS.HORSE ´s approach would be to go with Jquery and build the animations with it.
As you said you wanted to have several images side by side and moving apart on hover this is what I came up with: RM-test-clickme
With jquery, which is build in in RM you can use the .animate method to change the position of an element. Also with .animate() you can animate an element +=50px of its actual position. This makes it a bit easier to work with, as you dont have to get the actual position and calculate +50px onto it.
well here is my approach using jquery:
<script>
// set variables for each image
var image1 = $("[data-id=627b65811c00a90020c5f5cf]");
var image2 = $("[data-id=627b658830330000288f30f1]");
var image3 = $("[data-id=627b658b6d9580002f2071d1]");
var image4 = $("[data-id=627b658c2b40420014a94097]");
// set the animation time
var time = 300;
// picture1
// on mouseenter
image1.hover(function(){
image2.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
image3.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
image4.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
// on mouseout
}, function() {
image2.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
image3.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
image4.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
});
//picture2
image2.hover(function(){
image1.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
image3.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
image4.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
}, function() {
image1.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
image3.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
image4.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
});
//picture3
image3.hover(function(){
image1.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
image2.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
image4.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
}, function() {
image1.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
image2.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
image4.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
});
//picture4
image4.hover(function(){
image1.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
image2.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
image3.stop(true,false).animate({"left":"-=30px"}, time, 'swing');
}, function() {
image1.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
image2.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
image3.stop(true,false).animate({"left":"+=30px"}, time, 'swing');
});
</script>
``I kept it simple for people that are not that familiar working with code. This for sure can also be cleaned up, but I think to get behind this approach I leave it like that.
The only problem this has is: If you move your mouse fast above the images it gets messed up, as it .animates() as a animation is still running. If one want to dig into it, this surely would be manageble using a flag variable or something that is unbinding the hover handler.
1 Like
Nice! I think this should be a feature like there was an update for multiple set animations, but multiple triggers /w different effects would be helpful.
2 Likes
this would be great, yeah. Could also work like a group you put your element with an animation in it and the group/container also can have a animation.
1 Like
Ok, I had another look onto it and found a better solution:
This is a mixture of Jquery and CSS and is working like a charme. It can be adapted to other css values like rotation, scale or whatever you need. And you can still add a Readymaganimation to the widgets.
This can also be easily be adapted to only one element and more than 3 triggers wo widen this limitation if needed.
2 Likes