ANIMACIONES SVG para WordPress y ELEMENTOR con After Effects - Tutorial Efectos Visuales #4
Вставка
- Опубліковано 28 сер 2024
- Veremos cómo realizar animaciones para nuestras páginas web sin necesidad de saber código. Crearemos el dibujo en Illustrator, la animación en After Effects y por último iremos a WordPress para insertar la animación en SVG. Todo gracias al plugin para after effects Bodymovin. Muchas gracias a Lucas por proponernos este interesante challenge de diseño web.
#elementor #wordpress #yannickgarcia
MEJOR PACK DE PLUGINS PARA ELEMENTOR
🔰 SUITE COMPLETA:
bit.ly/2U3wgHD
💾 ZONA PREMIUM
Plugins valorados en cientos de euros, recursos, diseños, plantillas y vídeos EXCLUSIVOS para los miembros.
lamaquinadelbr...
✅ NO TE PIERDAS NINGÚN VÍDEO
/ @yan_lmb
🔊 PODCAST SOBRE NEGOCIOS Y WORDPRESS
Podcast sobre Negocios y WordPress con Elías Gómez:
negocioswp.es/
😶 ¿QUIÉN SOY YO?
Me llamo Yannick García y trabajo el branding y el marketing online de marcas, pero siempre desde un punto de vista basado en el diseño gráfico, que es mi principal pasión. Es por eso que en este canal, además de formarte para la gestión de tu marca, encontrarás tutoriales, consejos y reflexiones sobre diseño, photoshop, after efftects y hasta 3D.
Muy bien allí gracias por el tuto. Si de casualidad a alguien le falla la exportación deben ir a Editar/preferencias/scripts y extensiones/activar la opción de "Permitir que las secuencias de comandos puedan escribir archivos y acceder a a la red"
ACABO DE CONOCER A DIOS! GRACIAS GRACIAS JAJAJAJA tengo años diseñando páginas en elementor y no tenía idea de que se podían hacer cosas así, y casualmente también soy animador con after effects xD a partir de ahora voy a hacer cada desastre en mis webs JAJAJAJA Gracias bro, nuevo sub
sabes porque me crea un fondo gris cuando hago el cambio a trazos en affter effects y no lo puedo eliminar
Hola Aron, has hecho algún efecto?
Tengo pendiente hacer algo de esto para mí web, no he tenido tiempo de jugar con estos efectos por el trabajo. Hay muchas cosas que quiero probar y practicar, esto te abre un abanico de posibilidades :)
Este hombre es bueno, hay que decirlo se ve que sabe de lo que habla.
Dios mio que gran tuto, muchas felicitaciones y saludos que estés bien.
Excelente la informción, la explicación y, vaya, que no queda más que ir a aplicarlo. Gracias, desde México
Por fin Elementor integró un plugin para Lottie con opciones increíbles como activar las animaciones con el scroll... esa opción era lo que me mantenía aferrado a Adobe Animate y Muse... pero con esta gran integración de Elementor con ese nuevo complemento nativo ya no puedo pedir más... soy muuuy feliz jajajaja sólo falta que Adobe Animate genere ya .json y la vida sería pura felicidad...
Maldito genio, con tan poco haces cosas gigantes
Asombrosamente práctico , sencillo pero con mucha potencia el efecto final. Muchas gracias y felicitaciones.
Uyyy que pasada, más vídeos así, mola, muy visualll. Elementos+diseño
Saludos Yannick cada vídeo tuyo vale oro
Información digna para desarrollar una pagina ganadora de un awwwards, ví que hay forma de hacer scroll y que se vaya haciendo la animación, igual que se puede hacer interactiva, ojalá hicieras un tuto sobre el tema
Excelente amigo! gracias por compartir tus conocimientos con la comunidad. Un saludo!!.
Muchas gracias
Gracias por toda la información que aportas en tu canal he aprendido mucho contigo! Espero que está información pueda aplicarla dentro de poco en mis proyectos, muy agradecido!
Eres grande hermano excelente tuto, me has ayudado como no tienes idea. Muchas graciasssss!!!! Bendiciones
Eres un genio tio!! muchisimas gracias por este tuto!!!! Un abrazo!!
me has cagado.. conectaste 2 cosas q se utilizar, pero q no había visualizado ni siquiera pensado en usarlas combinadas.. sos un capo!!!!
Saludos desde Venezuela. Muchas gracias por el video tutorial, te ha quedado genial. Voy a crear algunas animaciones y lo probaré, cualquier cosa pasaré por acá y preguntaré.
Genial yo quiero hacer una rueda animada en after y luego los hospots
que cosa máaaaaaaas chula!
Muy bueno maestro, a ver si puedo usarlo en alguno de mis desarrollos. Bendiciones!
Creo que te amo. Me suscribo geniooo!!!
Era lo que buscaba hace mucho!!!
Te sigues superando. Buenísimo. Muchas gracias.
Que capo Maquina! Crack!
Super tutorial muy útil, muchas gracias🌟🌟🌟🌟🌟
Gracias por el tuto! ¿Podrías hacer un tutorial sobre como hacer un checkout sin salir de la pagina con elementor? Es decir añadir al carrito/carrito/shipping address/ credit card. Haciendo aparecer secciones sin redirigir al cliente a otras paginas. Un saludo
Justo lo que estaba buscando muchasss gracias
Jeje, que bueno. Difícil de aplicar, pero la imaginación está para eso. Gracias
Gracias, siempre un agrado. Un abrazo.
QUIERO APRENDER REALMENTE HA REALIZARLE DISEÑOS MUY BONITOS Y DINÁMICOS A LAS APLICACIONES
Increíble!! Gracias!
Excelentes tutoriales, muy buenos, bendiciones
eres el mejor bro me ayudaste un montón te ganaste este suscriptor con me gusta y campanita activa lastima que soy pobre no te puedo ayudar con el contenido premium haajajajaajaja
me suscribo master
¡Gracias!
🔥🔥🔥🔥
Se pueden usar curvas para suavizar las animaciones en after fx? Osea, es compatible después en el css?
Eres la ostia tio
Grande Yannick!!! siempre interesante tus videos
hola muy buen video. tengo un problema a mi se me exporta con fondo blanco y no tengo nada.
Hola, sabes por qué razón no funcionan las animaciones con gradientes?
Le he dado mil vueltas y me sale un color sólido siempre.
Excelente aporte !!
Una consulta yo vi en una página web que pudieron música ni bien le di click a la página web se escuchó una canción de fondo y estoy buscando un tutorial que me enseñe. Por cierto excelente canal
La extensión bodymovin me aparece en after effects pero no me reconoce las composiciones,,,,, alguien sabe que puede suceder??
Awesome tutorial, dude !
amigo cuando ejecuto el paso que mencionas en el minuto 07:45 la figura se convierte en un rectangulo gris... sabes como arreglarlo? gracias!
yaaaay! wonderful
MAESTRO!!!.. una pregunta, ¿como se llama la extension de chrome que usas al final del video? ya que estuvo muy didactivo y claro el video no tengo dudas de hacer el cohete (=.
genial amigo muchas gracias la oshtia !
Sencillamente Impresionante Yannick, gracias por compartir. Como puedo mejorar la velocidad de cargue de un banner principal de un video de 15 segundos , utilice youtube pero se demora. Gracias de antemano por el dato.
Si animo un texto, al cambiarle el idioma a mi sitio web cambiaria tambien el texto de la animación?
Felicitaciones por el tutorial, Pero tengo un problema a la hora de convertir en html me exporta con un cuadro Negro no se ve la animación., que puedo hacer ?
me pasa lo mismo, pudiste solucionarlo?
este plugin wp bodymovin no existe más. Algun otro que recomiendes??
Buenas!! Muy claro el paso a paso y muy buena propuesta, pero... no he podido renderizar. Y me estoy volviendo loco probando todas las opciones revisando el archivo .aep mil veces. Sera que este bodymovin ya ha quedado obsoleto? Si tienes ide de esto se agradeceria un monton!!
Gracias
No me funciona el Jet Tricks, sabrás por qué sucede que al implementar el codigo Json no lo toma tal cual lo configuré?
Nuevo suscriptor
no me sale la composition en la ventana de body, que puedo hacer?
El tutorial es muy bueno, pero lo he instalado en after effects con. el ZXPinstaller , me aparece en Ventana de after effects, pero No me reconoce las composiciones que hago en la línea de tiempo....¿ALGUNA AYUDA? gracias por todo un saludo.....
Ya sé que ya pasaron dos años, pero se arregla solo guardando el archivo antes de abrir el plugin
No me aparece en mi photoshop la ventana "extensiones"
wAAAWWw buenisimooo!!!
hola ,como puedo ponerle una animación de pág. , ósea q la pág. baje por si sola al dejar el cursor quieto en determinado tiempo
atudaaa plis...
Soy el único que le sale que el render ha fallado(seguí todos los pasos), quisiera saber porqué, me sería de mucha ayuda.
"AE editar> preferencias> general> secuencias de comandos y expresiones y luego permitir que las secuencias de comandos escriban archivos y accedan a la red".
Todo bien pero a la hora de hacer eñ render del bodymovie no me hace los archivos
¿se puede hacer con animaciones de adobe animate? pero quisiera controlar la reproducción con el scroll del navegador... ¿se puede incrustar una animación html 5 y controlar con la misma barra del navegador?
chevere! una duda, puede ser responsive?
¿qué tal va con lottie este tipo de animaciones o es algo diferente?
Hola amigo muchas gracias por la info, cuando le doy renderizar, se me exporta pero sin el movimiento, tienes idea como puedo solucionarlo?
Hola la animación se exporta menos de un segundo, hay alguna forma de configurarla para que dure ¿unos segundos más?
Excelente tutorial, felicitaciones, y una consulta, la animación puede ir encima de texto? Ejemplo, una nube yendo de izq a derecha sobre texto atrás?
Hola.. Un par de cosas.
1. También se puede importar el archivo json con el widget de Lottie o con enlace directo cargado desde lottiefiles.com.
2. Del efecto de texto, si se puede. Colocas en una sección con dos widgets: texto y lottie dentro de su columna. En el widget lottie, darle propiedad de position absolute y al texto propiedades de efectos de movimiento, activando efecto de scroll o de ratón, según lo que desees. :)
Amigo tengo una consulta. donde te puedo contactar ?
Hola amigo, buen día, al momento de exportar se modifican las proporciones y me mueve los elementos, sabrás porque ?
me sale error cuando hago el render u,u
Hola tengo un problema al exportar la demo, que es que se crea una carpeta de imagen. Lo cual ase que el código HTML no puedo usarlo porque busca los materiales de esa carpeta.
Alguna solución o ayuda .
Genial!
para que desactivas la opcion de los plugs? seguridad, uso?
Lo he hecho con el metodo HTML de Elementor, el primero que comentas, sin descargar ese plugin y en el editor se ve la animación pero luego previsualizo y me sale el código escrito en texto, cierro el Elementor, lo vuelvo a abrir para editar y solo se ve código como en la previsualización.... Ayudaa xD
como insertar un logo animado en el header en elementor seria bueno he estado buscando y no encuentro nada
PORFAVOR QUIERE VER EL VIDEO PASO A PASO DE COMO HIZO EL COHETE EN ILLUSTRATOR Y EXPLICASTES SUPER RAPITO DE COMO HACER LA ANIMACION
yo seleccione algunas imagenes paraq la animación , y no me salen uando lo coloco en elenmetor uwu
Excelente video... una pregunta, que tanto afecta la carga de mi sitio con estos efectos, baja mucho el rendimiento del servidor...... ¿?
He hecho pruebas y si haces animaciones 2D las aguanta perfectamente.
Ahora bien, si empiezas a meter muchos efectos como desenfoques, partículas, multicapas, etc empieza a ser difícil de cargar en dispositivos antiguos. Pero va a depender más del dispositivo o smartphone que del servidor (¡a no ser que llenes toda tu web de cohetes!)
Amigo me da este error al darle render: Could not export files Is Preferences > Scripting & Expressions > Allow Scripts to Write Files and Access Network enabled?
Sabra que podra ser???
Llego tarde pero lo que tienes que hacer es irte a
Editar
como se hace las animaciones de las cartas de tarot para la web?
Hola!! gracias por el video! sabes que no puedo hacerlo con ninguna de las dos opciones. En la primer opcion cuando cargo el codigo me queda el codigo cargado pero nunca aparece mi animacion, solo aparecen los codigos. Y con la segunda opcion aparece como si el archivo esta roto, osea aparece una animacion pero sin la imagen. Muchas gracias. Luna.
yo igual
Amigo me encantó este tutorial, pero tengo un problema. Al momento de exportar el archivo me voy a bodymovin, pero la opción de renderizar aparece desactivada, al igual que la opción de elegir el destino .... alguna posible causa o solución? muchas gracias de antemano.
Hola amigo Rodrigo, no sabría decirte. Lo mejor es que vayas a la pestaña comments o incluso a los foros de la web de aescripts > quizás ahí te puedan dar solución aescripts.com/bodymovin/ siento de veras no saber la respuesta a tu problema.
es necesario Elementor PRO para insertar este tipo de animaciones?
Lo importante es el codigo resultante. Puedes insertarlo en cualquier editor HTML
@@yan_lmb tus vídeos merecen más visitas, gracias amigo!
tengo problemas con bodymovin... me sale Render failed :c
Que hago?
Ingresa a preferencias de AE; Luego haz clic en "Scripts y expresiones" y luego activa la casilla "Permitir que las secuencias de comandos puedan escribir archivos y acceder a la red" y listo. Espero te pueda servir.
Se puede hacer lo mismo con Divi?
Si, solo tienes que utilizar un bloque de Lottie para Divi o WordPress. Este que te dejo es uno, pero hay más, incluso alguno gratuito para WP. divisupreme.com/features/divi-lottie-module/
@@yan_lmb gracias por responder! Creé un Lottie con After, en la preview del DEMO html se ve perfecto, pero cuando lo cargo en DIVI con el LOTTIE Supreme o NextLottie se ve todo mal, como una gran mancha. Por qué puede ser?
Hola Yannick, tengo un problema porque intento exportar con bodymovin, y me sale Render Failed. Yo tengo Aftereffects CC2018. Sabes cual es el problema?, porque he seguido todos tus pasos pero ahi ya no me deja seguir. Saludos
Hola Elisa, pues no tengo ni idea. No hay mucha documentación sobre esto. Yo si fuera tú, intentaria mirar (y preguntar) en el git de bodymovin github.com/airbnb/lottie-web/issues/1663 Ya siento no poder decirte más 🙏
@@yan_lmb Muchas gracias por la informacion. Lo que se me esta ocurriendo es que sea porque es una foto, y no es un elemento vectorial. Podria ser por eso?
@@elisamadina Hola, me pasa exactamente lo mismo. Lo has podido solucionar? Muchas gracias
@@nicolaspc5020 Hola, que va no lo logre. Espero que tu tengas mas suerte
jaja Yannick que pena que no puedas ver las caras de envidia que ponemos al saber que puedes hacer ésto en una mañana! jajaja es como un hotel ALL INCLUSIVE jajaj
NO ES COMPATIBLE CORRECTAMENTE CON CC 2015 OJO
Te haz ganado mi Like, excelente aporte. Tratare de hacer lo mismo..jejejej. saludos desde Chile.
el bodymovin no funciona
a Hola, me pasa exactamente lo mismo. Lo has podido solucionar? Muchas gracias