On Chrome everything works fine. But after opening the site in Safari and Internet Explorer the interaction doesn’t works good. Also the background-gradients (as a overlay above the video) doesn’t look good and much harder than it should look like.
Furthermore on all mobile devices the background-video doesn’t plays.
Interactions issue: I recommend adding another step in the interaction. In your initial appearance make sure the logo is set to display: none and in the interaction you can add a second step to be display: block like this:
Regarding the background video—currently bg videos do not play on mobile devices. Instead, you will see the first frame of your bg video as a bg image. If you want a different frame for the mobile bg, you can add another element and set a background image of your choice. Then set it to only be visible on mobile breakpoints, and the bg video to only be visible on desktop.
The bug with the gradient is solved now, also the video in the background on mobile devices is replaced with an background-image.
Regarding the bug with the interaction: I added the steps to the interactions, but the bug is still there. Can you tell me, where I did a mistake? Or do you have further tricks for it? Also now the logotype is aligned on the top while it’s becoming bigger. Ideally, so it was before adding the step, it should be centered and become bigger and bigger.
For the interaction, can you try removing the width and height animations? And instead use a scale transform?
Here is an example:
I kept everything the same in the interaction, except I deleted the width and height in the initial appearance and in the load animation. Then I added a scale transform of 0.1 on the initial appearance and a scale transform of 1 on load.
