From 7121be757c25bcf369b45c91fdf23d23e7b9b438 Mon Sep 17 00:00:00 2001 From: HermanJasser Date: Mon, 27 Jan 2025 13:51:44 +0100 Subject: [PATCH 1/3] =?UTF-8?q?skrevet=20noen=20f=C3=A5=20ting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/docs/gsap/gsap-case-study.md | 37 ++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/content/docs/gsap/gsap-case-study.md diff --git a/src/content/docs/gsap/gsap-case-study.md b/src/content/docs/gsap/gsap-case-study.md new file mode 100644 index 000000000..4f8110111 --- /dev/null +++ b/src/content/docs/gsap/gsap-case-study.md @@ -0,0 +1,37 @@ +--- +title: GreenSock Animation Platform(GSAP) +Author: HermanJasser +tags: Development Platforms, Animations, interactive design +--- + +## Introduction + +In this casestudy we will Explore GreenSock Animation Platform(GSAP) which is a powerful JavaScript libary made by webflow that enables you to create animations for web applications. + +## Brief History + +## Installation + +## key Features + +### Scroll-Based Animations (ScrollTrigger) +GSAP integrates scroll-driven interactions with the `ScrollTrigger` plugin, enabling animations that react to the user's scroll position. + + +- SVG animations +- Text animations + +## Freemium + +## Strengths + +## Weaknesses + +## Comparison + +## Summary + +### References + +- [gsap install page](https://gsap.com/docs/v3/Installation/?tab=npm&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true) +- [Stackradar](https://www.stackradar.co/tools/greensock) From b121bc3032803c9830f11dc95817186c36043e75 Mon Sep 17 00:00:00 2001 From: HermanJasser Date: Mon, 27 Jan 2025 16:38:47 +0100 Subject: [PATCH 2/3] done with the casestudy on gsap --- src/content/docs/gsap/gsap-case-study.md | 89 +++++++++++++++++++++--- 1 file changed, 81 insertions(+), 8 deletions(-) diff --git a/src/content/docs/gsap/gsap-case-study.md b/src/content/docs/gsap/gsap-case-study.md index 4f8110111..a52949e99 100644 --- a/src/content/docs/gsap/gsap-case-study.md +++ b/src/content/docs/gsap/gsap-case-study.md @@ -10,28 +10,101 @@ In this casestudy we will Explore GreenSock Animation Platform(GSAP) which is a ## Brief History +GSAP was created by Jack Doyle and officially launched in 2008.; + +When the web transitioned away from Flash toward open web standards like HTML5, CSS, and JavaScript, GSAP evolved to support these new technologies. In 2013 GreenSock released GSAP for JavaScript, quickly becoming one of the most widely-used animation libraries on the web. + +Over the years GSAP has continued to grow and they have introduced advanced features like ScrollTrigger and a suite of plugins to enhance animations. Its ability to animate HTML, CSS, SVG, and canvas has cemented GSAP’s place as an essential tool for creating alive and exiting web applications + +Today GSAP is trusted by developers, designers, and major companies worldwide for delivering smooth, reliable animations across all platforms and devices. + ## Installation +To install GSAP you can choose between npm, CDN or yarn depending on your project setup. + +### Using a CDN + +If you don’t want to install GSAP locally you should use a CDN. + +Add the following ` +``` + +### Using npm and yarn + +GSAP have a detailed walktrough guide on how to install their libary. +[GSAP install](https://gsap.com/docs/v3/Installation/?tab=npm&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true) + ## key Features -### Scroll-Based Animations (ScrollTrigger) -GSAP integrates scroll-driven interactions with the `ScrollTrigger` plugin, enabling animations that react to the user's scroll position. +### Scroll-Based Animations (ScrollTrigger) + +GSAP integrates scroll-driven interactions with the `ScrollTrigger` plugin enabling animations that react to the user's scroll position. + +### SVG and Canvas Support + +GSAP can animate SVG graphics and HTML5 canvas elements with ease making it versatile for vector-based animations and complex visualizations. + +### Ease of Use + +The API is intuitive and easy to learn which is making it accessible for beginners while offering advanced features for experienced developers. + +### Text Animations +GSAP makes it simple to animate text so that you can use effects such as letter-by-letter reveals, typewriter effects and dynamic text transformations. -- SVG animations -- Text animations +## GSAP Freemium Pricing model -## Freemium +GSAP operates on a **freemium pricing model**which means that the core library and many features are free to use for both personal and commercial projects. This makes it highly accessible to developers, designers, and companies of all sizes. + +However some advanced features and plugins like ScrollSmoother**, DrawSVGPlugin** and splitText are exclusive to the premium Club GSAP membership. This paid membership also provides access to priority support and additional tools for creating complex and professional-grade animations. + +The freemium model ensures that the majority of GSAP's functionality remains available to everyone while offering enhanced features for professionals who require advanced tools or wish to support the platform's ongoing development. + +> "We firmly believe this licensing model ultimately delivers a superior end product and serves the community better. Open source projects with no funding mechanism typically stagnate and become obsolete." +> – GSAP ## Strengths +### Timeline System + +GSAP offers the best control over animations in the market and thats allowing developers to tweak timing, easing, delays and sequences with precision. Its timeline system makes it easy to create, organize and synchronize even the most complex animations. + +### Extensive Toolset and Plugin Support + +GSAP comes with many features that allow developers to animate virtually anything from HTML and CSS to SVG elements. Its powerful plugins like ScrollTrigger, MotionPathPlugin, and DrawSVGPlugin makes GSAP really powerful. + ## Weaknesses -## Comparison +### Cost + +There aren’t many downsides to GSAP, but one thing to consider is the cost. Accessing advanced features requires a paid subscription which might not be ideal for projects with limited funding. + +## Compared to anime.js + +### Purpose +- GSAP: It’s versatile and suitable for both simple and complex projects where you can use more advanced tools like timeline management. +- Anime.js: A lightweight JavaScript library focused on creating simple yet powerful animations for HTML, CSS, SVG, and DOM attributes. It’s best for straightforward animations without the need for advanced features. + +### Ease of Use +- GSAP: Offers a comprehensive API with a steeper learning curve for beginners, but provides exceptional control over animations. +- Anime.js: Simpler and more beginner-friendly which means its ideal for developers who need quick animations without extensive setup. + + ## Summary -### References +GSAP is a powerful JavaScript library for creating smooth and professional web animations. Since its launch in 2008 it has become a go-to tool for animations on the web. While GSAP’s core library is free you have to pay for access to premium features. -- [gsap install page](https://gsap.com/docs/v3/Installation/?tab=npm&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true) +Compared to Anime.js, GSAP is better suited for complex animations and advanced use cases. Anime.js offers a lightweight, beginner-friendly option for simpler tasks. GSAP remains the top choice for creating dynamic and engaging web experiences and if I had to choose one to learn, it would be GSAP. + + +## References + +- [gsap](https://gsap.com/) - [Stackradar](https://www.stackradar.co/tools/greensock) +- [dev.to] (https://dev.to/sharoztanveer/gsap-vs-framer-motion-which-animation-library-should-you-choose-for-your-creative-web-projects-4d02) +- [anime.js](https://animejs.com/) + From 133e292f996daf94cf8a8ae0fe21675a2c5d9389 Mon Sep 17 00:00:00 2001 From: HermanJasser Date: Mon, 27 Jan 2025 16:41:11 +0100 Subject: [PATCH 3/3] fjerne space --- src/content/docs/gsap/gsap-case-study.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/gsap/gsap-case-study.md b/src/content/docs/gsap/gsap-case-study.md index a52949e99..18c94cc89 100644 --- a/src/content/docs/gsap/gsap-case-study.md +++ b/src/content/docs/gsap/gsap-case-study.md @@ -105,6 +105,6 @@ Compared to Anime.js, GSAP is better suited for complex animations and advanced - [gsap](https://gsap.com/) - [Stackradar](https://www.stackradar.co/tools/greensock) -- [dev.to] (https://dev.to/sharoztanveer/gsap-vs-framer-motion-which-animation-library-should-you-choose-for-your-creative-web-projects-4d02) +- [dev.to](https://dev.to/sharoztanveer/gsap-vs-framer-motion-which-animation-library-should-you-choose-for-your-creative-web-projects-4d02) - [anime.js](https://animejs.com/)