Swap out video for image

[cerealbeast]

I have been given this code by a friend, its an image reveal on text hover using GSAP. I need to swap out the videos for images. I have replaced "data-video" with "data-image" in the html but I think the js has to also be amended and I'm not quite sure how to do so. The bottom text hover is working using a video, the top one I have replaced with an image but its not currently working.

See the Pen ceff919dd153138c88a0c5e30b9b1d5b by gwjr (@gwjr) on CodePen

[mvaneijgen]

Hi @cerealbeast welcome to the forum!

 

I'm sorry to say that this isn't a GSAP related question, the code snippet surely uses GSAP, but the rest of the code is just normal Javascript (and some jQuery) and we like to keep this forum scoped to GSAP related questions. 

 

That said your problem lies in the template logic that is being set on line 38. There it gets the dataset.videomp4 and creates a video element. I've modified your pen a bit to check if the element you hover has a dataset.image and change the template to load an image instead. I had to disable the automatic playing of the video, because the code will fail if you hover and there is no video, so you have to check if it is a video and then only then play() and pause() the animation, but again, this has nothing to do with GSAP and is out of scope of this forum.

 

Hope it helps and happy tweening! 

 

See the Pen VwdGzEE?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen