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