Animation Approach for Our Website

[ssandino]

This early-stage discussion aims to establish a foundation for collecting information and incorporating opinions, which will later inform our selection of an animation library or framework that aligns with our project's goals and technical requirements.

Why Animations?

As part of our ongoing efforts to enhance the user experience on our website, we are contemplating the integration of animations over the medium to long term. It's crucial to note that our objective is NOT to create a website overloaded with motion and animations, as this could undermine trust-building with future donors.

Basic Requirements

Open Source License: Compatibility with our project's open-source ethos is crucial. The library or framework used must permit free use, modification, and distribution. If considering a framework with a dual license (partially open source, partially proprietary), we need to ensure that the open-source portion meets our needs.

Reusability of Animations: We seek a solution that emphasizes the reusability of animations. This strategy will allow all developers, irrespective of their expertise in animation coding, to implement animations efficiently and consistently on different pages of the website. Without this, we risk quickly ending up with a disjointed mix of styles and inconsistent animation usage.

In addition to exploring dedicated animation libraries, we should also consider the most basic animation options available through tools we are already using, such as TailwindCSS or pure CSS animations. These options might offer a simpler, lightweight solution for our needs without the necessity of integrating a new library.

Scenarios

At this point, I envision two primary scenarios, each likely having distinct requirements:

• Scenario Light: Only titles or text blocks appear or fly in (similar to what we had on the previous page). This might be easily achievable with TailwindCSS or CSS animations.

• Scenario Mixed: Incorporates the animations from Scenario Light, plus some selective, more complex animations that help us tell our story more convincingly. An example could be this kind of animation that enhances narrative depth, which may require more sophisticated tools than CSS alone can offer.

Any initial thoughts?

[warengonzaga]

Hello @ssandino, for the scenario light, we can use animate.css if you feel that one of the animations there is fit to the requirements. Otherwise, have you checked this TailwindCSS animation?

For the OSS licensing, I think you are looking for projects or libraries with an MIT license.

Lastly, for the scenario mixed, I'll check with GSAP and understand the "No Charge" license. I'll get back to you on this.