Philosophy

Why is v-gsap a thing?

Animations are an essential today, since they greatly enhance the user experience of any app or website. With an evergrowing ecosystem of frameworks and libraries, we as developers find ourselves in a constant battle of choosing a technology to provide us with the best Developer Experience and the lowest barrier for our ADHD.

GSAP is one of the most complete and grown-up animation libraries out there. But I always found myself adding animations after finalising the UI, since there is a mental barrier to set up a function to initialize the animation timeline yadiyadiyada. Growing accustomed to directly writing inline with tailwind, the strive to do the same thing just as easily for animations grew.

v-gsap attempts to solve this mental barrier issue by breaking down everyday animations into a comfortable and readable format.

Animations like

v-gsap.whenVisible.stagger.once.from=...

show how easily read- and writeable this inline format is.

Whenever possible, all the properties are named the same as we are familiar with GSAP. However, for some reoccuring usecases I took the freedom to create new names like whenVisible for ScrollTrigger, or parallax as a global term for translateY animations.

Why choose over other libraries

I'll be honest: v-gsap kinda grew out of jealousy of framer motion. It's syntax isnt especially natural, but the basic idea of writing animations inline is a big step in DX.

Of course there is the direct framermotion-competitor in the nuxt ecosystem: vueuse/motion. One could argue it lacks feature richness and it's state based approach (just like framer-motion) is an overkill in many situations. If your html bloats due to directive use, then it fuels the problem it was trying to solve.

One could also compare with tailwind animations, but speaking of feature richness, it's a nope.

A new package that can be seen as an alternative is Glaze. I admire their approach, since it is the exact same thought as v-gsap-nuxt but in plain JS for all tech stacks to use. However, it's syntax can get quite overwhelming when dealing with more complex animations. Being bound to nuxt, v-gsap-nuxt can utilize modifiers to simplify these animations and therefore provide a slightly better DX.

What it is not

This plugin certainly is a convenient drop-in for quick and easy wow-effects. It certainly isnt suitable for more complex animations with multiple steps or custom state logic like popups. There are plans on the roadmap to include state-logic, but it is not yet clear how that fits the general philosophy.