¿Alternativas a jQuery para animaciones de sitios web simples, compatibles con versiones anteriores y del lado del cliente? [duplicar]

Recientemente estuve buscando una biblioteca de animación JavaScript alternativa, porque para las pocas animaciones simples que quería, una biblioteca jQuery de ~200kb no es la mejor opción.

Después de buscar un poco, encontré GSAP y lo implementé con éxito (y de manera más fluida) que la animación jQuery que había creado anteriormente. Pesa alrededor de 80kb, por lo que aún no es perfecto (pero eso es con complementos adicionales para poder usar selectores CSS, si anima un SVG, probablemente pueda omitir el archivo requerido de 60kb).

Me pregunto si hay otras grandes opciones disponibles.

¿Alguien sabe de bibliotecas alternativas para animar elementos con JavaScript?

Las mejores opciones:

  • ¡No confíes en jQuery!

  • No depende de los fotogramas clave de CSS3 o tiene un respaldo para cuando los fotogramas clave de CSS3 no están disponibles (para compatibilidad con versiones anteriores)

  • Tiene un tamaño de archivo mínimo y requiere que se incluyan pocos o ningún otro archivo

  • ¡No es demasiado complicado de aprender! (ya sea una buena documentación o una sintaxis familiar/simple; no quiero pasar días construyendo una animación simple)

No estoy interesado en Flash en absoluto.

¿Has oído hablar de Adobe Edge Animation y Google Web Designer?
Estás pidiendo una solución de CÓDIGO, ¿no es así? Si desea animaciones simples, ¿por qué no usar la animación CSS3? Si ya ha creado el código y le preocupa el tamaño y funciona, ¿ha considerado preguntar en Code Review para ver si pueden ayudarlo a hacerlo más pequeño? ¿Has probado a usar un CDN? ¿Por qué no funciona un CDN? De cualquier manera, este no es el mejor lugar para preguntar esto.
Siento que esto es un duplicado de esta pregunta.
¿Tienes una demo de la creación que has hecho? Supongo que si no necesita todo el archivo de 60 kb, si corresponde.
"No es código, estoy buscando recomendaciones de la biblioteca de animación JS" = una biblioteca de animación JS es código.
@DumbNic Está bien. Pero tampoco es realmente una cuestión de diseño gráfico. De todos modos, creo que Matt te dio una lista bastante buena para empezar.
@DumbNic No sé por qué no hay votos cerrados. En cuanto a buscar recomendaciones de aquellos que las han usado, creo que es por eso que la gente dice que esto probablemente no pertenece aquí. Tendría mejores probabilidades de encontrar personas que los usaron en StackOverflow.

Respuestas (2)

Tu pregunta es increíblemente amplia. La mejor biblioteca de animación para su proyecto depende de lo que esté haciendo en ese proyecto específico. La biblioteca óptima sería una personalizada diseñada específicamente para el proyecto , pero, por supuesto, eso no responde a su pregunta aquí.

En mi opinión, las dos mejores bibliotecas generales de animación de JavaScript en este momento son Velocity.js para la mayoría de las animaciones básicas, incluidas muchas de UI, y GSAP (GreenSock Animation Platform) para las más complejas. GSAP tiene muchos complementos adicionales que puede agregar según lo que requiera el proyecto. Ambos tienen buena documentación y son bastante fáciles de configurar.

Dado que mencionó SVG específicamente, descubrí que no necesito una biblioteca de animación para las animaciones que he hecho con él, las animaciones SVG y CSS3 son bien compatibles. Pero si lo hace por alguna razón, Snap.svg es uno de los mejores.

Sin embargo, la animación de JavaScript no siempre es la mejor manera de animar su proyecto. Escribí una respuesta detallada que profundiza en cuándo y cómo usar las diferentes técnicas de animación disponibles actualmente que vale la pena leer.

Como dijiste, esta pregunta pertenece aquí porque la animación está dentro del ámbito del diseño gráfico. Del mismo modo, la animación también debería pertenecer al ámbito de CSS. Recomiendo encarecidamente Animate.CSS

Aquí hay otro marco interesante que solo usa JS solo para disparar la animación durante un evento, como mencionaste. http://motorcortexjs.com/

Hi5 por no estar interesado en Flash!