Hello, I hope you’re doing well!
I want to add a little bouncy scale up animation on the hover of some embed elements (youtube videos in my case).
It works well, but I need to wait a little time (something like <0.5sec) before I can make any interaction on the embed, even if I remove the time of the transition.
If I dont remove my cursor from the embed after hovering it (and waiting for the first delay), I can interact with it multiple time without delay, so the hover animation is the problem here, but I don’t know if a solution exist.
I tried :
- use a custom animation on hover in/out
- use a hover transform with and without transition
- add the animation on the wrapper of my embed
- use multiple types of embeds
Link to the test page : https://video-hover-test.webflow.io/
Here is my public share link: LINK
(how to access public share link)
hi @Monologix Without read-only and live page link is hard for anyone to give any accurate response. The best way is to follow Forum request guide that is pinned on top of each section topic.
When posting please:
Required: Share your project’s Read-Only link AND live site’s Published link
- The read-only link is a special url generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
- The published link is the webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
- Upload as many screen shots/screen cast videos as possible to help others help you faster
- Add a description and/or post a link to a working example of what you’re trying to achieve
- Reply to users by tagging using the @ sign followed by their forum username like this: @Monologix
Done, I added a published link too, thank you!
hi @Monologix I have tested provided live page in Safari and Chrome but I do not experiencing any delay on mouse hover over video.
Hello @Stan , thank you very much for the answer!
My main problem is only the delay to interact, not the delay to trigger the animation.
You can try for example to immediatly try to play the video after hovering it, it’ll not work, you need to wait a little time (in my case on Google Chrome).
Hi @Monologix tested now and IMO delay is caused by your animation that is 1s. What I mean that system is waiting to finish animation and then allow the click. When tested in Safari first hover caused delay but after page force reload there was no delay (cache?). In Chrome delay stays any time even with cache enabled.
Did you tried increase/decrease animation time or delete animation to see if this have impact on interactivity?
This will be the way I will try to narrow down where to look and figure out if I can do anything about that.
Hello @Stan , thank you again for your help!
I tried to set the animation time to 0ms, and I tested it without any transition (transform hover).
There is no impact, I made a change to the link to show you without any transition : Test video hover
Did you tried, using different css classes for the video and the div wrapper?
Hello @Bimbi !
Yep, I just tried and it doesn’t seem so change, the delay to interact stays.
Sorry didn’t have time as I’m fighting with Quill RTE in Svelte project. Did you tried delete animation to find if delay is related to video element it self?
Hi @Stan ! Haha, good luck in your fight, it doesn’t seem to be easy!
Yep I tried without any animation, it works (like any video integration in webflow).
HI @Monologix I have now looked into your project in devtools and there are installed some js libraries like
sendinblue another is some profile image
200x200 loaded but is not displayed etc so it is not clean project do analyse where the issue can be as some JS libs can cause this delay. What I mean that browser is waiting for JS lib to be downloaded fully and when is done interactivity is activated.
But as there is no delay when animation is not applied so it will be hard to say where the issue can be. At least I can’t get an idea right from my head what and how. Try to open brand new Plain project without anything and try it there to see what result will be.
Sorry I can’t help more.
You have CORS errors when you click on video (use devtools for debugging to see what is going on on your site). Try to upload any video to WF to assets avoid this and try it again to see if delay persist or find some request in forum or on net that will help you understand what CORS is and how to deal with CORS.
EDIT: BTW no Issues in: Safari and Firefox - Issue persist in : Chrome, Brave, Edge
I made a test with the webflow background video player and it works, so the problem it probably comming from the embed. And it works on Safari and Firefox only like you said, strange!
EDIT : Anyway, I can’t use the background video player in my case so I’ll continue to look for a solution
At least you now know where to look as issue is related to browsers that use V8. So search internet to find some discussions or articles as it is not related to WF but Browsers.