How to add animations 2. Video tutorial
Quote from luishp on April 4, 2020, 8:54 pmIn previous tutorial we learned how to use neoAnimationTo to animate an object from its current CSS properties to new ones. In this tutorial we will see how to animate objects from new CSS properties to the current ones. This means we will see objects getting into place during the animation. For this purpose we will use neoAnimationFrom.
In addition we will learn how to preload images before starting the animation using a preloader page. Source code attached.
Some nice SVG preloaders can be downloaded from: https://samherbert.net/svg-loaders/
Please like and comment on the YouTube video. Thank you!https://youtu.be/Rjmvqao1i0I
In previous tutorial we learned how to use neoAnimationTo to animate an object from its current CSS properties to new ones. In this tutorial we will see how to animate objects from new CSS properties to the current ones. This means we will see objects getting into place during the animation. For this purpose we will use neoAnimationFrom.
In addition we will learn how to preload images before starting the animation using a preloader page. Source code attached.
Some nice SVG preloaders can be downloaded from: https://samherbert.net/svg-loaders/
Please like and comment on the YouTube video. Thank you!
- You need to login to have access to uploads.
Quote from farhad2008 on April 5, 2020, 8:39 amVery good
Thank you
Very good
Thank you
Quote from luishp on April 24, 2025, 9:31 am@madjos aparece algún mensaje de error en la Consola? (Pulsa F12 cuando tengas el navegador abierto con tu aplicación para ver los mensajes en la consola)
@madjos aparece algún mensaje de error en la Consola? (Pulsa F12 cuando tengas el navegador abierto con tu aplicación para ver los mensajes en la consola)
Quote from luishp on April 25, 2025, 7:59 pm@madjos hay algún error en la programación. Es muy difícil poder saber exáctamente qué es lo que está sucediendo en tu caso.
¿Puedes compartir por aquí tu proyecto? Por favor utiliza el menú Project > Archive/Backup para crear un zip con todos los archivos necesarios.
@madjos hay algún error en la programación. Es muy difícil poder saber exáctamente qué es lo que está sucediendo en tu caso.
¿Puedes compartir por aquí tu proyecto? Por favor utiliza el menú Project > Archive/Backup para crear un zip con todos los archivos necesarios.
Quote from madjos on April 29, 2025, 1:03 pmHola Luis,
Mis disculpas por el archivo vacío, perdón.
Te envío otra prueba que he hecho con otras imágenes y la misma programación.
Espero que te sirva.
Saludos, Jose.
Hola Luis,
Mis disculpas por el archivo vacío, perdón.
Te envío otra prueba que he hecho con otras imágenes y la misma programación.
Espero que te sirva.
Saludos, Jose.
Uploaded files:- You need to login to have access to uploads.
Quote from luishp on April 29, 2025, 9:26 pm@madjos dos problemas:
- El plugin tiene un error en el comando neoAnimateFrom que impedía que funcionase correctamente (adjunto versión corregida)
- Tienes que utilizar los mismos nombres de los objetos que tienes en tu aplicación: Es decir, si tu objeto imagen se llama "fondo_logo", no puedes poner "Image1"
Para instalar el plugin primero tendrás que desinstalar el que tiene el mismo nombre. Puedes gestionarlos desde el menú:
Options > Add/Remove Plugins
Yo creo que ahora ya no deberías tener problemas.
@madjos dos problemas:
- El plugin tiene un error en el comando neoAnimateFrom que impedía que funcionase correctamente (adjunto versión corregida)
- Tienes que utilizar los mismos nombres de los objetos que tienes en tu aplicación: Es decir, si tu objeto imagen se llama "fondo_logo", no puedes poner "Image1"
Para instalar el plugin primero tendrás que desinstalar el que tiene el mismo nombre. Puedes gestionarlos desde el menú:
Options > Add/Remove Plugins
Yo creo que ahora ya no deberías tener problemas.
Uploaded files:- You need to login to have access to uploads.
Quote from luishp on April 29, 2025, 9:33 pm@madjos Te adjunto tu proyecto corregido.
Para probarlo tendrás primero que instalar el plugin sin el error que compartí en el post anterior.
Otra cosa: tenías puesto diseño responsive pero no utilizas las clases CSS para diseño responsive (lo he quitado).Saludos.
@madjos Te adjunto tu proyecto corregido.
Para probarlo tendrás primero que instalar el plugin sin el error que compartí en el post anterior.
Otra cosa: tenías puesto diseño responsive pero no utilizas las clases CSS para diseño responsive (lo he quitado).
Saludos.
Uploaded files:- You need to login to have access to uploads.
Quote from madjos on April 30, 2025, 4:38 pmHola Luis,
Muchas gracias por tu efectiva y rápida respuesta.
He desinstalado el plugin existente e instalado el nuevo que me has enviado. Ahora funciona todo perfecto.
Gracias también por enviarme el proyecto corregido. El tema del diseño responsive aún no lo tengo muy controlado, era el próximo tutorial que iba a seguir jeje.
Saludos, Jose.
Hola Luis,
Muchas gracias por tu efectiva y rápida respuesta.
He desinstalado el plugin existente e instalado el nuevo que me has enviado. Ahora funciona todo perfecto.
Gracias también por enviarme el proyecto corregido. El tema del diseño responsive aún no lo tengo muy controlado, era el próximo tutorial que iba a seguir jeje.
Saludos, Jose.