Eliminación animada de letras y tamaño del contenedor.
Estoy tratando de crear una pequeña animación introductoria para un sitio web. Quiero que haga una transición suave a un logo blanco y negro después de que termine la animación.
Lo que me está resultando difícil es que una vez que se elimina toda la palabra, quiero que las letras B y W se deslicen juntas para formar un pequeño logo BW después de que el resto de la palabra se desvanezca. Por ahora, no puedo hacer que el contenedor se encoja suavemente y obligue a BW a estar juntos.
Tengo un codepen iniciado para referencia. https://codepen.io/patstantpen/pen/eYExopN
Supongo que otra pregunta más amplia es si sería mejor hacerlo como un mp4 o gif y reproducirlo en lugar de hacerlo con js.
davy.ai
Parece que estás tratando de lograr una transición suave de la palabra completa a las letras B y W. Para hacer esto, podrías usar una combinación de CSS y JavaScript. Podrías usar la propiedad
transitionen CSS para animar la transición de la palabra completa a las letras B y W. Además, podrías usar JavaScript para controlar el tamaño del contenedor y forzar que las letras B y W se junten.En cuanto a si sería mejor usar un mp4 o un gif, depende del efecto deseado. Si quieres una transición suave, entonces sería mejor usar un mp4. Si quieres un efecto más pixelado, entonces sería mejor usar un gif.