GreenSock-JS VS Mo.js

I've been looking for a small project to do that would let me play with Greensock (GSAP), specifically a bit with some SVG files I generated with Corel Vector. When I saw the frontend challenge and had an afternoon at work with downtime between a few projects, I knew it'd be a great opportunity to explore a bit!

https://pixijs.com/ and https://gsap.com/. All of the source code for my posts can be found at https://github.com/samwho/visualisations :)

The GreenSock Animation Platform (GSAP) is a web animation library that provides the logic for adding animation to any site powered by JavaScript. React, being built on top of JavaScript, falls under this category. GSAP is an extremely fun animation tool to use because it offers a great deal of flexibility, you can animate anything using GSAP — texts, images, scroll actions, SVGs, UI interactions, anything!

The most exciting feature about GSAP is its speed, it runs your animation sequences very fast. It is also a very popular framework with about 292,000 weekly downloads.

GSAP (GreenSock Animation Platform)

gsap

Green Sock has over 16,400 GitHub stars and 400k weekly NPM downloads.

I used the Greensock (GSAP) library for the animation.

Most game engines can do this but their UI systems tend to not be as flexible or usable as CSS/HTML when it comes to layout techniques, and are nowhere near as well documented. Add to this the free availability of libraries such as React, Greensock and D3 alongside an unrivaled amount of documentation and tutorials and it's a strong option.

Mo.js is a potent and adaptable JavaScript animation library with a straightforward API and browser support. It's distinguished by its high-performance animations and density-independent effects, ensuring outstanding visual quality on any device. Mo.js provides extensive tools for animation creation, including Player for animation control, Curve Editor, and Timeline Editor for custom easing and editing.

mojs.github.io

Javascript touch events paired with WebGL would be the route I’d go. There are some really great libraries for WebGL (twojs) or working with SVG (mojs) if you want to keep it simple

13. mo.js

d)MoJS

I've looked around and found Mo.js which seems super cool, but it doesn't look like animations can be exported as a video? I want to avoid having to screen record if I can because I feel like the video quality is never as good as had it been directly exported.

Animation. You are creative, and you want your site to grab users' attention at first sight. JavaScript is there for you. With modern frameworks and libraries, such as Three.js,Anime.js,Mo.js any imaginable animation is possible.

Motion for the web. mo·js is A Complete Motion Graphics Library For The Website. That is a** fast, retina ready, modular and open source*. Using mo js on your site will enhance the user experience, enrich your content visually and create **delightful animations* precisely.