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·2yScroll-based SVG Filter Animations on Text
SVG filters offer powerful effects for web design. The author explores different scroll-triggered filter effects, inspired by the EDITORA website. Traditionally, SVG filters were applied to SVG text, but this experiment uses HTML headings. A demo is available for further exploration. The post encourages readers to experiment with SVG filters and provides additional resources for inspiration.
Codrops·2yUI Interactions & Animations Roundup #45
This post showcases a collection of recent UI interactions and animations, featuring diverse designs such as e-commerce concepts, AI assistant avatars, restaurant branding, and more. Highlighted works include contributions from artists like Serhii Polyvanyi, Gleb Kuznetsov, and Linur, offering inspiration across various design projects.
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·2yStaggered (3D) Grid Animations with Scroll-Triggered Effects
An exploration into staggered grid animations incorporating 3D perspective effects, filters, and typography. The demo includes a unique cylinder-like 3D effect in a two-columned grid layout, utilizing GSAP's SplitText plugin. The repo contains a trial version for experimentation.
Codrops·2yInspirational Websites Roundup: Webflow Special #6
This roundup highlights a selection of inspiring Webflow websites, showcasing the creativity and technical brilliance of various studios, agencies, and freelancers. Featured entities include DivBlockers, Sonar Music, OFF+BRAND, NAGARA, and many more, each demonstrating unique approaches in design, music, production, branding, and technology.
Codrops·1yGetting Started with Piecesjs: Building Native Web Components with a Lightweight Framework
Piecesjs is a lightweight front-end framework designed for creating modular and high-performance web components. It allows dynamic importing of only the necessary JavaScript and CSS, optimizing performance. Each component, called a 'Piece,' operates independently with encapsulated styles and interactions. The framework supports various CMS platforms and can be seamlessly integrated into complex workflows. Key features include dynamic importation, scoped event management, and efficient global CSS handling.
Codrops·2yA Selection of Creative Menu Patterns & Animations
Choosing the right menu pattern for a project can be challenging due to the plethora of options available. This curated list offers a variety of creative and stylish menu patterns and animations to provide inspiration. From minimalistic to playful designs, these examples aim to spark new ideas for your projects.
Codrops·1yCreating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js
Learn how to control elements in a 3D scene using your hands, a webcam, and a web browser. The tutorial leverages MediaPipe for hand tracking and Three.js for rendering the 3D environment. It includes step-by-step instructions on setting up the hand detection, creating a WebGL scene, and managing gestures for interactive controls in a browser-based 3D space.
Codrops·2yHabit Hustle: The Creative Process Behind a UI Animation
Michael, a visual designer based in Stockholm, shares his creative process for making a UI animation using gem materials. He details his program stack which includes Blender, Figma, and AfterEffects, and outlines the steps from concept creation, through animation synchronization between Blender and AfterEffects, to final rendering. Michael also shares useful tips for overcoming common challenges and emphasizes the importance of enjoying side projects as a way to learn new skills and create polished animations.
Codrops·1yUI Interactions & Animations Roundup #47
A curated collection of standout UI interactions and animations, featuring contributions from various designers and studios. Highlights include innovative website interactions, motion design, ecommerce hero sections, investment apps, marketing agency landing pages, and unique 404 pages.
Codrops·1yUI Interactions & Animations Roundup #48
The post features a collection of impressive UI interactions and animations, showcasing various projects like healthcare dashboards, website designs for satellite control, AI input animations, and branded metaverse experiences. It highlights works by several designers and studios, presenting creative visuals and innovative design concepts.
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·1ySimplifying Backend Tasks for Frontend Developers with Manifest, a One-File Solution
Manifest is an open-source tool designed to simplify backend tasks for frontend developers by using a single YAML file to create a complete backend. It includes features like a non-technical admin panel, a functional REST API, and an abstracted database for easy management. Built for simplicity and inclusivity, Manifest aims to bridge the gap between frontend and backend development, making it accessible even for those with minimal backend expertise.
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·2yCase Study: Armur—Alexandra Murgu Portfolio
A portfolio site mirrors personal creativity and must be both visually engaging and functional. Alexandra Murgu's site blends her neo-futuristic, dark-inspired art with practical web design elements. Creating depth using a camera rig, optimizing models for mobile, and close collaboration played key roles. Technologies used include Webflow, Lenis Scroll, Amazon S3, Figma, Cinema4D, and Redshift.