this is svg it has two mods one is full word (how it is exactly now) second mode when its closed all chars are hidden except F and Y transform of Y is transform: translate(-481px, 0); transform of F is translate(481px,0px) what we need to work on is how animation works between those two situations keep in mind we have 6 letters F O N D Z Y at start of animation (Stage 1) F O N thos three letters they rotate 30 deg couter clockwise and move away from middle to the left by 80px D Z Y do the opposite they rotate 30 deg clockwise and move away from middle to the right by 80px Stage 2 the letters F and Y start rorating back to original 0 deg both and end up with transform transform of Y is transform: translate(-481px, 0); transform of F is translate(481px,0px) and while they move close to each other the letters between them disappear the way the letters disappear is not normal opacity BUT imagine there is veritcal line and moving the letters O N they disappear one by one from left to right the letters D Z they disappear one by one from right to left
Aan het laden.