Codrops·1yConsecutive Scroll Animations with One Element
Explore how to create a consecutive flip animation using GSAP's ScrollTrigger and scrubbing. The post includes a demonstration of animating a single element across various waypoints while scrolling, with example HTML and JavaScript code to implement similar animations.
Codrops·1yCase Study: ChainGPT Labs
Explore the creative journey behind ChainGPT Labs, developed by Sigma Software Design, showcasing the development of a visually cohesive and functionally advanced platform for Web3 startups. Highlights include branding, 3D design, and interactive web development using tools like Webflow, GSAP, and FFmpeg. The cohesive visual identity, incorporation of 3D elements, and experimental layout designs demonstrate innovative solutions tailored for the Web3 ecosystem.
Codrops·1yBuild Your Own Tools with Penpot’s New Plugin System and Join the Contest
Penpot has launched its new Plugin System, allowing developers and designers to build custom plugins to enhance their workflows. The system supports any JavaScript framework and emphasizes community collaboration and security. To celebrate, Penpot is hosting a Plugin Contest from November 15th to December 15th, 2024, with cash prizes for creative plugin submissions.
Codrops·1yHow to Create an AI-Powered Newsletter Aggregator with React and AI Agents
Learn how to build an AI-powered newsletter aggregator using React and KaibanJS. This tutorial guides you through setting up AI agents to fetch, filter, and aggregate content from various newsletters into a single, easy-to-read format. The process is automated and can be set up in just 10 minutes, making it a powerful addition to any developer's toolkit. KaibanJS is a new open-source JavaScript framework for building multi-agent systems, and this tutorial includes a step-by-step guide on creating and customizing agents and tasks.
Codrops·1yRecreating the Mac Mini Effect Step-by-Step in Rive
The post provides a step-by-step guide to recreating the Mac Mini animation using Rive, a no-code animation tool. Key sections include an overview of the Rive interface, the use of nested artboards, setting up animation timelines, utilizing state machines for complex transitions, and creating faux 3D effects. Tips for grouping layers and using solo mode are also highlighted for efficient animation creation.