Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alessio

Mouse Hover a title and start animation alpha and video mp4

Recommended Posts

I'm experimenting with tweenmax. What I would like to do is:
1. When the mouse passes on a text, you start to see the box where the video is.
2. When the mouse leaves the text, the video resets and hides itself.
3. The procedure is repeated.

See the Pen gzorRw by kaos-alessio (@kaos-alessio) on CodePen

Link to comment
Share on other sites

I do not understand why the video does not start. Thx
 

Link to comment
Share on other sites

Alright, I ignored that part completely. To play, pause video you need to select the video element and use it's play or pause method and you can reset time by setting currentTime property to zero. Check the updated demo.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

When I go on the title, we see the logo but the video does not start. If I click on the white and go with the mouse on the title, the animation starts. Why this thing? Should not the animation start immediately?

 

Thx a lot

Link to comment
Share on other sites

I thought you meant you want video to play when you hover text and pause when you mouse out.

 

I have updated the demo and wrapped your content boxes in a wrapper so you can use that wrapper to listen mouse events.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@Sahil thx. Autoplay when the mouse hovers over the text does not work, gives me this error:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

 

Honestly I tried to fix it, but with negative outcomes.

 

Link to comment
Share on other sites

@alessio Sorry I am not sure what effect you are trying to achieve and what problem you are facing. It will be great if you rephrase your question and post a simple demo that shows your problem.

  • Like 1
Link to comment
Share on other sites

@Sahil the problem is that when I move the mouse over the text, the animation should start. In chrome and firefox this does not happen. And the mistake I see is Uncaught (in promise) DOMException: play ().
as if he were putting the animation on pause

Link to comment
Share on other sites

Hello!

 

Videos can't autoplay with sound on. Set your video's muted property to true and it should work as you have it.

 

Video with sound can only play if the user interact with it in a meaningful way. A click or a tap. Mouse hover are not classed as intentional interaction as one can easily hide nefarious code to play annoying sounds in such interaction without the user wanting it. ;)

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×