Jump to content
Search Community

jquery player fonction with gsap timeline

feulait test
Moderator Tag

Recommended Posts

Hi there! 

 

I'm newbie with GSAP but really enjoy using it!!! 

 

I'm currently trying to build a hover for my site company that play a video on background when hovered. As you can see on the code pen exemple, it works great. My problem is:  I would like to pause the video after the the timeline reverse completely. I can find how to delay the pause fonction or using onReverseComplete in the timeline properties but nothing work... 

 

Another solution would be to just pause the video and not going back to 0 but the fix img (.img) doesn't come back. But I can't find how to exclude the img animation when the timeline is reversed. 

 

Thanks for your help :)

See the Pen pogjbpo?editors=1111 by feulait (@feulait) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey feulait and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

if you put onReverseComplete: myHandler in your timeline vars you can see that it does indeed fire when the reverse is completed. But if you look in your dev tools console, you're see an error that $('.videopreview') is undefined. Fix that and it will do what you're wanting it to. You could save a variable like you do with the other things: 

var video = $(this).find(".videopreview");

But if you do that then you'll need to use [0] in the handler to get the actual DOM element:

function myHandler() {
  video[0].pause();
  video[0].currentTime = 0;
  gsap.to(img,{opacity:0});
  console.log("reverse complete");
}

 

  • Like 1
  • Thanks 1
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.
×
×
  • Create New...