EmGes

Hi ! Thank you for your answer, I thought that maybe gsap could help achieve this in a simple way. However in the html in your codepen, a div is not closed in the end : <div id="hover" class="button">PLAY/PAUSE (hover)</div it still works though. When trying that code I had to close it but nothing moves...

I'm trying to set up un html page displaying 2 videos that could each be played by hovering a button placed next to it. I would also like them to pause on mouse out. I've tried several codes including using javascript and/or jquery but it just doesn't work. I'm not sure if it's possible at all so here's my html : <div class="video-one"> <video loop preload="auto" > <source src="street-copy.mp4" type="video/mp4"> </video> </div> Thank you !

It works perfectly thank you !

I'm sorry if I wasn't clear ! Actually here I isolated some elements from a larger animation where I'm trying to replicate the movements of an accordion. So thank you a lot, that's exactly what I wanted to do ! However now I need to make it work on several rectangles at a time, I tried this but it doesn't work : https://codepen.io/EmGes/pen/NzNBrr

Hello, as you can see on the codepen, I'm trying to rotate + translate the black shape when the mouse is on the grey shapes. Each of them makes the black one rotate in a different angle. What I want to do is make the shape get back to its initial position on click. This work when the shape has rotated in one angle, but once it has rotated on two, it doesn't anymore. Any idea on how to fix this ? Thanks !