[Using timeline to play and pause video on hover]

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...

[Using timeline to play and pause video on hover]

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 !

[make a shape get back to initial position after rotation]

It works perfectly thank you !

[make a shape get back to initial position after rotation]

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 :

See the Pen NzNBrr by EmGes (@EmGes) on CodePen

 

[make a shape get back to initial position after rotation]

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 !

See the Pen xzZeOG by EmGes (@EmGes) on CodePen