Hi @marc_a,
That’s great, thank you.
I have added it here: https://leslieh7.sg-host.com/join-us-alt/
Please see the pink highlight effect indicated by the green arrow.
Do you know how I can create a loading delay?
At the moment it animates on hover - but we want it to load when the page loads and changing:
mark:hover > svg
in our CSS to:
mark > svg
just breaks the animation, or it loads immediately and the animation is not visible.
Please see transition-delay: 1000ms;
under svg
- when hover is disabled this seems to be ignored.
svg {
position: absolute;
top: -10%;
left: -10%;
right: -10%;
bottom: -10%;
z-index: -1;
overflow: hidden;
margin: auto;
padding: 0;
width: 100%;
height: 100%;
fill: none;
stroke-width: 54px;
/* height from "svg" x 1.125 */
stroke-dasharray: 400;
stroke-dashoffset: 400;
transition: stroke-dashoffset 400ms ease-in-out;
/* This transition does not work when hover is disabled */
/* transition-delay: 1000ms; */
will-change: stroke-dashoffset;
pointer-events: none;
}
mark:hover > svg {
stroke-dashoffset: 0;
}
/* mark > svg {
stroke-dashoffset: 0;
} */
I haven’t been able to find a delayed rile to apply directly to the SVG tag itself:
I realise this is probably all custom work so any advice you have would be greatly received.
Kind Regards,
Spencer