Beautiful Code
Posts
✨ Effects, animations and transitions – Beautiful Code #5

✨ Effects, animations and transitions – Beautiful Code #5

In Beautiful Code #3, I talked to you about GSAP, a series of JavaScript plugins that allow you to create spectacular animations. It’s one of my favorite and most essential plugins for any Frontend project.

Marc Taulé
October 10th, 2024

Hey everyone! It’s Marc 👋

Welcome to my weekly newsletter.

How’s your week going? I hope everything is going well.

In Beautiful Code #3, I talked to you about GSAP, a series of JavaScript plugins that allow you to create spectacular animations. It’s one of my favorite and most essential plugins for any Frontend project. So, this week I’m bringing you 3 examples of websites made with these plugins so you can see what’s possible and the opportunities they offer.

In the Code Snippets section, I’m also sharing 3 Codepens so you can see how simple it is to use some of these plugins and start incorporating them into your own projects.

I’ve also created a form so you can recommend your favorite tools, resources, or websites 👉 https://tally.so/r/mRJRGP

That’s all for now. I’ll leave you with this week’s content 👇

😍 Websites

1. Accordion Productions

2. Nod Coding Bootcamp

3. Frost Snow

🔨 Tools

1. Canny

Canny.io is a feedback management tool that helps businesses collect, prioritize, and act on customer feedback and feature requests. It centralizes feedback in one place, allows voting on requests, integrates with tools like Jira and Slack, and helps teams manage roadmaps and share product updates with users.

I use Canny in my Supasnap project to receive feedback from my users and better understand their needs.

2. DatoCMS

DatoCMS is a headless CMS that allows businesses to manage content across websites, apps, and other platforms. It separates content from the presentation layer, offering flexibility for developers through APIs like GraphQL. DatoCMS also features real-time collaboration, version control, and fast global content delivery.

I used this CMS in multiple projects and it’s super easy to use.

3. Tally

Tally.so is a free, no-code form builder that lets you create customizable forms easily without technical skills. It supports features like conditional logic, payment collection, and integrates with tools like Google Sheets and Notion, making it ideal for surveys, lead generation and more.

If you want to see an example, you can check out the form I created in case you'd like to send me your favorite tools and resources: https://tally.so/r/mRJRGP

🧰 Resources

1. YesIcon

Yesicon is an online platform offering over 180,000 free, open-source vector icons. It allows users to customize colors, sizes, and styles, and provides quick downloads in formats like SVG and PNG for design and development projects.

2. Transition.css

Transition.style helps you easily create and implement CSS transitions using clip-paths. It provides pre-configured CSS animations that can be dropped directly into your projects to create smooth, visually appealing transitions. The platform is designed to simplify the process of building transitions, making it accessible for developers to quickly add animated effects without extensive coding

3. Animate.css

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

🤖 Code and snippets

Here you will find code snippets from CodePen that you can use in your projects and adapt to your needs. As I mentioned in the introduction, this week is all about examples with different GSAP plugins.

😂 Humor

The best visual way to understand how variables work in JavaScript.

I hope you enjoy it, and if you like it and want to support me, you can:

You can support me by buying me a coffee ☕️
Forward it to a friend and invite them to subscribe
Share it on your social networks

Or if you just want to say hello, reply to this email or write me on Twitter/X and let's talk!

That's all for today. I hope you enjoyed the content, and see you next week! 👋

Cheers!
Marc