Codrops: Recent Episodes
None
Learn how to create an immersive 3D circular marquee in WordPress using Droip — a no-code tutorial to build orbiting, animated cards that bring your website to life.
Behind the scenes of creating a scalable brand system and digital platform that transforms how fashion moves from concept to delivery.
Exploring how Anima’s AI-driven design-to-code tools accelerate web prototyping, remixing, and creative experimentation.
A hands-on guide to animating WebGL shaders with GSAP, exploring how to control shader uniforms and sync JavaScript timelines.
This article takes you behind the scenes of Ponpon Mania, exploring how illustration, animation, WebGL, and GSAP came together to create an interactive comic experience.
From early design experimentations to radical UX decisions: a deep dive into the creative and technical process of my 2025 portfolio.
Frontend engineer and designer Tomoya Okada offers a glimpse into his world of immersive web experiences shaped by motion, interactivity, and elegance.
Readymag is a design tool that, unlike traditional web builders, lets you create a site from a blank canvas, placing every element freely. Let’s look at how that shapes the design.
Learn how analytical and systematic thinking can lead to natural creative insight, and discover what makes projects emotionally resonate.
In this case study, Tokyo-based designer Daiki Fujita shares the background and process of creating his digital portfolio.
Oliver Muñoz shares how leading creative teams across borders is less about control and more about trust, collaboration, and shaping digital experiences that transcend time zones and cultures.
From aesthetic restraint to GSAP magic, this case study reveals what happens when trust meets thoughtful execution.
An exploration of the mindset, methods, and motivations behind crafting tiny, expressive shaders that combine code, art, and constraint.
A music-driven visualizer where a glowing 3D orb pulses and spikes to the beat while GSAP-draggable panels drift around it with smooth, inertia-powered motion.
Learn how to create an infinite marquee that follows a custom SVG path using React and Motion.
A behind-the-scenes look at how bold vision and emerging tech shaped a boundary-pushing digital experience.
Creative Developer Robin Payot shares his journey, standout projects, and insights into WebGL, animation, and building award-winning interactive web experiences.
Learn how to create a responsive, infinitely scrolling image grid with parallax motion and staggered text animations using GSAP.
In this tutorial, we'll walk you through how to create bubble-like spheres using Three.js and GLSL—an effect that responds interactively to your mouse movements.
A playful experience where you drag and drop virtual T-shirts onto a model to instantly change their look.
Exploring the art of digital design with Jhosue Mesias—pushing boundaries, crafting experiences, and redefining creativity.
A comprehensive look at how to optimize Three.js scenes using Fiber, Drei, and advanced tools, ensuring smooth performance while retaining high-quality visuals.
An inside look at the creative process, challenges, and tools behind building a 3D game prototype from scratch.
Introducing Guillaume Lanier, a Creative & Frontend Developer based in Amsterdam, who crafts immersive digital experiences through innovative 2D/3D graphics and interactive design.
Create a playful stop-motion crayon cursor effect with p5.brush.js and smooth animations.
Players Club is a free Astro template for showcasing music artists—an experimental proof of concept built in collaboration with Alex Tkachev.
A breakdown of the best techniques to create realistic grass in Three.js without killing performance.
Learn how to create a circular text animation in 3D space using Three.js, shaders, and msdf-text-utils.
Nim is a free, open-source personal website template built with Next.js 15, React 19, Tailwind CSS v4, and Motion-Primitives, featuring subtle, pre-built animations.
In this spotlight, Quentin Hocdé shares his passion for creative coding, animations, and bringing interactive experiences to life.
Learn how to bring the Mac Mini animation to life using Rive’s powerful no-code tools, with tips on nested artboards, state machines, and faux 3D effects.
Explore the world of shaders with this easy-to-follow guide to creating a custom ASCII art animation using WebGL, Perlin noise, and GLSL.
Penpot's new Plugin System invites designers and developers to customize, innovate, and expand their creative workflows—plus, join the Plugin Contest for a chance to showcase your skills and win big!
Discover how Anderson Moss redefined its brand with an award-winning website that blends artful design with innovative tech.
A look into how QuestOne’s brand identity was reimagined through the “Hydrogen Circle”—a bold, modular 3D visual embodying their vision for hydrogen innovation and renewable energy.
Learn how to create an organic distortion effect for text using JavaScript and CSS for a unique, fluid animation.
Get started with AI agents in this practical tutorial and learn to build an AI-powered newsletter aggregator using React and KaibanJS.
Cool and inspiring code demos we’ve featured in our newsletter over the past few weeks.
Learn how Federico Pian built his 2024 portfolio using Nuxt, GSAP, and TresJs, with insights into design inspiration, animation techniques, and seamless page transitions.
Fundamentals of Frontend Architecture * The already-here future of prototyping * The continuing tragedy of emoji on the web
In this article, we take you behind the scenes to explore the creation process of an intriguing animation inspired by gemstone visuals.
An exploration of layout formations during scroll, where content is pinned until the layout is fully assembled.
In this Designer Spotlight, we feature Andrea Jelić, an award-winning web designer and art director from Croatia, as she shares insights into her creative process and showcases her standout web and branding projects.
A fresh set of great interactions and animation concepts from Dribbble for your inspiration.
During Mount Media's rebranding journey, its website became the ultimate stage for showcasing its "we know how to result" vibe. Here is a long story short about teamwork behind it.
Escape siloed design and engineering processes and speed up your product development by using code as your single source of truth. Let’s explore how.
Discover a fresh selection of inspirational websites, each featuring exceptional design, to ignite your creativity.
Learn how to create a custom jitter shader in React-Three-Fiber, inspired by the visual style of PS1-era games, to add a retro aesthetic to 3D models.
Behind the scenes of one of Artemii Lebedev's projects: Armur, a portfolio website for the film industry, created for Alexandra Murgu.
Learn how to apply a pixel/grid displacement to a texture in Three.js using shaders and GPGPU with a subtle RGB shift effect on cursor move.
Now in Baseline: animating entry effects * The anchor element * WebGPU Unleashed: A Practical Tutorial
Explore how the Design Education Series (DES) by Obys Agency was developed to provide a dynamic and engaging learning experience with innovative design and 3D features.
A simple yet powerful approach to Web Component server-rendering, declarative behaviors, and JavaScript islands.
Explore the visionary artistry of Vladimir Biondic, an independent Serbian art director and designer with over a decade of experience in web and branding design.
Build a minimal 3D web application to showcase designs on a laptop and phone in an interactive environment using Three.js and threepipe.
Meet Artemii Lebedev, the award-winning designer and art director behind Le:mma Studio, who excels in blending aesthetics and functionality, offering insights into his innovative works and creative process.
A fresh compilation of the most impressive and innovative website designs from recent weeks.
Misconceptions about view transitions * The Right Kind of Stubborn * CSS Grid Generator
Insights into the creative process and technical details behind the portfolio of Rogier de Boevé, a Belgium-based creative developer and digital designer.
In this article, we take you behind the scenes to explore the creation process of an intriguing animation.
Learn how to create distortion and grain effects on scroll using Three.js shaders, syncing HTML images with WebGL.
An introduction to Raymarching using the power of Signed Distance Fields (SDFs) and simple lighting to create a liquid shape effect.
How to use container queries now * Exploring Randomness In JavaScript * Drop it! * Vizzu
Learn how to create an animated, displaced sphere using custom shaders with Three.js and React Three Fiber.
A brand new collection of the most inspiring website designs from the past couple of weeks.
Lummi is ending the era of boring stock photos by enhancing creative workflows with high-quality, royalty-free, AI-generated images. Dive in and learn how Lummi is going to help you create captivating and unique designs and change the way you create.
Learn how to create an interesting progressive blur effect using WebGL, OGL, and GLSL shaders.
Learn how to create a glowing SVG text animation with a marquee effect using only HTML and CSS.
In collaboration with Webflow, we’re thrilled to present this roundup, featuring a handpicked selection of awe-inspiring websites.
Check out our fresh picks of websites with awesome designs to keep you in the loop with the latest trends.
Learn how to visually test websites using Chromatic and Playwright to ensure that web interfaces remain visually consistent and free of bugs.
Wiggle Bones for Three.js * A modern approach to browser support * How Deep is Your DOM?
An introduction on harnessing the power of Signed Distance Fields (SDFs) to draw shapes in WebGL and create interactive effects, such as lens blur.
Three.js Shading Language * New magic for animations in CSS * Progressively Enhanced Popover Toggletips
Check out our latest motion design collection, featuring the best selections from Dribbble to spark your creativity.
A grid animation based on Rémi Clauss' concept where grid items move to a specific position relative to their initial one.
An exploration of the collaborative creative process between Oscar Pico and Nam Hai during the design and development phases.
In collaboration with Webflow, we’re thrilled to present this roundup, featuring a handpicked selection of awe-inspiring websites.
🎉 GAAD * 16 Days of Accessibility Awareness * How LLMs Work, Explained Without Math * At some point, JavaScript got good
Discover our latest selection of websites featuring curated designs that keep you in sync with the newest trends.
Introducing the CSS anchor positioning API * Superior Range Syntax * Best intention barriers (ARIA edition)
Explore our latest motion design collection featuring the best shots from Dribbble to get your creativity flowing.
Being visible is just no longer enough. It’s all about leveraging attention. And then moving forward together. Synced.
SVGator introduces Lottie file support, offering an easy-to-use platform for creating and exporting Lottie animations for free. Learn how to create, edit, and benefit from Lottie animations in this guide.
An alternative proposal for CSS masonry * Printing music with CSS Grid * CSS inheritance
A small selection of fonts ideal for keeping your web design timeless and forward-looking.
A quick tutorial on how to create a beautiful distorted text ring effect in React Three Fiber.
Latency numbers every frontend developer should know * Putting React In The Browser * Franken UI
A WebGL experiment that explores two visual effects: a texture transition on a 3D can model and a procedural radial noise field.
A little collection of website menus that are compact and open into nifty boxes or shapes.
Explore our latest collection of websites with handpicked designs that will keep you updated on current trends.
A look into the making of Gabriel's 2024 portfolio website, complementing minimal design choices with subtle animations.
Explore Penpot, the open-source platform enhancing design and development teamwork, now featuring the CSS Grid Layout for even more powerful and efficient project creation.
A fresh motion design collection of the best shots from Dribbble to get your creativity flowing.
Explore the latest collection of innovative motion designs and inspiring UI interactions from Dribbble.
A carefully selected compilation of websites with really good web designs that have caught our attention over the past few weeks.
Freeflo is a comprehensive library of curated AI-generated images and prompts enabling accessible and professional AI image creation for creative projects.
An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.
Discover fresh motion designs and creative UI interactions from the best designers on Dribbble in our latest roundup.
Combining GSAP's Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.
A hand-picked collection of the most innovative and aesthetic websites that we've come across in recent weeks.
Learn how to code a similar hover animation to the one seen on the website of Quai Network.
Cyclic Dependency Space Toggles * Scrolling between scenes in Three.js * Weave * Sandstorm
Our first collection of 120+ free AI generated images for you to use in your projects or draw inspiration from. Prompts included!
Get inspired with new motion designs and creative UI interactions in our newest roundup, showcasing the latest works from talented artists on Dribbble.
A fresh collection of the most creative and beautiful websites that caught our attention in the past couple of weeks.
A recreation of the on-scroll pixelated image loading effect seen on Felicity Ingram's website.
With a gaming interface as its core concept, Sophie Studio's website design showcases its values, purpose, and expertise in a fun and engaging way.
Explore inspiring & creative motion designs in our latest UI interactions and animations roundup from Dribbble.
Some ideas and inspiration for layout animations where we go from an irregular grid to a slideshow or alternative view.
Discover the top 10 multipurpose WordPress themes that will help you build a responsive, user-friendly website with features you need for engaging visitors and improving conversions.
Learn how to create an interactive 3D carousel using WebGL, React Three Fiber, and GSAP with this step-by-step tutorial.
An animation featuring image tiles that transform into a full image when a menu item is clicked.
Get a glimpse of the creative and innovative techniques used by Studiogusto, a dynamic agency, in designing their new website to better reflect their values and showcase their expertise.
Discover how Progress Kendo UI, a commercial-grade UI library featuring data grids, charts, schedulers, date pickers, and rich content editors, streamlines UI development and saves time for web developers.
It's time for a new collection of Dribbble shots featuring trendsetting creative animations and motion designs that will ignite your inspiration.
Wondering if your agency should use a website builder with or without white labeling? This post will explore 11 reasons why you should be using a white label website builder from now on.
Chrome ships WebGPU * AgentGPT * Codeberg * README Template * Using the Cookie Store API
In this post, we’re looking at 10 of the best marketing agency websites. Whether you need inspiration or a trustworthy WordPress theme to get you started, you’ll find it here.
Take a look behind the scenes of the creation of a unique website for Crosswire that used a 3D environment made with WebGL to simplify their complex service offering.
A fresh collection of Dribbble shots featuring trendsetting creative animations and motion designs to fuel your inspiration.
Bicycle * Improving CSS Shapes with Trigonometric Functions * PyVibe * CodeQuest * Chatblade
Learn how to code stunning animations with Theatre.js in this beginner-friendly tutorial.
In this detailed tutorial you will learn how to turn 3D models into voxel art with Three.js.
Learn how to code a vibrant Cyberpunk scene using Three.js, complete with post-processing and dynamic lighting, no shader expertise needed!
This article provides tips to help developers increase productivity and explores the definition of developer happiness through a survey conducted by the Developer Nation community.
Some inspiration for clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.
Discover the best WooCommerce themes to help create an intuitive and seamless on-brand buying experience for your visitors.
Learn how to recreate the glass effect seen on Kenta Toshikura's website using postprocessing in Three.js.
Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way.
A fresh compilation of Dribbble shots showcasing creative animations and motion designs for your inspiration.
BeTheme has everything you need to build a high-performing shop for your ecommerce or retail business. Check out 12 of the best prebuilt ecommerce websites that come with BeTheme.
This tutorial will show you how to animate a camera flying through a 3D scene as the user scrolls using Theatre.js and React Three Fiber.
Learn how to recreate the reflective grid and energy wave from Crosswire's website using Three.js.
TresJS * Real-time hand tracking* Learn Images * Calligrapher.ai * Getlog * CSS color-mix()
In this tutorial, you'll learn how to recreate a captivating motion type effect using SVG and GreenSock.
The latest compilation of innovative and captivating demos and code experiments from the web.
This tutorial will guide you through the process of creating a 3D dice roller using Three.js and Cannon-es.
This article highlights the top tools and resources for web designers in 2023 to help improve productivity.
Unlock your creativity with this latest collection of Dribbble shots featuring fresh animation and motion design inspiration.
A brief exploration into how to twist and rotate text in 3D using Three.js and Shader magic.
Movement and transformation of type elements can elevate the user experience and add an extra layer of creativity to your design. So today we’d love to share some typography animations with you that get triggered by scrolling the page.
When it comes to designing typographic animations, one of the key factors to consider is the transform origin. By adjusting the transform origin, you can change the direction and movement of the animation, totally changing the look and feel of it. Additionally, adjusting the rotation and scale values of the element can also greatly affect the animation’s visual appearance and overall impact. These values can be used to create a sense of depth, movement, and emphasis on the typography.
By playing with different combinations of all these values, you can create a wide range of animations, each one with a unique effect and suitable for different contexts like an editorial piece or semantically different sections of a website.
Just keep in mind that although typographic animation can add an extra layer of creativity to your design, it should not be used excessively, so use it wisely.
If you enjoy these animations, you might also like these on-scroll letter animation ideas.
How can software addons significantly affect website performance or give businesses a boost?
You’re about to find out, and it’s a “feel good” narrative complete with examples. What follows applies to WordPress users. The software addons in question are WordPress plugins.
A best WordPress plugin is one that can accomplish a major or very important task. It is powerful, typically quite easy to work with. It is either compatible with or integrates with other WordPress tools.
Plugins you install on your website can add features. Can extend functionality, optimize SEO, boost speed and performance, and more. Having the right set of best WordPress plugins at the ready can make a huge difference in the growth of your blog, website, or business.
Check out these best WordPress plugins for your website building in 2023.
1. Brizy: The Best Website Builder for Non-techiesBrizy, is a website builder/theme builder for WordPress that offers an easy way of improving or adding functionality to an existing website, or even building a new one from scratch.
Brizy is fast, powerful, easy to use, and you can achieve what you want without having to worry about code. It’s great for beginners and non-techies, although technical types love it too.
- Brizy’s Theme Builder is a great tool if you need to customize certain parts (or every part) of your website.
- The Theme Builder can also be used to create dynamic templates and special pages.
- Since WooCommerce integration is included, you can customize all areas of your shop site.
- Select one of Brizy’s 100+ high converting, pre-made websites to get started, or import Brizy’s pages, blocks, or pop-up designs with 1 click.
- A White Label option is available to brand Brizy as your own.
Brizy is free to download, and a Pro version is also available.
Click on the banner to find out more.
2. WpDataTables – WordPress tables pluginYou should feel an immense degree of satisfaction any time you can build a table or chart that will be of significant value to its user. If creating that table or chart required organizing and managing a huge amount of complex data, you very well could have experienced something between mild frustration and total exhaustion.
66,000+ companies and individuals working various types of complex data could tell you how this best-selling wpDataTables plugin made their work much easier, due to their ability to –
- choose from 4 chart-building engines
- connect to multiple database sources
- create responsive, informative, and easily editable tables and charts
- take full advantage of wpDataTables’ integration with Elementor, Divi, Avada, and WPBakery
- color code key information using the Conditional Formatting feature.
Click on the banner to find out more about how this WordPress plugin makes complicated tasks easy.
3. Amelia – WordPress booking pluginWhen you add Amelia WordPress booking plugin functionality to a WordPress website design, amazing things happen. The website user is suddenly the owner of an automated booking system that flawlessly manages an unlimited number of appointment bookings, for an unlimited number of business clients, at multiple locations, and from a single platform and dashboard.
Amelia is an excellent choice for client-dependent enterprises.
- Clients can book appointments online 24/7.
- Clients can be sent reminders via Email and SMS notifications or contacted via WhatsApp messaging.
- Events, group bookings, coupons, and packages can be managed with Amelia.
- Booking forms can be customized to match a business’s brand
- The Amelia plugin supports WooCommerce, PayPal, Stripe, Mollie, and Razor payments.
Click on the banner to learn more about this premier automated booking system plugin.
4. Slider Revolution – more than a WordPress slider pluginSlider Revolution has changed over time to become more than just a highly popular WordPress slider plugin. Features and functionality have been added that have transformed the Slider Revolution plugin into a WordPress tool that enables web designers to add spice and flair to their websites using –
- cutting edge animation effects
- 250+ website and slider templates designed to impress
Slider Revolution is trusted by more than 9 million worldwide users.
5. LayerSlider – Best WordPress Slider Builder PluginLayerSlider has always been one of the best WordPress slider plugins for making responsive sliders and popups. In the past years, it has evolved into a comprehensive tool to create high-quality, animated, rich web content for any website.
With LayerSlider, you can –
- add jaw-dropping animations with just a few clicks to amaze your audience
- create image galleries, landing pages, animated page blocks, parallax and scroll scenes, and even entire websites.
6. TheDock – Ship Solid WebsitesTheDock is a WordPress theme builder and editor designed to help teams create theme architecture right while streamlining their workflow. Themes built on the cloud promote easy team collaboration, perform great, and are easily maintained.
- TheDock writes clean code for you
- TheDock-built themes feature fast page loads
Key features include an auto-adjusting layout system, a templating system, global UI components, and a White Label builder.
7. Essential Grid – Best WordPress grid pluginEssential Grid is the best WordPress grid plugin for creating a gallery that is the focal point of your website, and not treated like just another page. Essential Grid helps you make this happen with its –
- 50+ customizable grid templates
- stunning grid layout options from boxed and full-width to full-screen layouts to customized rows, columns, and spacings.
Essential Grid galleries can also accept social media content from Facebook, Instagram, Twitter, Flickr, and Vimeo.
8. Ads Pro – WordPress ad managerThis WordPress ad manager plugin is a cinch to set up and get started, and offers an attractive selection of advertising sales, management, and display options.
Ads Pro highlights include –
- Admin and Frontend User Panels capable of successfully managing huge numbers of ads.
- a Frontend ad sales and management order Form.
- 25+ customizable ad templates, 20+ ad display options, 3 billing methods, 4 payment methods, and click fraud and ad block protection.
9. Download Monitor – Best WordPress Download ManagerThis famous (100,000+ users) WordPress downloads manager enables its users to track & protect their file downloads.
With Download Monitor, you can –
- Track almost any type of file download – e.g., ZIP, PPT, XSLX, and PDF.
- Get access to aggregated statistics about file download
- Works seamlessly with Gravity Forms, Contact Form 7, Restrict Content PRO, LearnDash, and Ninja Forms.
Download Monitor is the all-in-one solution for tracking file downloads on your website.
Plugins you install on your website can add features and extend functionality. Also optimize SEO, boost speed and performance, and more. Having the right set of WordPress plugins at the ready can make a huge difference. You can see difference in the growth of your blog, website, or business.
Choosing the right WordPress plugin can be crucial for the speed, security, and user-friendliness of your website. One or more of these 9 best WordPress plugins deserves to be an essential part of your web design toolkit.
Inspirational Website of the Week: Estúdios Victor CórdonA beautiful design with an amazing background video animation on scroll. Our pick this week.
Get inspired
Our SponsorStart speaking a new language in just three weeks with BabbelLearning to speak a new language goes beyond just vocabulary: it’s about being able to hold a real-life conversation with a local, and understanding the culture and the people of each place. Consider Babbel your expert-led passport to learning, with 10-minute lessons that are so effective, many users feel confident speaking a new language in just three weeks. Supplement those with the podcasts, games, articles and live online classes for a well-rounded education in weeks.
Start learning a new language (and culture) today for up to 55% off
Our top Core Web Vitals recommendations for 2023The Chrome DevRel team has compiled a set of the most effective techniques for enhancing Core Web Vitals performance in 2023.
Read it
Conditional CSSAhmad Shadeed goes over a few CSS features that we use every day, and shows how conditional they are.
Read it
Why Not document.write()?This article by Harry Roberts provides a comprehensive examination of the reasons why using the document.write() JavaScript method should be avoided.
Check it out
Data binding in React: how to work with forms in ReactIn this tutorial, you’ll learn how to wire up all of the different form controls in React.
Check it out
Loops and RepetitionIn the latest edition of Offscreen Canvas, Daniel Velasquez examines the technique of using sin/cosine for looping.
Read it
3D in CSSIn this piece from Brad Woods’ Digital Garden collection, readers will learn the proper techniques for creating a 3D space and manipulating the translation and rotation of an element using CSS.
Read it
Building an accessible theme picker with HTML, CSS and JavaScriptSarah L. Fossheim shows how to use HTML, CSS, and vanilla JavaScript to add an accessible theme picker component to a website.
Read it
Five typography trends set to make waves in 2023A preview on this year’s trends for typography reaching from code and generative typography to type as a political tool.
Check it out
CSS color functions and custom propertiesManuel Matuzović delves into color functions and shows how powerful they are in combination with custom properties.
Read it
ScrutchAndré Simmert created this laser-focussed, privacy-first writing tool.
Check it out
Justify Space Between Individual Items in FlexboxJim Nielsen shows how use margin: auto to justify flex items in a flat hierarchy.
Read it
Sibling Scopes in CSS, thanks to :has()Bramus Van Damme shows how to leverage CSS :has() to select all siblings between to boundaries.
Read it
Stylized Low PolyBruno Simon utilizes 3D Coat to create stunning, low poly “stylized” and “hand-painted” models reminiscent of the popular game World of Warcraft.
Check it out
How to Build Great HTML Form ControlsAustin Gil writes about things to consider when building HTML forms.
Read it
Full dashboard layoutGeorge Moller shows how to use CSS Grid to make a full dashboard layout in this thread.
Check it out
OFFFICEA really cool project implemented by Federico Valla. Read this interesting thread about it.
Check it out
From Our BlogGetting Creative with Infinite Loop ScrollingA quick look at how to recreate the infinite loop scrolling animation seen on Bureau DAM with GSAP and Lenis.
Check it out
From Our BlogReplicating the Light Effect from MIDWAM with Three.js and PostprocessingIn this coding session, we’ll use Three.js and postprocessing to recreate the beautiful light effects featured on Midwam’s website.
Check it out
Our SponsorUpgrade your sleep and downgrade your stress with the Apollo wearableThe Apollo wearable uses proven touch therapy to rebalance your nervous system and support your circadian rhythm. Sleep better and longer, stay calmer, find focus, and feel more energized with this groundbreaking new wearable. Get 10% off today.
Check it out
Infinite scrolling is a web design technique that allows users to scroll through a never-ending list of content by automatically loading new items as the user reaches the bottom of the page. Instead of having to click through to a new page to see more content, the content is automatically loaded and appended to the bottom of the page as the user scrolls. This can create a seamless and engaging browsing experience for users, as they can easily access a large amount of content without having to wait for new pages to load. Forget about reaching the footer, though!
Looping the scroll of a page refers to the process of automatically taking users back to the top of the page once they reach the end of the scroll. This means that they will be able to continuously scroll through the same content over and over again, rather than being presented with new content as they scroll down the page.
In this article, we will show some examples creative loop scrolling, and then reimplement the effect seem on Bureau DAM. We will be using Lenis by Studio Freight to implement the looping effect and GSAP for the animations.
What is loop scrolling?When your content is limited, you can do creative things with loop scrolling, which is basically infinite scrolling with repeating content. A great example for such a creative use is the effect seen on Bureau DAM:
Bureau DAM employs a fun looping scroll effectSome great ideas how looping the scroll can be used in a creative way and add value to a website:
- It can create an immersive experience for users. By continuously scrolling through the same content, users can feel more immersed in the website and engaged with the content. This can be particularly useful for websites that want to create a strong emotional connection with their audience.
- It can be used to create a game or interactive experience. By adding interactive elements to the content that is being looped, developers can create a game or interactive experience for users. For example, a website could use looping the scroll to create a scrolling game or to allow users to interact with the content in a novel way.
- It can be used to create a “time loop” effect. By looping the scroll in a particular way, developers can create the illusion of a “time loop,” where the content appears to repeat itself in a continuous loop. This can be particularly effective for websites that want to convey a sense of continuity or timelessness.
A simple exampleLet’s create a simple example. We’ll set up a grid of 6 images that repeat on scroll. How can we achieve this? It’s simple: we need to repeat the content in a way that when reaching the end, we can simply reset the scroll to the top without anybody noticing! We’ve previously explored this concept in our CSS-only marquee effect. In another demo we also show how to play with this kind of infinite animation.
So, for our first example we have the following markup:
```
``` Our styles will create a 3×3 grid:
.grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 5vh;}.grid__item {height: 47.5vh; /* 50vh minus half of the gap */background-size: cover;background-position: 50% 20%;}.grid__item:nth-child(3n-2) {border-radius: 0 2rem 2rem 0;}.grid__item:nth-child(3n) {border-radius: 2rem 0 0 2rem;}.grid__item:nth-child(3n-1) {border-radius: 2rem;}
Lenis comes with a handy option for making the scroll infinite. In our script we’ll make sure to repeat the visible grid items (in this case it’s 6):
const lenis = new Lenis({ smooth: true, infinite: true,});function raf(time) { lenis.raf(time); requestAnimationFrame(raf);}requestAnimationFrame(raf);// repeat first six items by cloning them and appending them to the .gridconst repeatItems = (parentEl, total = 0) => { const items = [...parentEl.children]; for (let i = 0; i <= total-1; ++i) { var cln = items[i].cloneNode(true); parentEl.appendChild(cln); }};repeatItems(document.querySelector('.grid'), 6);
The result is a grid that repeats on scroll:
A simple example of loop scrolling. View the demoPlaying with animationsWhile we scroll, we can add some fancy animations to our grid items. Paired with switching the transform origin in the right time, we can get something playful like this:
Scale animation while scrolling. View the demoWe can also play with a 3D animation and an additional filter effect:
Adding a filter effect and perspective. View the demoThe Bureau DAM exampleNow, let’s see how we can remake the Bureau DAM animation. As we don’t have a grid here, things get a bit simpler. Just like them, we’ll use an SVG for the typography element, as we want to stretch it over the screen:
```
An infinite scrolling demo based on Bureau DAM
``` In our CSS we set a couple of styles that will make sure the items are stretched to full screen:
.grid { display: flex; flex-direction: column; gap: 5vh;}.grid__item { height: 100vh; place-items: center; display: grid;}.grid__item-inner {display: grid;gap: 1rem;place-items: center;text-align: center;}.grid__item--stack {display: grid;gap: 2rem;grid-template-rows: 1fr auto;}.grid__item-logo {padding: 8rem 1rem 0;}.grid__item-img {background-size: cover; background-position: 50% 50%;height: 70vh;aspect-ratio: 1.5;}.grid__item-text {margin: 0;}
A proper setting for the transform origins ensures that we get the right visual effect:
gsap.registerPlugin(ScrollTrigger);// repeat first three items by cloning them and appending them to the .gridconst repeatItems = (parentEl, total = 0) => { const items = [...parentEl.children]; for (let i = 0; i <= total-1; ++i) { var cln = items[i].cloneNode(true); parentEl.appendChild(cln); }};const lenis = new Lenis({ smooth: true, infinite: true});function raf(time) { lenis.raf(time); requestAnimationFrame(raf);}imagesLoaded( document.querySelectorAll('.grid__item'), { background: true }, () => { document.body.classList.remove('loading'); repeatItems(document.querySelector('.grid'), 1); const items = [...document.querySelectorAll('.grid__item')]; // first item const firtsItem = items[0]; gsap.set(firtsItem, {transformOrigin: '50% 100%'}) gsap.to(firtsItem, { ease: 'none', startAt: {scaleY: 1}, scaleY: 0, scrollTrigger: { trigger: firtsItem, start: 'center center', end: 'bottom top', scrub: true, fastScrollEnd: true, onLeave: () => { gsap.set(firtsItem, {scaleY: 1,}) }, } }); // last item const lastItem = items[2]; gsap.set(lastItem, {transformOrigin: '50% 0%', scaleY: 0}) gsap.to(lastItem, { ease: 'none', startAt: {scaleY: 0}, scaleY: 1, scrollTrigger: { trigger: lastItem, start: 'top bottom', end: 'bottom top', scrub: true, fastScrollEnd: true, onLeaveBack: () => { gsap.set(lastItem, {scaleY: 1}) } } }); // in between let ft; let st; const middleItem = items[1]; ft = gsap.timeline() .to(middleItem, { ease: 'none', onStart: () => { if (st) st.kill() }, startAt: {scale: 0}, scale: 1, scrollTrigger: { trigger: middleItem, start: 'top bottom', end: 'center center', scrub: true, onEnter: () => gsap.set(middleItem, {transformOrigin: '50% 0%'}), onEnterBack: () => gsap.set(middleItem, {transformOrigin: '50% 0%'}), onLeave: () => gsap.set(middleItem, {transformOrigin: '50% 100%'}), onLeaveBack: () => gsap.set(middleItem, {transformOrigin: '50% 100%'}), }, }); st = gsap.timeline() .to(middleItem, { ease: 'none', onStart: () => { if (ft) ft.kill() }, startAt: {scale: 1}, scale: 0, scrollTrigger: { trigger: middleItem, start: 'center center', end: 'bottom top', scrub: true, onEnter: () => gsap.set(middleItem, {transformOrigin: '50% 100%'}), onEnterBack: () => gsap.set(middleItem, {transformOrigin: '50% 100%'}), onLeave: () => gsap.set(middleItem, {transformOrigin: '50% 0%'}), onLeaveBack: () => gsap.set(middleItem, {transformOrigin: '50% 0%'}), }, }); requestAnimationFrame(raf); const refresh = () => { ScrollTrigger.clearScrollMemory(); window.history.scrollRestoration = 'manual'; ScrollTrigger.refresh(true); } refresh(); window.addEventListener('resize', refresh);});
The result is a squashy and squeezy sequence of joy:
Check out the demoAnd that’s it! Hope you had some fun and that you got some inspiration for your next projects.
It doesn’t matter how complete your business plan is or how good your product or service may be. The success of your business may eventually depend on the look and feel of your online store. Or, maybe, online presence, and how well it represents your brand.
The great thing about the WordPress platform is that it has everything you need. We mean in the way of tools and themes to create a pixel-perfect digital storefront that will engage and captivate your visitors.
Finding just the best WordPress theme should not be difficult. Except there are thousands to choose from. Not all of them can give you a website that can adequately capture the look and feel of your brand. While giving its visitors a seamless user experience.
The challenge is to choose a theme that enables you to beautifully present your content, engage your visitors, and boost your brand.
This post features 12 best WordPress themes for 2023 that can and will do exactly that.
1. Be – Multipurpose WordPress ThemeThis ultra-popular multipurpose WordPress theme is the grandaddy of them all in terms of sheer size with its 250,000+ users and its 40+ core features that includes a 650+ pre-built website library, a huge array of design elements and options, and several of the most advanced page and website building tools on the market.
Among the key features this multipurpose WordPress theme places at your fingertips you’ll find –
- Be Builder, the fastest, lightest, and most intuitive website builder for WordPress with its impressive page-building capabilities that include the ability to view each element while customizing it.
- Be Builder Blocks with its constantly growing library of pre-built sections.
- Be Builder Woo, that offers a simple way to design an online store complete with customer-friendly shopping features, product previews, a sticky menu, and more.
- Be Theme’s Header Builder 2.0 with 14 pre-build headers (or create your own) including mobile-ready headers and interactive headers.
There’s much, much more. Click on the banner to find out for yourself.
2. Total WordPress ThemeA seemingly endless number of design options, customizer settings, layout choices, and navigation options, coupled with dynamic template functionality, and the popular WPBakery frontend drag and drop page builder enables Total’s users to create attractive, responsive, and engaging websites with ease.
- Total’s Design elements include Customizer Theme settings, Unlimited Styling, page builder blocks and extra modules, Post entry cards, animations, layout options, and custom backgrounds.
- Total is translation and RTL ready, is fully integrated with WooCommerce, and features developer-friendly code.
- Slider Revolution is included together with a custom font manager
- Total is compatible with most of the popular plugins including bbPress, Uber Menu, Easy Digital Downloads, WPML, Yoast, Ultimate Addons. and more.
“Build it your way.” could easily be this aptly named theme’s slogan. Click on the banner to find out more about what has made Total’s 48,000 customers happy.
3. Electro – WooCommerce Theme for Affiliates, Dropship and Marketplace WebsitesJoin 21.2K+ happy customers as you take your design to the next level when you create your store with Electro, the complete platform that creates pixel-perfect designs while producing 100% clean code.
- Electro is fast. A typical page load time is 1.25 seconds.
- This WordPress eCommerce theme is an ideal choice for building affiliate, dropship, and marketplace websites and WooCommerce electronic stores. It is extremely user friendly, highly customizable, and responsive.
- Electro is page-builder independent. It is also fully compatible with WPBakery and Elementor page builders.
- Electro provides a choice of innovative WooCommerce layouts you can customize to showcase your products, show reviews, and create customer-centric checkout features.
Click on the banner to learn more about what Electro has to offer and be prepared to be impressed.
4. Uncode – Creative & WooCommerce WordPress ThemeThis easy to work with creative WordPress theme places the tools you need at your fingertips for building a stunning website and WooCommerce online store you want to be attractive, engaging, and a step ahead of the competition.
- Uncode’s Advanced Drag & Drop Product Builder is supplemented with 70+ professionally designed mix and match pre-made designs, 500+ wireframes sections, and more.
Uncode’s 100,000+ sales have made it one of the top selling Envato themes of all time.
5. TheGem – Creative and WooCommerce WordPress ThemeTheGem, the best-selling creative WordPress theme and website builder, was designed with versatility in mind and unique features:
- 400+ pre-built websites in outstanding design
- Theme Builder for building headers, footers, mega menus, popups etc. right away in Elementor or WPBakery
- TheGem Blocks: a collection of 600+ pre-built page sections to accelerate your work
- WooCommerce Builder for custom tailored products, shop pages & optimized checkouts. With AJAX filters, variation swatches and more premium WooCommerce features
You’ll love the 5-star customer support, as have 60,000 others.
6. Vault – Multi-Purpose Elementor WordPress ThemeVault, with its interactive design tools and many customization options, enables you to build a clean website that features an online presence with landing pages designed to attract and engage customers.
- Start with Vault’s 50+ full websites and 1,200+ templates
- Vault’s 230+ expertly coded widgets help generate more traffic, leads, and conversions.
- Vault’s global design system maintains consistency throughout your site.
- And the Theme Builder gives you complete control over your website’s static elements.
7. Rey WordPress WooCommerce ThemeThe Rey WooCommerce theme takes building a WooCommerce site to the next level with its powerful Elementor and WooCommerce integrations coupled with WordPress’s sophisticated engine.
- Rey features an outstanding selection of pre-made designs with lifetime updates
- Rey provides a selection of Elementor widgets that will cover almost any situation
- Ajax Navigation and Filters streamline your website’s page browsing and navigation functionality
Rey is performance oriented, SEO and developer friendly, and responsive.
8. Blocksy Free Ecommerce WordPress ThemeBlocksy is a free eCommerce WordPress theme that is lightning fast and loaded with intuitive website-building features that include –
- a header builder, a footer builder, custom post types, and dynamic data support.
- a content blocks feature that allows insertion of any piece of content anywhere throughout your website
- a local Google fonts feature that provides time-saving local caching on your own web server, a White Label feature, and a Mega Menu.
9. Avada WordPress ThemeAvada is the ultimate WordPress theme and website builder. Avada is also the #1 best selling WordPress theme of all time with more than 750,000 users.
- Avada is built for speed and its impeccable code quality leads to high performance results
- Avada’s WooCommerce builder is just right for creating custom shop, cart, checkout, and product layouts.
- Avada features 400+ pre-built web pages, 120+ design and layout elements in a 100% responsive framework.
10. KnowAll – WordPress Knowledge Base ThemeKnowAll is the most powerful WordPress theme on the market for building a performant and easy to use knowledge base.
- KnowAll’s advanced analytics help you gain valuable insights into how visitors are using your knowledge base.
KnowAll provides feedback from your knowledge base visitors so you can better understand what content visitors find to be useful and engaging and identify and refine unhelpful articles.
11. Impeka – Creative WordPress themeIntuitive for beginners and full of pleasant surprises for more advanced users, the Impeka WordPress theme provides complete freedom to realize your vision of an ideal website and make it happen fast. Here’s why:
- Impeka is the overall best rated WordPress theme on ThemeForest.
- Features include the Enhanced WPBakery page builder, Elementor and Gutenberg editors, and WooCommerce integration.
- There are plenty of detailed demos, plus mega menu, footer, and popup builders.
Impeka is fast and SEO optimized.
12. XStore – WooCommerce WordPress ThemeThe first thing you’ll notice about XStore is the incredible value you get for a small investment. The second is probably its most popular feature, its 120 awesome pre-built shops.
There’s more of course –
- Like XStore’s full support for Elementor, the 60+ Elementor widgets, and its header and single product page builders.
- Or the eCommerce features and tools to create a multi-vendor marketplace.
XStore is a great choice for building high converting stores.
Finding the right WordPress theme should be easy. Except there are thousands to choose from and not all of them are capable of giving you the results you need. You want to adequately capture the look and feel of your brand and, at the same time, providing your visitors with a seamless user experience.
The 12 best WordPress themes featured in this post can do precisely that.
In this new ALL YOUR HTML coding session we’ll dive into replicating the magical light effects seen on Midwam’s website using Three.js and postprocessing.
Original: https://midwam.com/en
Developed by: https://immersive-g.com/
This coding session was streamed live on January 9, 2022.
Check out the live demo.
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
Inspirational Website of the Week: Andreas AntonssonThe portfolio of Andreas Antonsson offers a delightful user experience with its fluid design and smooth scrolling, as well as excellent typography that enhances the overall aesthetic.
Get inspired
Our SponsorWhere is my website traffic and how do I get more?Some straight facts about search engine traffic: 51% of all website traffic is driven by SEO, 40% of all online revenue is driven by SEO, 72% of search traffic goes to the first 10 results on the first page. We have the formula to get your website the conversions you are looking for! Book your complimentary SEO call.
Book now
WebspacesWebspaces is a new kind of website that uses HTML to create 3D worlds in addition to 2D pages. Read more about it in this article and thread by Greg Fodor.
Check it out
Companies.tools ’22 recapHere’s how and which apps and tools tech teams all over the world used in 2022.
Check it out
Copy DennisDennis Snellenberg created this homnage to all the creators who have taken a little bit too much inspiration from his portfolio website.
Check it out
Mafs: React components for interactive mathBuild interactive, animated visualizations with declarative code using Mafs.
Check it out
Draw SVG rope using JavaScriptA beautifully illustrated article by Stanko Tadić that explains how to use SVGs and JavaScript to create an animation of a rope.
Read it
InfiniteGridAustin Malerba created this demo of a pannable infinite grid in React.
Check it out
Slow RoadsThe new version of the endless driving experience now has controllers and wheels plus first-person view. Read more about it in this article.
Check it out
Top Pens of 2022 on CodePenA collection of the most hearted codepen demos of 2022.
Check it out
MeshEpoxyMaterialPaul Henschel has created a demo that showcases the capabilities of the new MeshTransmissionMaterial in drei, which allows for realistic rendering of glass, gelatin, or epoxy materials with RGB shift and noise effects.
Check it out
CSS :has() feature detection with @supports(selector(…)): You want :has(+ ), not :has()Bramus Van Damme explains how when you’re feature detecting :has() with @supports you must pass a selector into :has().
Read it
Pseudo-classes can do magicKevin Powell shows a really useful trick using pseudo-classes in CSS in this short video.
Check it out
YouTube TranscriptA tool that lets you get the transcript of a YouTube video so that you can simply read it.
Check it out
Sailboat UIThis modern UI component library, built with Tailwind CSS, provides over 150 pre-designed components to help developers quickly and easily create websites.
Check it out
How to use ChatGPT in product design: 8 practical examplesSome interesting examples on how ChatGPT can help with product design. By Nick Babich.
Check it out
AI: Markets for Lemons, and the Great Logging OffLars Doucet asks an important question: What happens when most “people” you interact with on the internet are fake?
Read it
Shift Happens“Shift Happens” is a book that traces the history of keyboards from their early days as typewriters to the present-day digital versions. The site shows a wonderful 3D preview of the book!
Check it out
Safari’s date-picker is the cause of 1/3 of our customer support issuesLearn why Robin Thomas is shocked by the poor design of the standard HTML field, especially considering that it is provided by a company known for its attention to good design.
Read it
From Our BlogInspirational Websites Roundup #45A compilation of the most beautifully designed and thoughtfully crafted websites we’ve come across lately.
Check it out
Our SponsorExplore the world like a local with BabbelIf you’ve always wanted to learn a new language, Babbel will be the most productive 10 minutes of your day. Trusted by over 10 million subscribers worldwide, the subscription-based language learning platform can get you confidently conversing in a new tongue in just three weeks. This isn’t your grade school textbook: the bite-sized lessons, available in 14 languages, teach you localized vocabulary you’ll actually use in the real world. Plus, speech recognition technology helps you perfect your accent. Sign up today and get up to 60 percent off your subscription.
Learn more
We’re excited to kick off the new year with our first website roundup, featuring a selection of innovative and visually stunning sites that give us a glimpse into the web design trends of 2023. However, this will also be our last roundup for the time being, as we have some exciting new surprises in store for you on our website in the coming weeks!
If you’re already a subscriber, you may have seen some of these websites featured in our recent email digest. If you’re not on our mailing list and would like to receive regular inspiration, be sure to subscribe to stay up-to-date with our curated selections, frontend news and other exciting content.
In the meantime, we hope you enjoy this final roundup of inspiring websites.
PATRICK PROACTAgence BabyloneHLEDashQWineismDALILA THE BRANDKlarnaAndreas AntonssonSikha HaircareMARNONAshThe boy with the book under his armEFA World Cup 2022InflectionConstance Souville PortfolioTaleoDentsu runwayAleksandr Yaremenko1002.coKUMALEONBrandverseEarthfoamVisionsDAOKATSUAKI UTSUNOMIYA – PORTFOLIO ’22Ilja van EckTriliTechPreferable Future of FoodWater by Falmec
As another year comes to a close, we wanted to take a moment to express our gratitude to all of our readers, supporters, writers, and sponsors. Without your continued support and engagement, we wouldn’t be able to bring you our experiments and tutorials and invite amazing writers to contribute.
As we look back on the past year, we’re proud to have published a wide range of articles, tutorials, and experiments that cover a variety of topics and technologies related to frontend development. In particular, we focused on bringing you the latest and most innovative web experiments, as well as providing inspiration for your web design and UI projects. We also delved into the world of WebGL and Three.js, offering comprehensive tutorials and resources to help you get started with these powerful tools.
As we move into 2022, we’re excited to continue bringing you inspiration and exciting demos, and keeping you updates with the latest frontend news!
We’ll be sending out our Collective to our newsletter subscribers first, so make sure to subscribe, to get hand-picked fresh links from the frontend community. In addition, we’d love to send you the occasional exclusive goodie, so don’t miss out!
We look forward to seeing what the new year will bring. Here’s to a joyful and transformative 2022!
Hope you enjoy our little “look back” feature!
Inspirational Website of the Week: Constance Souville PortfolioThe last inspirational website of the week is Constance Souville’s lovely portfolio which boasts a visually appealing and distinctive design with engaging details.
Get inspired
Our SponsorSynapseIndiaTransformational solutions and digital growth, enhance your shopify/e-commerce store and mobile app.
Learn more
MicrofeedA lightweight CMS for blogs, podcasts, documents and more. Self-hosted on Cloudflare.
Check it out
React Wrap BalancerA simple React component that makes titles more readable. Made by Shu Ding.
Check it out
Koi PondScott Darby made this wonderful interactive koi pond demo with a heightfield water simulation, real-time refractions and a generative night sky that’s different each time.
Check it out
OpenAI PHPNuno Maduro made OpenAI PHP for Laravel which is a supercharged community PHP API client that allows you to interact with the Open AI API.
Check it out
EFA World Cup 2022A cool interactive website with an eco-friendly activities contest.
Check it out
Framer Awards 2022The Framer team is inviting you to design and publish your most creative site and join the #FramerAwards2022. The Framer team will review all submissions and announce winners in the end of January.
Check it out
Things CSS Could Still Use Heading Into 2023Chris Coyier shares his thoughts on the exciting possibilities for the future of CSS in this article, offering a collection of innovative ideas for what the styling language could achieve.
Read it
A CSS challenge: Skewed HighlightSacha Greif recently issued a challenge on Twitter, daring his followers to create a visually striking highlighter effect using only CSS. Vadim Makeev accepted the challenge and set to work on coding a solution.
Check it out
Jazz.ComputerAn interactive song by Yotam Mann with visual design by Sarah Rothberg. Scroll to play it!
Check it out
CSS SubgridGet ahead of the game and learn about the potential of subgrid in web design with Rachel Andrew’s informative article on the subject.
Read it
2022 Roundup of Web ResearchGeoff Graham from CSS-Tricks has compiled the annual roundup of the latest front-end research, showcasing this year’s trends and offering insights into what we can expect in the coming year.
Read it
LocalfontsThis handy tool allows you to preview and compare your local fonts against various background colors, making it easy to select the most fitting font for your newxt project.
Check it out
This is the year of the RSS reader. (Really!)Nikki Usher’s prediction for the next year: a better, bigger, bolder RSS reader.
Check it out
PbproxyIf you need to access and manipulate the clipboard on a remote machine, this tool makes it easy to do so.
Check it out
Obscure CSS: Restoring VisibilityIn this article, Roman Komarov talks about one of the interesting aspects of the visibility propery in CSS and proposes a bold idea: what if we would never use visibility: visible?
Read it
Parsify DesktopIn case you didn’t know about it: Parsify Desktop is a next generation, notepad-based calculator, built with extendibility and privacy in mind.
Check it out
From Our BlogUI Interactions & Animations Roundup #27Looking for a fresh burst of animation inspiration? Check out this new collection of creative Dribbble shots.
Check it out
Our SponsorWhere is my website traffic and how do I get more?Some straight facts about search engine traffic: 51% of all website traffic is driven by SEO, 40% of all online revenue is driven by SEO, 72% of search traffic goes to the first 10 results on the first page. We have the formula to get your website the conversions you are looking for! Book your complimentary SEO call.
Book now
Expolight Other Conceptby Advanced Team
Type Exploration №002by Matthew Hall
Monstrumby Evgeny UPROCK
MintNFT – Landing Pageby Awsmd
Modern Art – News Websiteby Evgeny UPROCK
Events landingby Nino Lekveishvili
Readby Slava Kornilov
365MAGby Ruslan Siiz
Animation for the Design Library Concept Websiteby Vito Burhonski
Viral Tunnelby Danil Aksenov
Product Growth Platform Landing Page Animatedby Bella Meillenia
Texture and Form Personal Projectby Zhenya Rynzhuk
FILAYYYYby Hrvoje Grubisic
Manage Your Inner Voice – Presentation Deckby Bella Meillenia
Homyz – Property Landing Page Websiteby Bayu Ananda
ALET Agency About Pageby Zhenya Rynzhuk
Videoby Slava Kornilov
Sunday Scaries: Looming Deadlinesby Teresa Yang
Hall of fameby Matthew Hall
Colors Studio Explorationby Maud Rochel
Photo Grid Animationby Zhenya Rynzhuk
Inspirational Website of the Week: Aleksandr YaremenkoThe portfolio of Aleksandr Yaremenko is a celebration of exciting design elements brought to a next level. A great source of inspiration.
Get inspired
Our SponsorExplore the world like a local with BabbelIf you’ve always wanted to learn a new language, Babbel will be the most productive 10 minutes of your day. Trusted by over 10 million subscribers worldwide, the subscription-based language learning platform can get you confidently conversing in a new tongue in just three weeks. This isn’t your grade school textbook: the bite-sized lessons, available in 14 languages, teach you localized vocabulary you’ll actually use in the real world. Plus, speech recognition technology helps you perfect your accent. Sign up today and get up to 60 percent off your subscription.
Learn more
Crafty AmigoA free 3D design app built by Navid Safabakhsh after learning from the Three.js course by Bruno Simon.
Check it out
The State of CSS 2022 ResultsExplore the results of the 2022 edition of the annual survey about the latest trends in the CSS ecosystem.
Check it out
CSS Style QueriesAhmad Shadeed takes a look at CSS container style queries and shows what we can do with them.
Read it
D2 PlaygroundAn online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.
Check it out
2022 CSS UpdatesThe 10th door of this year’s 12 Days of Web edition, is Stephanie Eckles’s article where she reviews eleven exciting additions to CSS that became fully or nearly cross-browser in 2022.
Read it
Getting the correct HTML codecs parameter for an AV1 videoJake Archibald’s guide on how to get the right codec information for a AV1 video when embedding.
Read it
Using inline JavaScript modules to prevent CSS blockageStoyan Stefanov shows how to use inline JavaScript modules to prevent CSS blockage.
Read it
CSS Infinite 3D SlidersTemani Afif shows how to code infinite sliders using only CSS.
Read it
IMG QuestAn open-source API to generate Open Graph images. By Vincent Will.
Check it out
Help choose the syntax for CSS NestingThe CSS Working Group is continuing a debate over the best way to define nesting in CSS and is asking for input from web devs.
Check it out
Logical Border RadiusMichelle Barker explores how to use logical properties for border-radius in CSS.
Read it
Tailwind Color Background SplitSimon Vrachliotis explains how to make a color background split effect with CSS Grid.
Check it out
Voeux 2023A beautiful Three.js Christmas experience made by Sebastien Lempens.
Check it out
Mad Max Fury Road TitleA CSS only demo of Mad Max Fury Road title sequence with PNG/WEBP cutouts from the original digital movie.
Check it out
3D Maki Roll Selector with
Check it out
Counting unique visitors without using cookies, UIDs or fingerprinting.In case you missed it: A great article by Nic Mulvaney on building a web analytics service without cookies.
Read it
Custom DiffusionA multi-concept customization of text-to-image diffusion by the Adobe Research team.
Check it out
Point·EOpenAI just released a point cloud diffusion for 3D model generation.
Check it out
From Our BlogSketch 023: Background PickerA fun background picker concept where a fullscreen grid of gradients is animated in.
Check it out
Our SponsorGet access to marketing and sales resources hereWhether you’re looking to land the next promotion or solve a sales or marketing challenge at work, The Juice can help. The ultimate industry insider hack, The Juice aggregates career-enhancing resources from top brands and thought leaders and organizes them in one place, so you don’t have to keep filling out marketing forms for access (or dodging sales calls yourself). Start thinking like top B2B marketers and sales professionals with The Juice.
Check it out
Inspirational Website of the Week: Water by FalmecSubtle details and a wonderful scroll experience makes this website stand out. Our pick this week.
Get inspired
NodeToy (Beta)Create, fork and publish shader graphs with the world using an intuitive and easy to use tool built for all.
Check it out
Optimize Interaction to Next PaintJeremy Wagner and Philip Walton learn how to optimize for the Interaction to Next Paint metric.
Read it
Our SponsorGet access to marketing and sales resources hereWhether you’re looking to land the next promotion or solve a sales or marketing challenge at work, The Juice can help. The ultimate industry insider hack, The Juice aggregates career-enhancing resources from top brands and thought leaders and organizes them in one place, so you don’t have to keep filling out marketing forms for access (or dodging sales calls yourself). Start thinking like top B2B marketers and sales professionals with The Juice.
Check it out
Inside the mind of a frontend developer: Article layoutAn exploration of how a frontend developer thinks while building an article layout. By Ahmad Shadeed.
Read it
DOM ClobberingIn this HTMHell Advent Calendar article, Frederik Braun explains what DOM Clobbering is and how it can make a website vulnerable.
Read it
From Web Page to Web Player: How Spotify Designed a New Homepage ExperienceAlexandria Goree walks us through the design process of making over Spotify’s homepage.
Read it
Wikipedia Analysis ToolA tool to navigate edits to the English Wikipedia made by IPs belonging to known organizations.
Check it out
Mobile Performance of Next.js SitesClark Gunn shares his experience on performance remediation for a large e-commerce site built with Next.
Read it
Drowning in AI Generated Garbage: the silent war we are fightingA very interesting read on how we’ll soon end up with inbred AI garbage and algorithmic trash.
Read it
HumanizerHumanizer is a minimal static site generator made with PHP.
Check it out
UpscaloRead how Morten Just made an app that makes a small image large and removes its background.
Check it out
Contrast is boring—can’t someone else do it?Learn how color-contrast() is soon here to save us from the boring task of ensuring sufficient contrast on a website.
Read it
Introducing Mona Sans and Hubot SansLearn how to use and express yourself with GitHub’s open source variable fonts, Mona Sans and Hubot Sans.
Check it out
PuterPuter is a cloud operating system. Store, open, and edit your files from anywhere at any time in the cloud.
Check it out
A :nth-child(An+B [of S]?) polyfill thanks to CSS :has()Bramus Van Damme writes about an interesting polyfill made possible with :has().
Read it
VRTs – Visual Regression TestsVisual Regression Tests is a WordPress Plugin to test your website for visual changes and notifies you upon alerts automatically.
Check it out
Rapier – Raycast VehicleIsaac Mason is porting the cannon.js RaycastVehicle to Rapier. Check out his progress in this demo.
Check it out
BlockbenchAn easy to use 3D model editor for low-poly and pixel-art.
Check it out
Snowball PreloaderA beautiful CSS-only snowball preloader made by Jon Kantner.
Check it out
Building A Virtual Machine inside ChatGPTRead how it’s possible to run a whole virtual machine inside of ChatGPT.
Read it
Coding techniquesA thread by Yuri Artiukh on some great coding techniques that can be learned from “Kerrygold, the Magical Pantry” made by makemepulse.
Check it out
From Our BlogHow to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js and GSAPA tutorial on how to create a 3D cardboard box that folds and unfolds on scroll using Three.js and the GSAP ScrollTrigger.
Check it out
From Our BlogInspirational Websites Roundup #44A new roundup of the most inspiring and creative website from the past couple of weeks.
Check it out
Our SponsorExplore the world like a local with BabbelIf you’ve always wanted to learn a new language, Babbel will be the most productive 10 minutes of your day. Trusted by over 10 million subscribers worldwide, the subscription-based language learning platform can get you confidently conversing in a new tongue in just three weeks. Sign up today and get up to 60 percent off your subscription.
Learn more
Today we’ll walk through the creation of a 3D packaging box that folds and unfolds on scroll. We’ll be using Three.js and GSAP for this.
We won’t use any textures or shaders to set it up. Instead, we’ll discover some ways to manipulate the Three.js BufferGeometry.
This is what we will be creating:
Scroll-driven animationWe’ll be using GSAP ScrollTrigger, a handy plugin for scroll-driven animations. It’s a great tool with a good documentation and an active community so I’ll only touch the basics here.
Let’s set up a minimal example. The HTML page contains:
- a full-screen
<canvas>element with some styles that will make it cover the browser window - a
<div class=”page”>element behind the<canvas>. The.pageelement a larger height than the window so we have a scrollable element to track.
On the <canvas> we render a 3D scene with a box element that rotates on scroll.
To rotate the box, we use the GSAP timeline which allows an intuitive way to describe the transition of the box.rotation.x property.
gsap.timeline({}) .to(box.rotation, { duration: 1, // <- takes 1 second to complete x: .5 * Math.PI, ease: 'power1.out' }, 0) // <- starts at zero second (immediately)
The x value of the box.rotation is changing from 0 (or any other value that was set before defining the timeline) to 90 degrees. The transition starts immediately. It has a duration of one second and power1.out easing so the rotation slows down at the end.
Once we add the scrollTrigger to the timeline, we start tracking the scroll position of the .page element (see properties trigger, start, end). Setting the scrub property to true makes the transition not only start on scroll but actually binds the transition progress to the scroll progress.
gsap.timeline({ scrollTrigger: { trigger: '.page', start: '0% 0%', end: '100% 100%', scrub: true, markers: true // to debug start and end properties },}) .to(box.rotation, { duration: 1, x: .5 * Math.PI, ease: 'power1.out' }, 0)
Now box.rotation.x is calculated as a function of the scroll progress, not as a function of time. But the easing and timing parameters still matter. Power1.out easing still makes the rotation slower at the end (check out ease visualiser tool and try other options to see the difference). Start and duration values don’t mean seconds anymore but they still define the sequence of the transitions within the timeline.
For example, in the following timeline the last transition is finished at 2.3 + 0.7 = 3.
gsap.timeline({ scrollTrigger: { // ... },}) .to(box.rotation, { duration: 1, x: .5 * Math.PI, ease: 'power1.out' }, 0) .to(box.rotation, { duration: 0.5, x: 0, ease: 'power2.inOut' }, 1) .to(box.rotation, { duration: 0.7, // <- duration of the last transition x: - Math.PI, ease: 'none' }, 2.3) // <- start of the last transition
We take the total duration of the animation as 3. Considering that, the first rotation starts once the scroll starts and takes ⅓ of the page height to complete. The second rotation starts without any delay and ends right in the middle of the scroll (1.5 of 3). The last rotation starts after a delay and ends when we scroll to the end of the page. That’s how we can construct the sequences of transitions bound to the scroll.
To get further with this tutorial, we don’t need more than some basic understanding of GSAP timing and easing. Let me just mention a few tips about the usage of GSAP ScrollTrigger, specifically for a Three.js scene.
Tip #1: Separating 3D scene and scroll animationI found it useful to introduce an additional variable params = { angle: 0 } to hold animated parameters. Instead of directly changing rotation.x in the timeline, we animate the properties of the “proxy” object, and then use it for the 3D scene (see the updateSceneOnScroll() function under tip #2). This way, we keep scroll-related stuff separate from 3D code. Plus, it makes it easier to use the same animated parameter for multiple 3D transforms; more about that a bit further on.
Tip #2: Render scene only when needed Maybe the most common way to render a Three.js scene is calling the render function within the window.requestAnimationFrame() loop. It’s good to remember that we don’t need it, if the scene is static except for the GSAP animation. Instead, the line renderer.render(scene, camera) can be simply added to to the onUpdate callback so the scene is redrawing only when needed, during the transition.
// No need to render the scene all the time// function animate() {// requestAnimationFrame(animate);// // update objects(s) transforms here// renderer.render(scene, camera);// }let params = { angle: 0 }; // <- "proxy" object// Three.js functionsfunction updateSceneOnScroll() { box.rotation.x = angle.v; renderer.render(scene, camera);}// GSAP functionsfunction createScrollAnimation() { gsap.timeline({ scrollTrigger: { // ... onUpdate: updateSceneOnScroll }, }) .to(angle, { duration: 1, v: .5 * Math.PI, ease: 'power1.out' })}
Tip #3: Three.js methods to use with onUpdate callback Various properties of Three.js objects (.quaternion, .position, .scale, etc) can be animated with GSAP in the same way as we did for rotation. But not all the Three.js methods would work.
Some of them are aimed to assign the value to the property (.setRotationFromAxisAngle(), .setRotationFromQuaternion(), .applyMatrix4(), etc.) which works perfectly for GSAP timelines.
But other methods add the value to the property. For example, .rotateX(.1) would increase the rotation by 0.1 radians every time it’s called. So in case box.rotateX(angle.v) is placed to the onUpdate callback, the angle value will be added to the box rotation every frame and the 3D box will get a bit crazy on scroll. Same with .rotateOnAxis, .translateX, .translateY and other similar methods – they work for animations in the window.requestAnimationFrame() loop but not as much for today’s GSAP setup.
View the minimal scroll sandbox here.Note: This Three.js scene and other demos below contain some additional elements like axes lines and titles. They have no effect on the scroll animation and can be excluded from the code easily. Feel free to remove the addAxesAndOrbitControls() function, everything related to axisTitles and orbits, and <div> classed ui-controls to get a truly minimal setup.
Now that we know how to rotate the 3D object on scroll, let’s see how to create the package box.
Box structureThe box is composed of 4 x 3 = 12 meshes:
We want to control the position and rotation of those meshes to define the following:
- unfolded state
- folded state
- closed state
For starters, let’s say our box doesn’t have flaps so all we have is two width-sides and two length-sides. The Three.js scene with 4 planes would look like this:
let box = { params: { width: 27, length: 80, depth: 45 }, els: { group: new THREE.Group(), backHalf: { width: new THREE.Mesh(), length: new THREE.Mesh(), }, frontHalf: { width: new THREE.Mesh(), length: new THREE.Mesh(), } }};scene.add(box.els.group);setGeometryHierarchy();createBoxElements();function setGeometryHierarchy() { // for now, the box is a group with 4 child meshes box.els.group.add(box.els.frontHalf.width, box.els.frontHalf.length, box.els.backHalf.width, box.els.backHalf.length);}function createBoxElements() { for (let halfIdx = 0; halfIdx < 2; halfIdx++) { for (let sideIdx = 0; sideIdx < 2; sideIdx++) { const half = halfIdx ? 'frontHalf' : 'backHalf'; const side = sideIdx ? 'width' : 'length'; const sideWidth = side === 'width' ? box.params.width : box.params.length; box.els[half][side].geometry = new THREE.PlaneGeometry( sideWidth, box.params.depth ); } }}
All 4 sides are by default centered in the (0, 0, 0) point and lying in the XY-plane:
Folding animationTo define the unfolded state, it’s sufficient to:
- move panels along X-axis aside from center so they don’t overlap
Transforming it to the folded state means
- rotating width-sides to 90 deg around Y-axis
- moving length-sides to the opposite directions along Z-axis
- moving length-sides along X-axis to keep the box centered
Aside of box.params.width, box.params.length and box.params.depth, the only parameter needed to define these states is the opening angle. So the box.animated.openingAngle parameter is added to be animated on scroll from 0 to 90 degrees.
let box = { params: { // ... }, els: { // ... }, animated: { openingAngle: 0 }};function createFoldingAnimation() { gsap.timeline({ scrollTrigger: { trigger: '.page', start: '0% 0%', end: '100% 100%', scrub: true, }, onUpdate: updatePanelsTransform }) .to(box.animated, { duration: 1, openingAngle: .5 * Math.PI, ease: 'power1.inOut' })}
Using box.animated.openingAngle, the position and rotation of sides can be calculated
function updatePanelsTransform() { // place width-sides aside of length-sides (not animated) box.els.frontHalf.width.position.x = .5 * box.params.length; box.els.backHalf.width.position.x = -.5 * box.params.length; // rotate width-sides from 0 to 90 deg box.els.frontHalf.width.rotation.y = box.animated.openingAngle; box.els.backHalf.width.rotation.y = box.animated.openingAngle; // move length-sides to keep the closed box centered const cos = Math.cos(box.animated.openingAngle); // animates from 1 to 0 box.els.frontHalf.length.position.x = -.5 * cos * box.params.width; box.els.backHalf.length.position.x = .5 * cos * box.params.width; // move length-sides to define box inner space const sin = Math.sin(box.animated.openingAngle); // animates from 0 to 1 box.els.frontHalf.length.position.z = .5 * sin * box.params.width; box.els.backHalf.length.position.z = -.5 * sin * box.params.width;}
View the sandbox here.Nice! Let’s think about the flaps. We want them to move together with the sides and then to rotate around their own edge to close the box.
To move the flaps together with the sides we simply add them as the children of the side meshes. This way, flaps inherit all the transforms we apply to the sides. An additional position.y transition will place them on top or bottom of the side panel.
let box = { params: { // ... }, els: { group: new THREE.Group(), backHalf: { width: { top: new THREE.Mesh(), side: new THREE.Mesh(), bottom: new THREE.Mesh(), }, length: { top: new THREE.Mesh(), side: new THREE.Mesh(), bottom: new THREE.Mesh(), }, }, frontHalf: { width: { top: new THREE.Mesh(), side: new THREE.Mesh(), bottom: new THREE.Mesh(), }, length: { top: new THREE.Mesh(), side: new THREE.Mesh(), bottom: new THREE.Mesh(), }, } }, animated: { openingAngle: .02 * Math.PI }};scene.add(box.els.group);setGeometryHierarchy();createBoxElements();function setGeometryHierarchy() { // as before box.els.group.add(box.els.frontHalf.width.side, box.els.frontHalf.length.side, box.els.backHalf.width.side, box.els.backHalf.length.side); // add flaps box.els.frontHalf.width.side.add(box.els.frontHalf.width.top, box.els.frontHalf.width.bottom); box.els.frontHalf.length.side.add(box.els.frontHalf.length.top, box.els.frontHalf.length.bottom); box.els.backHalf.width.side.add(box.els.backHalf.width.top, box.els.backHalf.width.bottom); box.els.backHalf.length.side.add(box.els.backHalf.length.top, box.els.backHalf.length.bottom);}function createBoxElements() { for (let halfIdx = 0; halfIdx < 2; halfIdx++) { for (let sideIdx = 0; sideIdx < 2; sideIdx++) { // ... const flapWidth = sideWidth - 2 * box.params.flapGap; const flapHeight = .5 * box.params.width - .75 * box.params.flapGap; // ... const flapPlaneGeometry = new THREE.PlaneGeometry( flapWidth, flapHeight ); box.els[half][side].top.geometry = flapPlaneGeometry; box.els[half][side].bottom.geometry = flapPlaneGeometry; box.els[half][side].top.position.y = .5 * box.params.depth + .5 * flapHeight; box.els[half][side].bottom.position.y = -.5 * box.params.depth -.5 * flapHeight; } }}
The flaps rotation is a bit more tricky.
Changing the pivot point of Three.js meshLet’s get back to the first example with a Three.js object rotating around the X axis.
There’re many ways to set the rotation of a 3D object: Euler angle, quaternion, lookAt() function, transform matrices and so on. Regardless of the way angle and axis of rotation are set, the pivot point (transform origin) will be at the center of the mesh.
Say we animate rotation.x for the 4 boxes that are placed around the scene:
const boxGeometry = new THREE.BoxGeometry(boxSize[0], boxSize[1], boxSize[2]);const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);const numberOfBoxes = 4;for (let i = 0; i < numberOfBoxes; i++) { boxes[i] = boxMesh.clone(); boxes[i].position.x = (i - .5 * numberOfBoxes) * (boxSize[0] + 2); scene.add(boxes[i]);}boxes[1].position.y = .5 * boxSize[1];boxes[2].rotation.y = .5 * Math.PI;boxes[3].position.y = - boxSize[1];
See the sandbox here.For them to rotate around the bottom edge, we need to move the pivot point to -.5 x box size. There are couple of ways to do this:
- wrap mesh with additional Object3D
- transform geometry of mesh
- assign pivot point with additional transform matrix
- could be some other tricks
If you’re curious why Three.js doesn’t provide origin positioning as a native method, check out this discussion.
Option #1: Wrapping mesh with additional Object3DFor the first option, we add the original box mesh as a child of new Object3D. We treat the parent object as a box so we apply transforms (rotation.x) to it, exactly as before. But we also translate the mesh to half of its size. The mesh moves up in the local space but the origin of the parent object stays in the same point.
const boxGeometry = new THREE.BoxGeometry(boxSize[0], boxSize[1], boxSize[2]);const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);const numberOfBoxes = 4;for (let i = 0; i < numberOfBoxes; i++) { boxes[i] = new THREE.Object3D(); const mesh = boxMesh.clone(); mesh.position.y = .5 * boxSize[1]; boxes[i].add(mesh); boxes[i].position.x = (i - .5 * numberOfBoxes) * (boxSize[0] + 2); scene.add(boxes[i]);}boxes[1].position.y = .5 * boxSize[1];boxes[2].rotation.y = .5 * Math.PI;boxes[3].position.y = - boxSize[1];
See the sandbox here.Option #2: Translating the geometry of MeshWith the second option, we move up the geometry of the mesh. In Three.js, we can apply a transform not only to the objects but also to their geometry.
const boxGeometry = new THREE.BoxGeometry(boxSize[0], boxSize[1], boxSize[2]);boxGeometry.translate(0, .5 * boxSize[1], 0);const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);const numberOfBoxes = 4;for (let i = 0; i < numberOfBoxes; i++) { boxes[i] = boxMesh.clone(); boxes[i].position.x = (i - .5 * numberOfBoxes) * (boxSize[0] + 2); scene.add(boxes[i]);}boxes[1].position.y = .5 * boxSize[1];boxes[2].rotation.y = .5 * Math.PI;boxes[3].position.y = - boxSize[1];
See the sandbox here.The idea and result are the same: we move the mesh up ½ of its height but the origin point is staying at the same coordinates. That’s why rotation.x transform makes the box rotate around its bottom side.
*Option #3:* Assign pivot point with additional transform matrixI find this way less suitable for today’s project but the idea behind it is pretty simple. We take both, pivot point position and desired transform as matrixes. Instead of simply applying the desired transform to the box, we apply the inverted pivot point position first, then do rotation.x as the box is centered at the moment, and then apply the point position.
object.matrix = inverse(pivot.matrix) * someTranformationMatrix * pivot.matrix
You can find a nice implementation of this method here.
I’m using geometry translation (option #2) to move the origin of the flaps. Before getting back to the box, let’s see what we can achieve if the very same rotating boxes are added to the scene in hierarchical order and placed one on top of another.
const boxGeometry = new THREE.BoxGeometry(boxSize[0], boxSize[1], boxSize[2]);boxGeometry.translate(0, .5 * boxSize[1], 0);const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);const numberOfBoxes = 4;for (let i = 0; i < numberOfBoxes; i++) { boxes[i] = boxMesh.clone(); if (i === 0) { scene.add(boxes[i]); } else { boxes[i - 1].add(boxes[i]); boxes[i].position.y = boxSize[1]; }}
We still animate rotation.x of each box from 0 to 90 degrees, so the first mesh rotates to 90 degrees, the second one does the same 90 degrees plus its own 90 degrees rotation, the third does 90+90+90 degrees, etc.
See the sandbox here.A very easy and quite useful trick.
Animating the flapsBack to the flaps. Flaps are made from translated geometry and added to the scene as children of the side meshes. We set their position.y property once and animate their rotation.x property on scroll.
function setGeometryHierarchy() { box.els.group.add(box.els.frontHalf.width.side, box.els.frontHalf.length.side, box.els.backHalf.width.side, box.els.backHalf.length.side); box.els.frontHalf.width.side.add(box.els.frontHalf.width.top, box.els.frontHalf.width.bottom); box.els.frontHalf.length.side.add(box.els.frontHalf.length.top, box.els.frontHalf.length.bottom); box.els.backHalf.width.side.add(box.els.backHalf.width.top, box.els.backHalf.width.bottom); box.els.backHalf.length.side.add(box.els.backHalf.length.top, box.els.backHalf.length.bottom);}function createBoxElements() { for (let halfIdx = 0; halfIdx < 2; halfIdx++) { for (let sideIdx = 0; sideIdx < 2; sideIdx++) { // ... const topGeometry = flapPlaneGeometry.clone(); topGeometry.translate(0, .5 * flapHeight, 0); const bottomGeometry = flapPlaneGeometry.clone(); bottomGeometry.translate(0, -.5 * flapHeight, 0); box.els[half][side].top.position.y = .5 * box.params.depth; box.els[half][side].bottom.position.y = -.5 * box.params.depth; } }}
The animation of each flap has an individual timing and easing within the gsap.timeline so we store the flap angles separately.
let box = { // ... animated: { openingAngle: .02 * Math.PI, flapAngles: { backHalf: { width: { top: 0, bottom: 0 }, length: { top: 0, bottom: 0 }, }, frontHalf: { width: { top: 0, bottom: 0 }, length: { top: 0, bottom: 0 }, } } }}function createFoldingAnimation() { gsap.timeline({ scrollTrigger: { // ... }, onUpdate: updatePanelsTransform }) .to(box.animated, { duration: 1, openingAngle: .5 * Math.PI, ease: 'power1.inOut' }) .to([ box.animated.flapAngles.backHalf.width, box.animated.flapAngles.frontHalf.width ], { duration: .6, bottom: .6 * Math.PI, ease: 'back.in(3)' }, .9) .to(box.animated.flapAngles.backHalf.length, { duration: .7, bottom: .5 * Math.PI, ease: 'back.in(2)' }, 1.1) .to(box.animated.flapAngles.frontHalf.length, { duration: .8, bottom: .49 * Math.PI, ease: 'back.in(3)' }, 1.4) .to([box.animated.flapAngles.backHalf.width, box.animated.flapAngles.frontHalf.width], { duration: .6, top: .6 * Math.PI, ease: 'back.in(3)' }, 1.4) .to(box.animated.flapAngles.backHalf.length, { duration: .7, top: .5 * Math.PI, ease: 'back.in(3)' }, 1.7) .to(box.animated.flapAngles.frontHalf.length, { duration: .9, top: .49 * Math.PI, ease: 'back.in(4)' }, 1.8)}function updatePanelsTransform() { // ... folding / unfolding box.els.frontHalf.width.top.rotation.x = -box.animated.flapAngles.frontHalf.width.top; box.els.frontHalf.length.top.rotation.x = -box.animated.flapAngles.frontHalf.length.top; box.els.frontHalf.width.bottom.rotation.x = box.animated.flapAngles.frontHalf.width.bottom; box.els.frontHalf.length.bottom.rotation.x = box.animated.flapAngles.frontHalf.length.bottom; box.els.backHalf.width.top.rotation.x = box.animated.flapAngles.backHalf.width.top; box.els.backHalf.length.top.rotation.x = box.animated.flapAngles.backHalf.length.top; box.els.backHalf.width.bottom.rotation.x = -box.animated.flapAngles.backHalf.width.bottom; box.els.backHalf.length.bottom.rotation.x = -box.animated.flapAngles.backHalf.length.bottom;}
See the sandbox here.With all this, we finish the animation part! Let’s now work on the look of our box.
Lights and colors This part is as simple as replacing multi-color wireframes with a single color MeshStandardMaterial and adding a few lights.
const ambientLight = new THREE.AmbientLight(0xffffff, .5);scene.add(ambientLight);lightHolder = new THREE.Group();const topLight = new THREE.PointLight(0xffffff, .5);topLight.position.set(-30, 300, 0);lightHolder.add(topLight);const sideLight = new THREE.PointLight(0xffffff, .7);sideLight.position.set(50, 0, 150);lightHolder.add(sideLight);scene.add(lightHolder);const material = new THREE.MeshStandardMaterial({ color: new THREE.Color(0x9C8D7B), side: THREE.DoubleSide});box.els.group.traverse(c => { if (c.isMesh) c.material = material;});
Tip: Object rotation effect with OrbitControlsOrbitControls make the camera orbit around the central point (left preview). To demonstrate a 3D object, it’s better to give users a feeling that they rotate the object itself, not the camera around it (right preview). To do so, we keep the lights position static relative to camera.
It can be done by wrapping lights in an additional lightHolder object. The pivot point of the parent object is (0, 0, 0). We also know that the camera rotates around (0, 0, 0). It means we can simply apply the camera’s rotation to the lightHolder to keep the lights static relative to the camera.
function render() { // ... lightHolder.quaternion.copy(camera.quaternion); renderer.render(scene, camera);}
See the sandbox here.Layered panelsSo far, our sides and flaps were done as a simple PlaneGeomery. Let’s replace it with “real” corrugated cardboard material ‐ two covers and a fluted layer between them.
First step is replacing a single plane with 3 planes merged into one. To do so, we need to place 3 clones of PlaneGeometry one behind another and translate the front and back levels along the Z axis by half of the total cardboard thickness.
There’re many ways to move the layers, starting from the geometry.translate(0, 0, .5 * thickness) method we used to change the pivot point. But considering other transforms we’re about to apply to the cardboard geometry, we better go through the geometry.attributes.position array and add the offset to the z-coordinates directly:
fconst baseGeometry = new THREE.PlaneGeometry( params.width, params.height,);const geometriesToMerge = [ getLayerGeometry(- .5 * params.thickness), getLayerGeometry(0), getLayerGeometry(.5 * params.thickness)];function getLayerGeometry(offset) { const layerGeometry = baseGeometry.clone(); const positionAttr = layerGeometry.attributes.position; for (let i = 0; i < positionAttr.count; i++) { const x = positionAttr.getX(i); const y = positionAttr.getY(i) const z = positionAttr.getZ(i) + offset; positionAttr.setXYZ(i, x, y, z); } return layerGeometry;}
For merging the geometries we use the mergeBufferGeometries method. It’s pretty straightforward, just don’t forget to import the BufferGeometryUtils module into your project.
See the sandbox here.Wavy fluteTo turn a mid layer into the flute, we apply the sine wave to the plane. In fact, it’s the same z-coordinate offset, just calculated as Sine function of the x-attribute instead of a constant value.
function getLayerGeometry() { const baseGeometry = new THREE.PlaneGeometry( params.width, params.height, params.widthSegments, 1 ); const offset = (v) => .5 * params.thickness * Math.sin(params.fluteFreq * v); const layerGeometry = baseGeometry.clone(); const positionAttr = layerGeometry.attributes.position; for (let i = 0; i < positionAttr.count; i++) { const x = positionAttr.getX(i); const y = positionAttr.getY(i) const z = positionAttr.getZ(i) + offset(x); positionAttr.setXYZ(i, x, y, z); } layerGeometry.computeVertexNormals(); return layerGeometry;}
The z-offset is not the only change we need here. By default, PlaneGeometry is constructed from two triangles. As it has only one width segment and one height segment, there’re only corner vertices. To apply the sine(x) wave, we need enough vertices along the x axis – enough resolution, you can say.
Also, don’t forget to update the normals after changing the geometry. It doesn’t happen automatically.
See the sandbox here.I apply the wave with an amplitude equal to the cardboard thickness to the middle layer, and the same wave with a little amplitude to the front and back layers, just to give some texture to the box.
The surfaces and cuts look pretty cool. But we don’t want to see the wavy layer on the folding lines. At the same time, I want those lines to be visible before the folding happens:
To achieve this, we can “press” the cardboard on the selected edges of each panel.
We can do so by applying another modifier to the z-coordinate. This time it’s a power function of the x or y attribute (depending on the side we’re “pressing”).
function getLayerGeometry() { const baseGeometry = new THREE.PlaneGeometry( params.width, params.height, params.widthSegments, params.heightSegments // to apply folding we need sufficient number of segments on each side ); const offset = (v) => .5 * params.thickness * Math.sin(params.fluteFreq * v); const layerGeometry = baseGeometry.clone(); const positionAttr = layerGeometry.attributes.position; for (let i = 0; i < positionAttr.count; i++) { const x = positionAttr.getX(i); const y = positionAttr.getY(i) let z = positionAttr.getZ(i) + offset(x); // add wave z = applyFolds(x, y, z); // add folds positionAttr.setXYZ(i, x, y, z); } layerGeometry.computeVertexNormals(); return layerGeometry;}function applyFolds(x, y, z) { const folds = [ params.topFold, params.rightFold, params.bottomFold, params.leftFold ]; const size = [ params.width, params.height ]; let modifier = (c, size) => (1. - Math.pow(c / (.5 * size), params.foldingPow)); // top edge: Z -> 0 when y -> plane height, // bottom edge: Z -> 0 when y -> 0, // right edge: Z -> 0 when x -> plane width, // left edge: Z -> 0 when x -> 0 if ((x > 0 && folds[1]) || (x < 0 && folds[3])) { z *= modifier(x, size[0]); } if ((y > 0 && folds[0]) || (y < 0 && folds[2])) { z *= modifier(y, size[1]); } return z;}
See the sandbox here.The folding modifier is applied to all 4 edges of the box sides, to the bottom edges of the top flaps, and to the top edges of bottom flaps.
With this the box itself is finished.
There is room for optimization, and for some extra features, of course. For example, we can easily remove the flute level from the side panels as it’s never visible anyway. Let me also quickly describe how to add zooming buttons and a side image to our gorgeous box.
ZoomingThe default behaviour of OrbitControls is zooming the scene by scroll. It means that our scroll-driven animation is in conflict with it, so we set orbit.enableZoom property to false.
We still can have zooming on the scene by changing the camera.zoom property. We can use the same GSAP animation as before, just note that animating the camera’s property doesn’t automatically update the camera’s projection. According to the documentation, updateProjectionMatrix() must be called after any change of the camera parameters so we have to call it on every frame of the transition:
// ...// changing the zoomLevel variable with buttonsgsap.to(camera, { duration: .2, zoom: zoomLevel, onUpdate: () => { camera.updateProjectionMatrix(); }})
Side imageThe image, or even a clickable link, can be added on the box side. It can be done with an additional plane mesh with a texture on it. It should be just moving together with the selected side of the box:
function updatePanelsTransform() { // ... // for copyright mesh to be placed on the front length side of the box copyright.position.copy(box.els.frontHalf.length.side.position); copyright.position.x += .5 * box.params.length - .5 * box.params.copyrightSize[0]; copyright.position.y -= .5 * (box.params.depth - box.params.copyrightSize[1]); copyright.position.z += box.params.thickness;}
As for the texture, we can import an image/video file, or use a canvas element we create programmatically. In the final demo I use a canvas with a transparent background, and two lines of text with an underline. Turning the canvas into a Three.js texture makes me able to map it on the plane:
function createCopyright() { // create canvas const canvas = document.createElement('canvas'); canvas.width = box.params.copyrightSize[0] * 10; canvas.height = box.params.copyrightSize[1] * 10; const planeGeometry = new THREE.PlaneGeometry(box.params.copyrightSize[0], box.params.copyrightSize[1]); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.width); ctx.fillStyle = '#000000'; ctx.font = '22px sans-serif'; ctx.textAlign = 'end'; ctx.fillText('ksenia-k.com', canvas.width - 30, 30); ctx.fillText('codepen.io/ksenia-k', canvas.width - 30, 70); ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(canvas.width - 160, 35); ctx.lineTo(canvas.width - 30, 35); ctx.stroke(); ctx.beginPath(); ctx.moveTo(canvas.width - 228, 77); ctx.lineTo(canvas.width - 30, 77); ctx.stroke(); // create texture const texture = new THREE.CanvasTexture(canvas); // create mesh mapped with texture copyright = new THREE.Mesh(planeGeometry, new THREE.MeshBasicMaterial({ map: texture, transparent: true, opacity: .5 })); scene.add(copyright);}
To make the text lines clickable, we do the following:
- use Raycaster and
mousemoveevent to track if the intersection between cursor ray and plane, change the cursor appearance if the mesh is hovered - if a click happened while the mesh is hovered, check the
uvcoordinate of intersection - if the
uvcoordinate is on the top half of the mesh (uv.y > .5) we open the first link, ifuvcoordinate is below .5, we go to the second link
The raycaster code is available in the full demo.
Thank you for scrolling this far!
Hope this tutorial can be useful for your Three.js projects ♡
Prends l’airStudio MimiBarlow AgencyPasticceria AdamiLittle Fat Boyterminal27FACT BOOK 2022The HaircutCreative communicationsFlashfomRaymond NicolasKealogicPlasticSelectedUnseen StudioWythThe Light FactoryFŕaǥmeńťartsphereNam HailitcollectiveSnig.digitalOutpace.co
Inspirational Website of the Week: Barlow AgencyA minimal design with an interesting panning effect. Our pick this week.
Get inspired
This content is sponsored via BuySellAdsUse Kintone to Spend Less Time on the Back-endKintone is a powerful web database, providing developers with a convenient environment to test out front-end coding ideas, without having to run a back-end.
Check it out
ReadabilityA new series of articles by the Google Fonts team where you’ll learn about the qualities of type and typography that make reading easier.
Read it
Designing a Utopian layout gridThis post aims to contextualise the Utopia fluid grid calculator which helps you to define a layout grid by clicking a few buttons. By James Gilyead.
Check it out
Nextra 2.0The new version of the Next.js static site generator brings some great features.
Check it out
Readymag Websites of the Year 2022Cast your vote for websites that inspire you and help them win.
Check it out
WebGL RainAsh Thornton shares Unseen Studio’s first experiment, refracting WebGL rain drops!
Check it out
A Practical Guide to CSS Media QueriesTake a closer look at what media queries are, how they work, and how to use them correctly, including for creating responsive designs. By Alex Ivanovs.
Read it
Digging Deeper Into Container Style QueriesGeoff Graham takes another look on container style queries and what’s currently being discussed.
Read it
From type to logotypeTom Muller’s article on the process of creating a logotype.
Read it
Award Winning Animation With Only 20 Lines Of CSS?Learn how to recreate the sliding image track effect from camillemormal.com in this video tutorial by Hyperplexed.
Check it out
Complementary SpaceDonnie D’Amato presents a framework to design spacing tokens semantically.
Read it
Spherical HarmonicsSteve Trettel made this awesome demo for a lecture.
Check it out
How to transfigure wireframes into HTMLThe first article in HTMHell’s Advent calendar is about transforming a design into code.
Read it
Basement FoundryThe type foundry by basement.studio where they offer their amazing, ever-evolving typefaces. And what a great site!
Check it out
CSS For URLs and HTTP HeadersJim Nielsen wonders what if we could write CSS based on any value in the current page’s URL.
Read it
Notion introduces expanded Free Plan & new Business PlanGood news from Notion: they made some updates to their pricing plans that now include an expanded free plan.
Check it out
Iris 2A fun Christmas marbling experiment with WebGL by Maeda Mameo. Check out all the other experiments, too!
Check it out
A Performance Maturity MatrixThe year’s Web Performance Calendar starts with an article by Brian Louis Ramirez on a systematic approach to improving performance using a “performance maturity matrix”.
Read it
Infinite Scroll and Wormy ScrollAlex Dytrych’s funny wormy scroll experiment.
Check it out
A Conversation With ChatGPTMatthias Ott experimented with the new ChatGPT model by OpenAI and shares his impressive conversation.
Check it out
From Our BlogTooltip to Gallery TransitionA concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.
Check it out
Today I’d like to share a little tooltip transition concept with you. The main idea is to show a preview of some sort of gallery with a rapid run through the thumbnails while we hover over some link in a text. Visually, this gets enhanced with a line animation that “frames” the thumbnail. Once we click the link, the thumbnail image animates to a larger version. The lines move along and the resting thumbnails animate in. In one last step, we can still click the bigger image and it will animate to a fullscreen view. The thumbnail navigation moves to the lower part of the page.
All these layout changes are facilitated by GreenSock’s Flip plugin. It makes it really simple to move things around and into new levels of content.
Note that this is an experimental concept where the gallery navigation is not implemented.
This is the initial view:
When hovering the link in the text, the tooltip shows:
The thumbnails get animated in a quick slideshow. When clicking on the link, the current thumbnail animates to the position of the text and enlarges:
Now we can still click on the larger image and it will animate to fill the screen:
And this is how it all comes together:
I really hope you enjoy this little concept and find it inspirational!
The images are by Google’s DeepMind on Unsplash.
With a new year comes new and improved ways to design websites. 2023 will bring us an interesting mix of website trends — ones that address larger scale scenarios and issues like accessibility, UX, and responsiveness.
In the following post, we’re going to look at the 5 newest web design trends along with 10 pre-built websites from BeTheme that demonstrate how to execute them.
BeTheme is one of the world’s most popular and highly-rated WordPress Themes with 268,000+ sales and a 4.83/5 star-rating.
5 new web design trends for 2023In order to create more pleasant digital experiences, web designers need to think more broadly about what impacts (both positively and negatively) those experiences. The following web design trends for 2023 will address these larger issues:
- Hoverable iconographyOne of the main priorities in web design is to create interfaces that are so intuitive that anyone can interact with them. However, some of the shortcuts used in web design — especially when it comes to iconography — can create obstacles for certain users and inhibit accessibility.
Some icons have indisputable interpretations. For instance, icons used in website headers have become so commonplace that most, if not all, users know what purpose they serve and what will happen when they click on them.
On the BeBiker 4 website, for example, there are three icons on the left for:
- Shopping bag/cart
- Search
- Account
So long as the same iconography is used from site to site, users will have little doubt about how to use this part of a website header.
When it comes to other, less frequently used icons, however, you have to think about the diversity of your users and how they may interpret them differently. In order to improve user confidence when interacting with website iconography in 2023, web designers will start to include hover-triggered helper text over icons when it’s needed.
You can see an example of this trend on the BeJeweler 2 site:
In addition to revealing helper text when users hover over product icons, the text also appears when users hover over variant swatches. This leaves no room for interpretation and will ensure that every user can confidently interact with website content going forward.
- More social proof Trust is an important element in relationship building — be it in personal relationships or the professional ones that brands have with customers.
With the website often serving as the first touchpoint between consumers and brands, trust building needs to begin there. In 2023, web designers will utilize social proof and trust marks to do this.
There are a variety of ways to use these trust builders on websites. One of the most common ways is to include a page on the site and a section on the home page dedicated to real customer testimonials and/or reviews, as the BeDoctor site does:
This particular example showcases three different types of content that can help build trust with website visitors:
- An overall customer satisfaction rate
- A customer testimonial
- An average customer rating — which can link out to a ratings platform like Google or Yelp
For some businesses, it may be too early in the game to have generated a substantial amount of social proof and so you don’t have anything to show off on the site. If that’s the case, trust marks are the way to go.
Trust marks can come in the form of things like security seals — like an icon placed next to the “Checkout” button so you can assure visitors that their transactions will be secure. Another way to boost credibility and trust is to add context to website claims as BeMarketing 2 demonstrates:
The asterisk next to the headline’s claim is expanded upon down below. You could use this space to provide a disclaimer or to add a link to a page that provides proof of the claim.
- Mobile-specific featuresWith each passing year, responsive design becomes easier to do as the general rules are well-known and easy to follow. Also, the vast majority of WordPress themes are built to be responsive, which takes a lot of the guesswork out of it for designers.
However, this has led to some stagnation when it comes to mobile web design. While responsive websites provide a good user experience, web designers aren’t really encouraged to come up with creative solutions to make them even greater.
In 2023, that’s going to change as more attention gets paid to the mobile experience. Specifically, how designers build out features that address mobile-specific friction and obstacles.
One way we’ll see this play out is in the navigation design. Take the BeLanguage 4 pre-built website, for example:
The page links from the regular, non-mobile website are all present. However, The “Call us” button appears at the top of the list of links on mobile. On desktop, it appears at the very end.
As designers evaluate the data they have on user habits and goals for the different devices they use, we’ll see small deviations in the way major components like the navigation are designed.
More and more websites will adopt mobile app-like features in 2023, too. BeFurnitureStore has done this. Rather than retain the multi-level header design from the desktop site, the top bar that contains the account, cart, and favorite links now appears as a sticky bottom bar:
Web designers that transform and revolutionize the mobile web experience will be able to position their websites as superior offerings in the years to come.
- Shape texturizationMany years ago, skeuomorphism brought all kinds of real world textures to our computer and phone screens. However, those textured backgrounds soon became seen as extraneous and distracting, and so the design trend fell by the wayside.
Just because one web design trend fell out of favor doesn’t make the idea of digital texturization a bad one though.
In 2023, web designers will experiment with using organic shapes to add small and, more importantly, strategic textures to their designs. You’ll find an example of this on the BeRenovate 5 website:
Rounded shapes and lines appear in the background throughout the pages of the site. They make the UI visually interesting without overpowering the design.
Digital texturization can also be strategic. BeCoaching 3 is a good example of how to draw users’ attention to certain areas of your pages:
There are two shapes used throughout the one-page website. This consistency in texturization will make it easier to direct visitors’ eyes to where you want them to go.
The shapes often appear closer to the right margin of the page. Since users’ eyes are commonly attracted to the left margin, these shapes should increase how much content the users see and interact with.
- Supplemental videoUsers have different preferences when it comes to how they ingest content online. Blogs, for instance, are good for people who want to take the time to read something. Video posts or vlogs, on the other hand, are ideal for those who want to watch or listen along.
That said, it’s not like you can provide an audiovisual alternative to every piece of content you place on your web pages. For starters, the design could easily get out of hand as you try to deliver a personalized content consumption experience. What’s more, videos tend to be heavy files and they can easily degrade loading speeds as you add more of them.
What designers are going to do in 2023 is include a video alternative or supplemental video only when it matters.
For instance, halfway down the home page of the BeBusiness 6 site is a full-width video section. It’s impossible to miss:
This video section could be used for a variety of purposes. To show off video testimonials. To summarize all the content that came before it. To provide an easy-to-follow explainer for the product’s technical features. And so on.
Supplemental video doesn’t need to take up too much room in order to be effective either. For instance, the BePregnancy hero section has a small cutout where the video resides:
The instantly recognizable “Play” button lets visitors know there’s something to watch there (if that’s what they want to do). Again, this content can serve a wide variety of purposes.
As a bonus, designers can help improve page loading speeds by using video sparingly and strategically while moving away from autoplay video backgrounds and sections.
What do you think of these website design trends?Often, lists of web design trends cover superficial changes that will take place on websites — fun color trends, experimental typography uses, animation and special effects, etc. In 2023, however, web designers are going to spend more time focusing on trends that improve the web as a whole and lead to more meaningful user engagements.
Accessibility, responsiveness, trust building — these are no simple matters. That said, when you use BeThemeto build websites, they will feel simple because they’ve already been accounted for in many of the 650+ pre-built sites included in the WordPress theme.
Color Formats in CSS * gpu-io * Inkbase * Infisical * The large, small, and dynamic viewport units
A tutorial where you'll learn how to create a pencil effect with a sketchy look using Three.js post-processing.
The latest collection of the most creative and inspiring demos and code experiments from around the web.
In this tutorial we will go over implementing the Game of Life in Three.js using ping pong buffering and off-screen renderbuffers.
State of JavaScript 2022 Survey * An Interactive Guide to Flexbox in CSS * Design Threads
Making a good impression with your portfolio site starts with your hero image. In this post, we’ll take a look at 6 areas where you can create a hero image that can make your design.
Expert tips and tricks on the features any search should be equipped with for a great user experience.
Lucia * The Perfect Commit * OKLCH in CSS * State of CSS 2022 * Hydra * Swurl * Invasive Diffusion
Inspirational Website of the Week: HA-LABO A beautiful design with a lovely motif and engaging details. Our pick this week. Get inspired This content is sponsored via Paved Keep industry-wide […]
Lucide * Container Queries: Style Queries * Agreper * InvokeAI * Ultra * html.to.design
Get a fresh dose of animation inspiration with this new set of creative Dribbble shots.
New patterns for amazing apps * Randoma11y * Design Systems For Figma * Layout Breakouts with CSS Grid
WordPress theme backends are notoriously unattractive and difficult to use. That’s not the case with BeTheme. Peek inside this theme’s backend and discover how it’ll transform the way you work.
A video coding session where you’ll learn how to code a transition with Three.js and postprocessing.
A layout with some scroll animations and a view switch where the content item images animate to a grid.
A video coding session where you’ll learn how to animate tiny triangles to create a whirlwind-like dissolving effect in Three.js.
Learn how you can use Pintura, the robust JS image editor, to crop, resize, rotate, apply filters, or fine-tune your images.
A video coding session where you’ll learn how to recreate the lava lamp like gradient from Stripe.
A simple layout animation where the thumbnails of a menu row animate to their position in a content preview grid.
A video coding session where you’ll learn how to recreate the text and image gallery seen on Design Embraced.
You now have the ability to customize the design of website headers in WordPress. Read this post to find out what kinds of website header design trends you can experiment with.
A fun hover effect that shows a pixelated image with a glitch animation inspired by the one seen on buōy's website.
A hand-picked selection of the best WooCommerce themes to get your online store up and running quickly.
VRSEAT * Nutshell * Bespoke WebGL Postprocessing * Headway * Use the Right Container Query Syntax
A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.
A fresh roundup of the most interesting code experiments from the past couple of weeks.
A coding session where you'll learn how to recreate the checkerboard transition from Gleec.
A simple scroll effect and page transition inspired by Vitalii Burhonskyi's Dribbble shot.
Learn how to use CSS Scan to easily copy styles and markup of any element on a website.
The Study of Shaders with React Three Fiber * DOM ready events considered harmful * PrimeReact
CSS-only shaders * Siter.io * Statements Vs. Expressions * Building your website using Jigsaw
The post Collective #720 appeared first on Codrops.
A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock.
The post Tiny Grid Layout Animation appeared first on Codrops.
Are we entering a new era in web design? Maximalism might be the new trend that can help you create a stunning, eye-catchy, and appealing website.
The post The Comeback of Maximalism and What it Could Mean for Web Design appeared first on Codrops.
Bun * Building tabs in Web Components * Body Margin 8px
The post Collective #719 appeared first on Codrops.
Today we are looking under the hood of a page transition based on Vitalii Burhonskyi's Dribbble shot.
The post How to Create a Cover Page Transition appeared first on Codrops.
A coding session where you'll learn how to wrap a texture on a 3D face with Three.js.
The post How to Map Texture to a 3D Face with Three.js appeared first on Codrops.
Color.js * Defensive CSS * svg-path-morph * PRQL * My Wonderful HTML Email Workflow
The post Collective #718 appeared first on Codrops.
Inspirational websites from the past couple of weeks that shine with a brilliant design.
The post Inspirational Websites Roundup #39 appeared first on Codrops.
A little grid interaction effect where adjoining items make way to a selected one that expands.
The post Make Way Grid Effect appeared first on Codrops.
A coding session where you'll learn how to create volumetric light rays with fragment shaders in Three.js.
The post Volumetric Light Rays with Three.js appeared first on Codrops.
A fresh collection of the most creative UI animation shots to keep you inspired.
The post UI Interactions & Animations Roundup #25 appeared first on Codrops.
The cost of convenience * Building forms with custom elements * State of GraphQL
The post Collective #717 appeared first on Codrops.
A coding session where you'll learn how to recreate the galaxy made of particles from the Viverse website.
The post Creating a Particles Galaxy with Three.js appeared first on Codrops.
Untools * Patterns * CSS Shadow Gradients * In circles and spheres * Better scrolling through modern CSS
The post Collective #716 appeared first on Codrops.
Creative Brand Design, a leading web design agency, has curated a few tools and resources that you can use to help you understand what localisation is and how it’s used in the context of your web design.
The post Designing Cross-Cultural Websites appeared first on Codrops.
Re-evaluating technology * ffmpeg buddy * Rulex * Plasmo Framework
The post Collective #715 appeared first on Codrops.
A short tutorial on how to animate SVG paths while smooth scrolling a page.
The post How to Animate SVG Shapes on Scroll appeared first on Codrops.
A three.js Competition * Customizing Color Fonts on the Web * Tetra * Can I Devtools?
The post Collective #714 appeared first on Codrops.
A new hand-picked selection of fresh websites for your inspiration.
The post Inspirational Websites Roundup #38 appeared first on Codrops.
A coding session where you'll learn how to recreate the infinite image slider seen on tismes.com using Three.js.
The post Coding an Infinite Slider using Texture Recursion with Three.js appeared first on Codrops.
Some ideas for animations on images in a grid when scrolling a page.
The post Scroll Animation Ideas for Image Grids appeared first on Codrops.
A quick overview of some of the most reliable web hosting services for WordPress for both beginners and professionals.
The post Top 7 Unique WordPress Hosts: Best WP Hosting in 2022 appeared first on Codrops.
Create a 3D Scroll Gallery with GSAP * CSS object-view-box * Sherpa * OptimizeImages
The post Collective #713 appeared first on Codrops.
A hand-picked collection of the hottest and most creative animations from the past couple of weeks.
The post UI Interactions & Animations Roundup #24 appeared first on Codrops.
A coding session where you'll learn how to recreate the infinite distorted slider from Yuto Takahashi's website using PixiJS.
The post Creating an Infinite Distorted Slider with PixiJS and Bézier Curves appeared first on Codrops.
Bringing page transitions to the web * Building a button component * Web Applications 101
The post Collective #712 appeared first on Codrops.
A simple transition where a large image animates to its place in a grid.
The post Image To Grid Transition appeared first on Codrops.
Motion DevTools * Voby * State of CSS 2022 * Learn CSS Subgrid * Markdoc
The post Collective #711 appeared first on Codrops.
An experimental layout transition where a stack of images animates to a gallery view, showing some more content.
The post Stack to Content Layout Transition appeared first on Codrops.
[Array Builder] * Scrollex * Grid Tile Patterns * RemixPress * Just Join IT
The post Collective #710 appeared first on Codrops.
A special selection of the most creative websites with the finest designs from the past couple of weeks.
The post Inspirational Websites Roundup #37 appeared first on Codrops.
An intro animation concept with an initial loader and an intro screen that animates to a new layout using various effects.
The post Image Trail Animation for an Intro appeared first on Codrops.
CSS Toggles Explainer & Proposal * HyperUI * Web color is still broken * Progressively Enhanced Builds
The post Collective #709 appeared first on Codrops.
A selection of the most popular and flexible multipurpose WordPress themes for building almost any type of website.
The post 8 Multipurpose WordPress Themes to Use in 2022 appeared first on Codrops.
A look into the making of a mini-city full of post effects and micro-interactions using Three.js.
The post Case Study: Windland — An Immersive Three.js Experience appeared first on Codrops.
A coding session where you'll learn how to create an interactive scene to claim a tank with sunflowers using Three.js and Polycam.
The post Growing Sunflowers with Three.js appeared first on Codrops.
A fresh set of selected motion design shots for your inspiration.
The post UI Interactions & Animations Roundup #23 appeared first on Codrops.
Inspirational Website of the Week: Anna Sherruble A fun an artsy web experience that shines with great colors and a 90ies vibe.
Get inspired
This content is sponsored via BuySellAds Experience Building Low-code Apps Learn how to spend less time constructing the back-end, and more time designing the front-end.
Check it out
The Front-End Developer’s Guide to the Terminal An article covering all of the most important fundamentals to use the Terminal. By Josh W Comeau
Check it out
JavascriptDB Create low code serverless applications: Arrays and Objects operations read and write into your database.
Check it out
The Future of CSS: CSS Toggles Learn about an exciting new prototype for CSS Toggles in this article by Bramus Van Damme.
Read it
Loaders Free loaders and spinners for your next project. Built with HTML, CSS and some SVG. By Griffin Johnston.
Check it out
Create a 3D car show with React Three Fiber and Three.js A fantastic introduction to React Three Fiber where you’ll learn how to quickly setup and create a stunning 3D scene in just about 300 lines of code. By Domenico Bruzzese.
Watch it
Ektogamat ThreeJS Boilerplate Very simple threejs boilerplate in VanillaJS to start your projects. Check out this tweet for an intro video. By Anderson Mancini.
Check it out
Persepolis Reimagined Explore the capital of ancient Persia at its height during the reign of King Xerxes. A new immersive web experience from Getty.
Check it out
Forced colors explained: A practical guide In this article you will learn all about forced colors, a CSS media query that when active radically changes the way your site looks, without any of your input.
Read it
SVG passthrough precision If an SVG is imported into a design tool, then immediately exported as another SVG, how much precision is kept? What’s added, removed, or altered? Find out in this article.
Read it
A Typing Text Effect with React Hooks Build a hook that backspaces and types out an array of words. By Ryan Finni.
Read it
WeekToDo WeekToDo is a free minimalist weekly planner app focused on privacy. Available for Windows, Mac, Linux or online.
Check it out
Skywalker John Beresford created this great demo of Luke Skywalker’s lightsaber.
Check it out
YouTube.js A full-featured wrapper around YouTube’s private API providing a simple and efficient way to interact with YouTube programmatically.
Check it out
Thread on “Photorealistic Monocular 3D Reconstruction of Humans Wearing Clothing” A very interesting thread on a pre-print by Thiemo Alldieck on some super exciting 3D geometry construction.
Check it out
Arteater Fun offline thing: Arteater digests your hand-drawn art and returns an animated GIF you can save and share.
Check it out
Browser in the Dark: flashlights with CSS and canvas A really interesting “flashlight” effect with CSS and Canvas by Ethan Dalool.
Check it out
Discover the IndieWeb, one blog post at a time A website to randomly explore the IndieWeb. Simply click a button and you will be redirected to a random post from a personal blog.
Check it out
7 Web Component Tricks Dave Rupert shares some tricks he learned when preparing his Web Components Course for Frontend Masters.
Check it out
NotepadNext A cross-platform, reimplementation of Notepad++ available for Windows, Linux, and macOS.
Check it out
From Our Blog Awesome Demos Roundup #20 A hand-picked collection of the most creative and interesting web experiments from the past times.
Check it out
Sketch 015: Custom Cursor (multiple circles with filter effect) A custom SVG cursor with multiple circles and a filter effect on hover.
Check it out
From Our Blog How to Add More Fun to a Game: Extending “The Aviator” A tutorial that explores some hands-on changes of “The Aviator” game to make it more fun and engaging.
Check it out
The post Collective #708 appeared first on Codrops.
If you like cute little games you will love Karim Maaloul’s “The Aviator” — as a pilot you steer your aircraft across a round little ocean world, evading red “enemies” and collecting blue energy tokens to avoid crashing into the water. It runs entirely in the browser so make sure to quickly play a round to better understand what we are about to do in this tutorial.
By the way, Karim co-founded the Belgian creative agency Epic. His style is unique in its adorableness and his animation craftmanship is astonishing as you can also see in his series of WebGL experiments.
Karim thankfully wrote about the making of and open sourced the code and while it is a fun little game there is still a lot of potential to get even more out of it. In this article we will explore some hands-on changes on how to bring the most fun based on the foundation we have here, a small browser game using Three.js.
This tutorial requires some knowledge of JavaScript and Three.js.
What makes a game fun? While there obviously is no definitive recipe there are a few key mechanics that will maximize your chances of generating fun. There is a great compilation on gamedesigning.org, so let’s see which items apply already:
Great controls An interesting theme and visual style Excellent sound and music Captivating worlds Fun gameplay Solid level design An entertaining story & memorable characters Good balance of challenge and reward Something different
We can see there’s lots to do, too much for a single article of course, so we will get to the general game layout, story, characters and balance later. Now we will improve the gameplay and add sounds — let’s go!
Adding weapons Guns are always fun! Some games like Space Invaders consist entirely of shooting and it is a great mechanic to add visual excitement, cool sound effects and an extra dimension to the skill requirement so we not only have the up and down movement of the aircraft.
Let’s try some simple gun designs:
The “Simple gun” (top) and the “Better gun” (bottom). These 3D models consist of only 2–3 cylinders of shiny metal material:
``` const metalMaterial = new THREE.MeshStandardMaterial({ color: 0x222222, flatShading: true, roughness: 0.5, metalness: 1.0 })
class SimpleGun { static createMesh() { const BODY_RADIUS = 3 const BODY_LENGTH = 20
const full = new THREE.Group()
const body = new THREE.Mesh(
new THREE.CylinderGeometry(BODY_RADIUS, BODY_RADIUS, BODY_LENGTH),
metalMaterial,
)
body.rotation.z = Math.PI/2
full.add(body)
const barrel = new THREE.Mesh(
new THREE.CylinderGeometry(BODY_RADIUS/2, BODY_RADIUS/2, BODY_LENGTH),
metalMaterial,
)
barrel.rotation.z = Math.PI/2
barrel.position.x = BODY_LENGTH
full.add(barrel)
return full
}
} ```
We will have 3 guns: A SimpleGun, then the DoubleGun as just two of those and then the BetterGun which has just a bit different proportions and another cylinder at the tip.
Guns mounted to the airplane Positioning the guns on the plane was done by simply experimenting with the positional x/y/z values.
The shooting mechanic itself is straight forward:
``` class SimpleGun { downtime() { return 0.1 }
damage() { return 1 }
shoot(direction) { const BULLET_SPEED = 0.5 const RECOIL_DISTANCE = 4 const RECOIL_DURATION = this.downtime() / 1.5
const position = new THREE.Vector3()
this.mesh.getWorldPosition(position)
position.add(new THREE.Vector3(5, 0, 0))
spawnProjectile(this.damage(), position, direction, BULLET_SPEED, 0.3, 3)
// Little explosion at exhaust
spawnParticles(position.clone().add(new THREE.Vector3(2,0,0)), 1, Colors.orange, 0.2)
// Recoil of gun
const initialX = this.mesh.position.x
TweenMax.to(this.mesh.position, {
duration: RECOIL_DURATION,
x: initialX - RECOIL_DISTANCE,
onComplete: () => {
TweenMax.to(this.mesh.position, {
duration: RECOIL_DURATION,
x: initialX,
})
},
})
} }
class Airplane { shoot() { if (!this.weapon) { return }
// rate-limit shooting
const nowTime = new Date().getTime() / 1000
if (nowTime-this.lastShot < this.weapon.downtime()) {
return
}
this.lastShot = nowTime
// fire the shot
let direction = new THREE.Vector3(10, 0, 0)
direction.applyEuler(airplane.mesh.rotation)
this.weapon.shoot(direction)
// recoil airplane
const recoilForce = this.weapon.damage()
TweenMax.to(this.mesh.position, {
duration: 0.05,
x: this.mesh.position.x - recoilForce,
})
} }
// in the main loop if (mouseDown[0] || keysDown['Space']) { airplane.shoot() } ```
Now the collision detection with the enemies, we just check whether the enemy’s bounding box intersects with the bullet’s box:
``` class Enemy { tick(deltaTime) { ... const thisAabb = new THREE.Box3().setFromObject(this.mesh) for (const projectile of allProjectiles) { const projectileAabb = new THREE.Box3().setFromObject(projectile.mesh) if (thisAabb.intersectsBox(projectileAabb)) { spawnParticles(projectile.mesh.position.clone(), 5, Colors.brownDark, 1) projectile.remove() this.hitpoints -= projectile.damage } } if (this.hitpoints <= 0) { this.explode() } }
explode() {
spawnParticles(this.mesh.position.clone(), 15, Colors.red, 3)
sceneManager.remove(this)
}
} ```
Et voilá, we can shoot with different weapons and it’s super fun!
Changing the energy system to lives and coins Currently the game features an energy/fuel bar that slowly drains over time and fills up when collecting the blue pills. I feel like this makes sense but a more conventional system of having lives as health, symbolized by hearts, and coins as goodies is clearer to players and will allow for more flexibility in the gameplay.
In the code the change from blue pills to golden coins is easy: We changed the color and then the geometry from THREE.TetrahedronGeometry(5,0) to THREE.CylinderGeometry(4, 4, 1, 10).
The new logic now is: We start out with three lives and whenever our airplane crashes into an enemy we lose one. The amount of collected coins show in the interface. The coins don’t yet have real impact on the gameplay but they are great for the score board and we can easily add some mechanics later: For example that the player can buy accessoires for the airplane with their coins, having a lifetime coin counter or we could design a game mode where the task is to not miss a single coin on the map.
Adding sounds This is an obvious improvement and conceptually simple — we just need to find fitting, free sound bites and integrate them.
Luckily on https://freesound.org and https://www.zapsplat.com/ we can search for sound effects and use them freely, just make sure to attribute where required.
Example of a gun shot sound: https://freesound.org/people/LeMudCrab/sounds/163456/.
We load all 24 sound files at the start of the game and then to play a sound we code a simple audioManager.play(‘shot-soft’). Repetitively playing the same sound can get boring for the ears when shooting for a few seconds or when collecting a few coins in a row, so we make sure to have several different sounds for those and just select randomly which one to play.
Be aware though that browsers require a page interaction, so basically a mouse click, before they allow a website to play sound. This is to prevent websites from annoyingly auto-playing sounds directly after loading. We can simply require a click on a “Start” button after page load to work around this.
Adding collectibles How do we get the weapons or new lives to the player? We will spawn “collectibles” for that, which is the item (a heart or gun) floating in a bubble that the player can catch.
We already have the spawning logic in the game, for coins and enemies, so we can adopt that easily.
``` class Collectible { constructor(mesh, onApply) { this.mesh = new THREE.Object3D() const bubble = new THREE.Mesh( new THREE.SphereGeometry(10, 100, 100), new THREE.MeshPhongMaterial({ color: COLOR_COLLECTIBLE_BUBBLE, transparent: true, opacity: .4, flatShading: true, }) ) this.mesh.add(bubble) this.mesh.add(mesh) ... }
tick(deltaTime) {
rotateAroundSea(this, deltaTime, world.collectiblesSpeed)
// rotate collectible for visual effect
this.mesh.rotation.y += deltaTime * 0.002 * Math.random()
this.mesh.rotation.z += deltaTime * 0.002 * Math.random()
// collision?
if (utils.collide(airplane.mesh, this.mesh, world.collectibleDistanceTolerance)) {
this.onApply()
this.explode()
}
// passed-by?
else if (this.angle > Math.PI) {
sceneManager.remove(this)
}
}
explode() {
spawnParticles(this.mesh.position.clone(), 15, COLOR_COLLECTIBLE_BUBBLE, 3)
sceneManager.remove(this)
audioManager.play('bubble')
// animation to make it very obvious that we collected this item
TweenMax.to(...)
}
}
function spawnSimpleGunCollectible() { const gun = SimpleGun.createMesh() gun.scale.set(0.25, 0.25, 0.25) gun.position.x = -2
new Collectible(gun, () => {
airplane.equipWeapon(new SimpleGun())
})
} ```
And that’s it, we have our collectibles:
The only problem is that I couldn’t for the life of me create a heart model from the three.js primitives so I resorted to a free, low-poly 3D model from the platform cgtrader.
Defining the spawn-logic on the map in a way to have a good balance of challenge and reward requires sensible refining so after some experimenting this felt nice: Spawn the three weapons after a distance of 550, 1150 and 1750 respectively and spawn a life a short while after losing one.
Some more polish * The ocean’s color gets darker as we progress through the levels * Show more prominently when we enter a new level * Show an end game screen after 5 levels * Adjusted the code for a newer version of the Three.js library * Tweaked the color theme
More, more, more fun! We went from a simple fly-up-and-down gameplay to being able to collect guns and shoot the enemies. The sounds add to the atmosphere and the coins mechanics sets us up for new features later on.
Make sure to play our result here! Collect the weapons, have fun with the guns and try to survive until the end of level 5.
If you are interested in the source code, you find it here on GitHub.
How to proceed from here? We improved on some key mechanics and have a proper basis but this is not quite a finalized, polished game yet.
As a next step we plan to dive more into game design theory. We will look at several of the most popular games of the endless runner genre to get insights into their structure and mechanics and how they keep their players engaged. The aim would be to learn more about the advanced concepts and build them into The Aviator.
Subway Surfer, the most successful “endless runner” game. Stay tuned, so long!
The post How to Add More Fun to a Game: Extending “The Aviator” appeared first on Codrops.
After a long time, we’re back with a new demos roundup! This is a hand-picked collection of the most fun, creative and impressive web experiments we found on the interwebs in the past times.
Hope you enjoy it and that you can draw some inspiration and ideas from this set!
Mechanical Calculator by Mariya Avtanska
Sketch 202 by Ryo Ikeda
Input Type Range by Hakim El Hattab
r3f-kirifuda by Nemutas
Checkbox Animations With Indeterminate State by Jon Kantner
Sketch 199 by Ryo Ikeda
Infinite Mac by Mihai Parparita
FunGUI by resn
Art gallery by Andrés Tonello
Vaporwave by Maxime Heckel
Bike Configurator by NeedleTools
High-performance Depth of Field by Pixotronics
Untitled by Toshiya Marukubo
Realistic Grass by Faraz Shaikh
Pure CSS Mario 64 by Ben Evans
Toggle 3D by Adir
Turbulent Buttons by Adam Kuhn
2022 by Hugo Wiledal
r3f-unshift-effect by Nemutas
Super Mario Scrollable Timeline by Adam Kuhn
Infinite scrollable and draggable (WebGL)grid by Jesper Landberg
threejs experiment by Domenico Bruzzese
City by Baron Watts
Spline Matrix by the Spline Team
VirtualBeeb by Dominic Pajak
Gameboy by Mustapha Aouas
saturdaynight by Arno Di Nunzio
Audio-reactive visual with Three.js by Francesco Michelini
Dan Flashes Complicated Shirt Generator by Adam Kuhn
Pose Estimation by Alexandre Devaux
Focusss v2 by Hakim El Hattab
Fox in the wind by Louis Hoebregts
checkboxland by Bryan Braun
Akari 1A • Pure CSS • repeating-radial-gradient by Aris Acoba
CSS Drummer by Deren
windmill by Felix Mariotto
Crunk dancer by Arno Di Nunzio
The post Awesome Demos Roundup #20 appeared first on Codrops.
Inspirational Website of the Week: Six A super slick design with sharp typography and great layouts. Our pick this week.
Check it out
Our Sponsor Instant websites for your clients with Divi Layout Packs With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out
Three-gpu-pathtracer An epic path tracing renderer and utilities for Three.js built on top of three-mesh-bvh. By Garrett Johnson.
Check it out
Picture perfect images with the modern element
Addy Osmani writes about how important images are and how they can affect your web app’s performance more than any other part of your code.
Read it
Building a dialog component A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the
Read it
Home sweet homepage The fantastic journey of growing up online by Sailor Mercury.
Check it out
Ideal SVG exports A random collection of opinions on how design tools should export SVGs.
Check it out
CSS :has() A Parent Selector Now Matthias Ott explains how the :has() selector works and shows how it’s not only useful as a parent selector.
Read it
Reasonable Colors Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.
Check it out
JavaScript function composition: What’s the big deal? An article by James Sinclair explains what the big deal with function composition is.
Read it
CSS Parent Selector A deep-dive into the CSS :has parent selector with some use-cases and examples. By Ahmad Shadeed.
Read it
The struggle of using native emoji on the web Nolan Lawson on the miserable state of Emoji support in browser.
Read it
Just a Calendar Just a no nonsense calendar made by Shrikant Sharat Kandula.
Check it out
Chalk.ist A tool to turn your source code into beautiful images.
Check it out
Lexical Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
Check it out
CryptoFont Crisp webfont icons and SVG logos of many cryptocurrencies.
Check it out
The complete guide to protecting your APIs with OAuth2 (part 1) A deep dive into the complex OAuth2, the most popular specifications for API authentication. By Dan Moore.
Read it
Eight Colors Eight Colors is a block shifting game where the goal is to shift circular blocks to reach the target. Made by Shubham Jain.
Check it out
Dave Seidman Dave Seidman’s portfolio has a cool project slideshow with a 3D shape in a polygonal look that morphs into another one.
Check it out
How to Fix Your Low-Contrast Text Learn how to solve 30% of the web’s accessibility defects with just the help of a calculator. By Ben Myers.
Read it
From Our Blog Creating a Fluid Distortion Animation with Three.js A coding session where you’ll learn how to create the interactive liquid-like effect from the PixiJS website using Three.js.
Check it out
From Our Blog On-Scroll Text Repetition Animation An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber.
Check it out
The post Collective #707 appeared first on Codrops.
Today I’d like to share a simple, but intriguing looking typography effect with you. This on-scroll animation is a recreation of the effect seen on the fabulous site of Dr. Dabber, where you see fragments of a large text moving as you scroll the page.
As we scroll we move out several layers of the same text at the top and bottom. By setting the same background color as the page, we can create gaps between these layers.
With some style adjustments we can create a variety of looks, text-shadow like ones or outlines, the possibilities are endless!
This is how it looks when you scroll:
I really hope you enjoy this little effect and find it useful!
The post On-Scroll Text Repetition Animation appeared first on Codrops.
Inspirational Website of the Week: Study Hall Creative Beautiful scroll effects and interesting design details. Our pick this week.
Get inspired
Our Sponsor Discover 15 Best Tools & Resources for Designers in 2022 With WordPress themes & plugins, illustrations, free websites builders (and many others), this article will provide you with instantly helpful tools and resources.
Discover them now
Shader Park A JavaScript library for creating interactive procedural 2D and 3D shaders.
Check it out
Fun with the dialog element Mark Otto played around with the new HTML dialog element and shows how to use it.
Read it
First look: adding type annotations to JavaScript Axel Rauschmayer writes about the new proposal of adding type annotations to JavaScript.
Read it
What Is ARIA Even For? Heydon Pickering’s amusing video about common pitfalls of using ARIA with the help of Ada Lovelace, a goat, and a dinosaur with a table for a head.
Watch it
Texture Bring your generative work to life with three simple textures inspired by the natural world. By George Francis.
Check it out
Building a loading bar component A foundational overview of how to build a color adaptive and accessible loading bar with the
Read it
Roland50.studio Emulate the sound of Roland’s most famous and influential musical instruments from Yuri Suzuki and Roland.
Check it out
New year 2022? A cool React Three Fiber demo based on a WebGl creation. By Hugo Wiledal. Read more here.
Check it out
HTML and CSS in Emails: What Works in 2022? Learn what HTML and CSS features work for email templates, and how you can make them work for all email clients, in 2022.
Check it out
Avvvatars Beautifully crafted unique UI avatar placeholders for your next React project.
Check it out
Delightful React File/Directory Structure How should we structure components and other files in our React apps? Josh W Comeau shares his solution.
Read it
Create a Stunning Glassmorphism Effect in CSS A step-by-step guide to creating immersive background effects and beautiful gradient headlines using backdrop-filter and background-clip CSS properties. By Zoran Jambor.
Check it out
Aligning Content In Different Wrappers Ahmad Shadeed explains how to solve a sometimes tricky problem: aligning content with another section given that they are placed in different wrappers.
Read it
Turbulent Buttons An amazing turbulent button demo made by Adam Kuhn.
Check it out
Building Table Sorting and Pagination in JavaScript Learn how to render a sortable, paginated table in JavaScript. By Raymond Camden.
Read it
In Defense of Sass Stephanie Eckles writes how organization, linting, and ease of theming are the primary reasons she’ll continue to use Sass.
Read it
Skateboard-Like Preloader A fun preloader concept featuring a worm that does a flip when reaching the left or right sides of the ring. Made with SVG and CSS animation by Jon Kantner.
Check it out
How we migrated entirely to CSS Modules using codemods and Sourcegraph Code Insights Valery Bugakov shares how the Sourcegraph team migrated to CSS Modules.
Read it
SILVER FCTRY Experience the playful and immersive AMBUSH® universe, in a virtual spaceship to take you on a journey to the other side.
Check it out
From Our Blog Inspirational Websites Roundup #35 A new collection of creative websites to keep you up-to-date on the latest web design trends.
Check it out
From Our Blog Expanding Rounded Menu Animation An expanding menu animation with a cover unreveal effect in the background. Inspired by Ruslan Siiz’s Dribbble shot “365 Magazine”.
Check it out
The post Collective #703 appeared first on Codrops.
It’s the time of the month again for a fresh collection of creative websites! This time we have some new and exciting trends emerging, especially intense colors, uppercase sans serif and monospace typefaces.
I hope you enjoy this roundup and draw some inspiration from it!
FVCK_AVATAR
Potion
Study Hall
Wonderlust
Roadmap – LVCIDIA//
Moffitt.Moffitt
Gloutir
BryBry – Visuals.
Traineeships.Monks
Very Peri
DIABLA OUTDOOR
PG Arquitectos
Jantana Hennard
Gordon von Steiner
Loop Creative Studio
MB | Mubien Brands
CIRCUS Shanghai
Jesse’s Ramen
UnHide
Garbage
Handpicked specialty coffee roasters
Segurado
Studio 9P
Defy Gravity
Infinite Passerella
LACEY.STUDIO
Cathy Dolle
Christou 1910 DAYS
MicroWaver 59
Releap
Filippo Bello
The post Inspirational Websites Roundup #35 appeared first on Codrops.
Menu animations are something that can elevate a design to another level. There are endless possibilities and they provide an opportunity to do something unique. Sometimes it’s also interesting to pair them with other animations. Already a while back I saw this really nice menu animation by Ruslan Siiz called “365 Magazine”:
It’s a really beautiful design and animation so I tried replicating it but with more of a dark theme. That dark theme is inspired by another design which I can’t recall (it’s probably from a year ago or so), especially the big letters.
This is the initial page:
When clicking on one of the links in the top menu, two things happen. First, we have a background cover animation which works with an “unreveal” effect. In this tutorial you can learn how this effect works and how to code it up. Second, we have the expanding menu animation in the foreground. This is the how the menu looks like when it’s expanded:
The whole animation looks as follows:
The rounded appearance of the menu is preserved by placing the submenu in a way that it overlaps the top menu. Using an element that wraps the submenu with the background color and border radius, and that has the overflow set to “hidden”, allows us to hide the inner menu element by setting its Y transform to -100%.
I really hope you enjoy this demo and find it inspiring! Let me know what you think via @codrops or @crnacura!
The post Expanding Rounded Menu Animation appeared first on Codrops.
Inspirational Website of the Week: Jantana Hennard Smooth and minimal with lovely typography and some playful details. Our pick this week.
Get inspired
This content is sponsored via BuySellAds Put the “Flow” in Your Workflows with Shortcut Shortcut helps streamline and evolve your workflows so you can plan, collaborate, ship, and measure success all from one place.
Try it free
WebGPU — All of the cores, none of the canvas An in-depth exploration by Surma where he shares what he learned while wrapping his head around GPUs and WebGPU, the upcoming Web API that gives you low-level, general-purpose access GPUs.
Read it
Say Hello to selectmenu, a Fully Style-able select Element Patrick Brosset introduces a new, experimental form control called selectmenu and shows how much easier it is to style than a traditional
Check it out
Taming CSS Variables with Web Inspector Over the past few releases, Web Inspector in Safari Technology Preview has introduced some features to help you when working on projects that use large numbers of CSS variables.
Read it
Type Trends 2022 Check out the latest type trends to see what’s new and exciting in the world of design, branding, and type design.
Check it out
The Micro-Frontends future Luca Mezzalira looks at where the micro-frontends journey has arrived so far and analyzes the different challenges where teams are struggling.
Read it
Css Checker Css-checker checks your CSS styles for duplication and finds the diff among CSS classes with high similarity in seconds.
Check it out
Booqsi A modern social platform for the book community and an Amazon-free alternative to Goodreads.
Check it out
Wik Use wik to get information about anything on the shell using Wikipedia.
Check it out
Solid.js feels like what I always wanted React to be Nick Scialli is sold on Solid and explains why it “feels like it uses a lot of the ergonomic parts of React while minimizing confusion and errors”.
Read it
Progressive Enhancement, the New Hotness Chris Ferdinandi reminds what Progressive Enhancement is and why it is important.
Read it
10 Useful CSS Tricks for Front-end Developers CSS is becoming more capable of handling dynamic design features that were often achieved through JavaScript. Learn some creative CSS tricks that are a prime example of that in this article by Alex Ivanovs.
Read it
How Does Perspective Work in Pictures? A super interesting article by Aaron Hertzmann on how perspective works in pictures and how photography isn’t all-seeing in the sense that the eyes see.
Read it
TextFrame TextFrame lets you create animated tutorials for your users so they can get the help they need.
Check it out
Open Source Color System An Open Source Color System for Complex Digital Interfaces with Carefully picked colors to match with your interfaces challenges.
Check it out
A Reason to Self-Host Fonts Michelle Barker explains how third-party CDN hosted fonts can simply change without you knowing and how that is one more argument in favor of self-hosting them for better control.
Read it
Ken Kaneki (Pure CSS) Beautiful pure CSS art made by Ronnie Lee.
Check it out
How to design better APIs 15 language-agnostic, actionable tips on REST API design by Ronald Blüthl.
Read it
From Our Blog Creating Native Web Components Learn how to create native web components with the Minze JavaScript framework.
Check it out
From Our Blog UI Interactions & Animations Roundup #22 The latest motion design concepts and web animation inspiration from the past couple of weeks.
Check it out
From Our Blog Creating a Risograph Grain Light Effect in Three.js Learn two ways of applying a creative grain effect to 3D elements in Three.js.
Check it out
From Our Blog Sketch 010: Image Motion Trail (Perspective) One of our latest sketches: An image motion trail effect with various layers that follow the mouse.
Check it out
The post Collective #702 appeared first on Codrops.
An effective and well-organized workflow is an important asset for professional web designers and web design agencies alike. Achieving this requires having the necessary design tools and resources within easy reach to keep lost or wasted an absolute minimum while increasing the chances of realizing high-quality results.
There is certainly no shortage of good web design tools and resources. There are so many in fact that it can be a challenge to find those little timesavers that can spare you headaches and save you a ton of time in the long run.
That said, this selection is well worth bookmarking as it features 15 top tools and resources for designers and agencies you can put to use to enrich your 2022 web design projects.
1. Be – The Biggest WordPress and portfolio WordPress theme
In terms of sheer size, BeTheme is the biggest WordPress and WooCommerce theme of them all with its 240,000+ strong customer base, its all-encompassing library of pre-built websites, and its 40+ core website building features.
Among the highlights –
- A selection of 650+ customizable pre-built websites that cover all the major industry sectors, a wealth of business niches and all website styles and types. These pre-built websites are responsive, UX-ready, and make creating any website a super-easy task.
- The fast and flexible BeBuilder that allows you to import from Be’s pre-built website’s 3000+ pages, import, export, save, and retrieve blocks of content, and design revisions and create backgrounds as you always wanted them to be.
- BeBuilder Woo with customer-friendly shopping features, product previews, a sticky menu, and more that enables you to create any shop or single product layout you can envision.
- BeTheme is loaded with valuable design options, it is Elementor ready, and it is frequently updated.
Click on the banner to investigate BeTheme in greater detail.
2. Total WordPress Theme
Total is a power-packed WordPress theme that is designed to make web design easy for beginners and developers alike. Thanks to its flexible page builder and multiple style options Total does not place limits on the page layouts you can create.
- Total’s NEW 90+ section templates along with its 75+ pre-styled post entry cards and 45+ quick-import sample demos make website building fast and enjoyable.
- 500+ customizing settings, a built-in font manager, and other features combined with Total’s drag and drop frontend page builder make creating a highly customized web design an easy task.
- Total is completely compatible with all the popular plugins, including WooCommerce of course, and its use of Vanilla JavaScript with built in hooks and filters, and 600+snippets make it an extremely developer friendly theme.
Click on the banner to learn more about this popular theme.
3. LayerSlider
With LayerSlider, you can do much more than create stunning sliders. This popular product has been on the market for more than a decade. In its current form it gives designers and design agencies website building capabilities that can be applied to spruce up or spice up any website with modern graphics, eye-catching animations, and cool interactive features.
- LayerSlider has 150+ website, slider, and popup templates. Templates provide a great way to learn and serve as ideal starting points for new projects.
- LayerSlider comes with a modern, easy-to-use editor interface – similar to those found in professional desktop applications. Anyone can use this popular tool without having any prior experience.
LayerSlider is cost-effective and easy to install and work with. Users can easily create an expensive-looking website at a tiny fraction of the usual cost.
Click on the banner to see what LayerSlider could do for you.
4. Uncode – Creative & WooCommerce WordPress Theme
This pixel-perfect theme is an Envato best seller with its 80,000+ sales to date.
Its key features include –
- a fast and flexible Frontend Page Builder
- advanced WooCommerce capabilities that include a wealth of customer-centric design elements and options
- a Wireframes Plugin and 550+ section templates
Uncode is ideally suited for creating blog, magazine, and portfolio sites.
5. Trafft
Put Trafft to work to schedule appointments, meetings, and events, manage staff and services, send reminders, accept payments, and more.
- Features include coupons, custom domains, group booking, multiple location usage, and email service.
- Trafft easily integrates with Google Calendar and Google Meet, Outlook Calendar, Zoom, Mailchimp and Zapier.
6. wpDataTables
The wpDataTables WordPress table and chart plugin is noted for its many powerful and useful features that enable it to stand out from the competition.
They include –
- Multiple databases connectivity (MySQL, PostgreSQL, MS SQL)
- Creating tables from multiple sources including MySQL or WordPress database and PHP arrays
- Conditional formatting
- 4 Chart-building engines
- Advanced filtering and sorting capabilities
wpDataTables integrates smoothly with Elementor, DIVI, Avada, Gutenberg and Visual Composer.
7. WHATFONTIS
WHATFONTIS allows designers to find a font in a matter of seconds by identifying it from an uploaded image. This gem in the world of font identifiers gives you –
- rapid identification of free fonts
- an AI-based font search that provides the best possible accuracy
- font filtering based on foundry and price
Premium support is readily available for those infrequent cases where the AI engine gives awkward results. A PRO subscription can be yours for only $39.99/year.
8. Mobirise Website Builder Software
Mobirise is an offline website builder that is perfect for creating small to medium size websites. It is an excellent choice for non-technical users who would typically prefer to do their website-building visually.
- Mobirise creates sites quickly, easily, and intuitively
- 5500+ awesome templates come with the package
- You own your site, and you can edit it locally and upload wherever
- code if you want since you have full access to HTML
Mobirise is free for commercial use.
9. Get illustrations Stock Illustrations Bundle
If your websites, apps, or presentations are beginning to exhibit a certain sameness it might be time to take advantage of GetIllustration’s library of 10,000+ premium illustrations.
- Get illustrations for web, apps, presentations or other purposes
- Illustrations are available in PNG, SVG, Ai, Figma, Sketch formats
- Download them once and use them forever
- A commercial use license is included
Take advantage of the 25% discount by using coupon code: EliteDesigners25.
10. Slider Revolution
Slider Revolution is a versatile WordPress plugin that enables designers and design agencies to pleasantly surprise their clients with stunning, highly-professional visuals.
- Slider Revolution is packed with revolutionary (no pun intended) features that can turn a boring website into an attention-grabbing responsive one.
- 200+ website and slider templates and 25+ powerful addons are included.
Slider Revolution is easy to work with, but one-on-one support is there should you need it.
11. XStore – Best WordPress WooCommerce Theme for eCommerce
If you are looking for a power-packed WooCommerce theme that’s available at a bargain price, look no further. The XStore WooCommerce theme has it all, including –
- 110+ prebuilt, ready-to-customize shops
- A selection of premium plugins worth $510
- WPB and Elementor compatibility
- A single-product builder
All the above plus 30,000+ happy customers.
12. Amelia
The Amelia plugin will fully automate and manage your business’s appointment and events, and in doing so will save you and your clients significant amounts of time.
- Your clients can make, change, or cancel appointments online 24/7
- Amelia manages bookings at multiple business locations, and can also track and manage employee assignments and availability schedules
- Amelia can be integrated with Zoom for consultation and training purposes
13. 8bio – Link in Bio Tool
With this little tool you can create a link that people can’t resist clicking on. It’s as easy as can be to do and you can –
- take advantage of 8bio’s beautiful skins and catchy animated backgrounds
- link to your own domain or use *.8b.io
- present a brief biography profile of yourself or your business
- monetize your link with a shopping cart or tip jar
And much more.
14. Essential Grid
The Essential Grid plugin enables you to create galleries you may have considered to be too difficult if not impossible to attempt to build. Galleries that could –
- Showcase an attention-getting portfolio
- Display your products, your awe-inspiring videos, or share your personal Instagram stream.
Essential Grid offers multiple layout options and can accept content from a variety of sources.
15. Pixpa – Portfolio Websites for Designers
Pixpa is an extremely useful tool to have if you should happen to be engaged in a creative pursuit of almost any kind. With Pixpa you can –
- build a website the way you want to – without any need for coding
- share, proof, sell, and deliver your work to your clients and customers
- accept payments commission-free through PayPal or Stripe
Several plans are available, and you can start with a 15 day free trial.
Product design involves more than simply creating a good look. It’s about creating engaging visuals that lead to a satisfying overall presentation. One or more of the above web design resources could be helpful to web designers, developers, creative artists, or agencies.
Rather than investing time and money in a lengthy designing process, why not take advantage of one of these designer resources with their ready-to-use components and features to create a totally awesome product?
We have assembled this collection of 15 top tools and resources for 2022. It can help you create a successful online presence for your business or build upon an existing one.
The post 15 Awesome Tools and Resources for Designers and Agencies in 2022 appeared first on Codrops.
Recently, I release my brand new portfolio, home to my projects that I have worked on in the past couple of years:
As I was doing experimentations for the portfolio, I tried to reproduce this kind of effect I found on the web:
I really like these 2D grain effects applied to 3D elements. It kind of has this cool feeling of cray and rocks and I decided to try and reproduce it from scratch. I started with a custom light shader, then mixed it with a grain effect and by playing with some values I got to this final result:
In this tutorial I’d like to share with you what I’ve done to achieve this effect. We’re going to explore two different ways of doing it.
Note that I won’t get into too much detail about Three.js and WebGL for simplicity, so it’s good to have some solid knowledge of JavaScript, Three.js and some notions about shaders before starting with this tutorial. If you’re not very familiar with shaders but with Three.js, then the second way is for you!
Summary Method 1: Writing our own custom ShaderMaterial (That’s the harder path but you’ll learn about how light reflection works!)
- Creating a basic Three.js scene
- Use ShaderMaterial
- Create a diffuse light shader
- Create a grain effect using 2D noise
- Mix it with light
Method 2: Starting from MeshLambertMaterial shader (Easier but includes unused code from Three.js since we’ll rewrite the Three.js LambertMaterial shader)
- Copy and paste MeshLambertMaterial
- Add our custom grain light effect to the fragmentShader
-
Add any Three.js lights
-
Writing our own custom ShaderMaterial Creating a basic Three.js scene First we need to set up a basic Three.js scene with a simple sphere in the center:
Here is a Three.js basic scene with a camera, a renderer and a sphere in the middle. You can find the code in this repository in the file src/js/Scene.js, so you can start the tutorial from here.
Use ShaderMaterial
Let’s create a custom shader in Three.js using the ShaderMaterial class. You can pass it uniforms objects, and a vertex and a fragment shader as parameters. The cool thing about this class is that it’s already giving you most of the necessary uniforms and attributes for a basic shader (positions of the vertices, normals for light, ModelViewProjection matrices and more).
First, let’s create a uniform that will contain the default color of our sphere. Here I picked a light blue (#51b1f5) but feel free to pick your favorite color. We’ll use a new THREE.Color() and call our uniform uColor. We’ll replace the material from the previous code l.87:
const material = new THREE.ShaderMaterial({
uniforms: {
uColor: { value: new THREE.Color(0x51b1f5) }
}
});
Then let’s create a simple vertex shader in vertexShader.glsl, a separated file that will display the sphere vertices at the correct position related to the camera.
void main(void) {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
And finally, we write a basic fragment shader fragmentShader.glsl in a separated file as well, that will use our uniform uColor vec3 value:
``` uniform vec3 uColor;
void main(void) { gl_FragColor = vec4(uColor, 1.); } ```
Then, let’s import and link them to our ShaderMaterial.
import vertexShader from './vertexShader.glsl'
import fragmentShader from './fragmentShader.glsl'
...
const material = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
uniforms: {
uColor: { value: new THREE.Color(0x51b1f5) }
}
});
Now we should have a nice monochrome sphere:
Create a diffuse light shader Creating our own custom light shader will allow us to easily manipulate how the light should affect our mesh.
Even if that seems complicated to do, it’s not that much code and you can find great articles online explaining how light reflection works on a 3D object. I recommend you read webglfundamentals if you would like to learn more details on this topic.
Going further, we want to add a light source in our scene to see how the sphere reflects light. Let’s add three new uniforms, one for the position of our spotlight, the other for the color and a last one for the intensity of the light. Let’s place the spotlight above the object, 5 units in Y and 1 unit in Z, use a white color and an intensity of 0.7 for this example.
...
uLightPos: {
value: new THREE.Vector3(0, 5, 3) // position of spotlight
},
uLightColor: {
value: new THREE.Color(0xffffff) // default light color
},
uLightIntensity: {
value: 0.7 // light intensity
},
Now let’s talk about normals. A THREE.SphereGeometry has normals 3D vectors represented by these arrows:
For each surface of the sphere, these red vectors define in which direction the light rays should be reflected. That’s what we’re going to use to calculate the intensity of the light for each pixel.
Let’s add two varyings on the vertex shader:
- vNormals, the normals vectors of the object related to the world position (where it is in the global scene).
- vSurfaceToLight, this represents the direction of the light position minus the direction of each surface of the sphere.
``` uniform vec3 uLightPos;
varying vec3 vNormal; varying vec3 vSurfaceToLight;
void main(void) { vNormal = normalize(normalMatrix * normal);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // General calculations needed for diffuse lighting // Calculate a vector from the fragment location to the light source vec3 surfaceToLightDirection = vec3( modelViewMatrix * vec4(position, 1.0)); vec3 worldLightPos = vec3( viewMatrix * vec4(uLightPos, 1.0)); vSurfaceToLight = normalize(worldLightPos - surfaceToLightDirection); } ```
Now let’s generate colors based on these light values in the Fragment shader.
We already have the normals values with vNormals. To calculate a basic light reflection on a 3D object we need two values light types: ambient and diffuse.
Ambient light is a constant value that will give a global light color of the whole scene. Let’s just use our light color for this case.
Diffuse light is representing the value of how strong the light is depending on how the object reflects it. That means that all surfaces which are close to and facing the spotLight should be more enlightened than surfaces that are far away and in the same direction. There is an amazing math function to calculate this value called the dot() product. The formula for getting a diffuse color is the dot product of vSurfaceToLight and vNormal. In this image you can see that vectors facing the sun are brighter than the others:
Then we need to addition the ambient and diffuse light and finally multiply it by a lightIntensity. Once we got our light value let’s multiply it by the color of our sphere. Fragment shader:
``` uniform vec3 uLightColor; uniform vec3 uColor; uniform float uLightIntensity;
varying vec3 vNormal; varying vec3 vSurfaceToLight;
vec3 light_reflection(vec3 lightColor) { // AMBIENT is just the light's color vec3 ambient = lightColor;
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // DIFFUSE calculations // Calculate the cosine of the angle between the vertex's normal // vector and the vector going to the light. vec3 diffuse = lightColor * dot(vSurfaceToLight, vNormal);
// Combine return (ambient + diffuse); }
void main(void) { vec3 light_value = light_reflection(uLightColor); light_value *= uLightIntensity;
gl_FragColor = vec4(uColor * light_value, 1.); } ```
And voilà:
Feel free to click and drag on this sandbox scene to rotate the camera.
Note that if you want to recreate MeshPhongMaterial you also need to calculate the specular light. This represent the effect you can observe when a ray of light gets directly into our eyes when reflected by an object, but we don’t need that precision here.
Create a grain effect using 2D noise To get a 2D grain effect we’ll have to use a noise function that will display a gray color from 0 to 1 for each pixel of the screen in a “beautiful randomness”. There are a lot of functions online for creating simplex noise, perlin noise or others. Here we’ll use glsl-noise for a 2D simplex noise and glslify to import the noise function directly at the beginning of our fragment shader using:
```
pragma glslify: snoise2 = require(glsl-noise/simplex/2d)
```
Thanks to the native WebGL value gl_FragCoord.xy we can easily get the UVs (coordinates) of the screen. Then we just have to apply the noise to these coordinates vec3 textureNoise = vec3(snoise2(uv)); This will create our 2D noise. Then, let’s apply these noise colors to our gl_FragColor:
```
pragma glslify: snoise2 = require(glsl-noise/simplex/2d)
... // grain vec2 uv = gl_FragCoord.xy;
vec3 noiseColors = vec3(snoise2(uv));
gl_FragColor = vec4(noiseColors, 1.0); ```
What a nice old TV noise effect:
As you can see, when moving the camera, the texture feels like it’s “stuck” to the screen, that’s because we matched our simplex noise effect to the coordinates of the screen to create a 2D style effect. You can also adjust the size of the noise like so uv /= myNoiseScaleVal;
Mixing it with the light Now that we got our noise value and our light let’s mix them! The idea is to apply less noise where the light value is stronger (1.0 == white) and more noise where the light value is weaker (0.0 == black). We already have our light value, so let’s just multiply the texture value with that:
colorNoise *= light_value.r;
You can see how the light affects the noise now, but this doesn’t look very strong. We can accentuate this value by using an exponential function. To do that in GLSL (the shader language) you can use pow(). It’s already included in shaders, here I used the exponential of 5.
colorNoise *= pow(light_value.r, 5.0);
Then, let’s enlighten the noise color effect like so:
vec3 colorNoise = vec3(snoise2(uv) * 0.5 + 0.5);
To gray, right? Almost there, let’s re-add our beautiful color that we got from the start. We can say that if the light is strong it will go white, and if the light is weak it will be clamped to the initial channel color of the sphere like this:
gl_FragColor.r = max(textureNoise.r, uColor.r);
gl_FragColor.g = max(textureNoise.g, uColor.g);
gl_FragColor.b = max(textureNoise.b, uColor.b);
gl_FragColor.a = 1.0;
Now that we have this Material ready, we can apply it to any object of the scene:
Congrats, you finished the first way of doing this effect!
- Starting from MeshLambertMaterial shader
This way is simpler since we’ll directly reuse the
MeshLambertMaterialfrom Three.js and apply our grain in the fragment shader. First let’s create a basic scene like in the first method. You can take this repository, and start from thesrc/js/Scene.jsfile to follow this second method.
Copy and paste MeshLambertMaterial
In Three.js all the Materials shaders can be found here. They are composed by shunks (reusable GLSL code) that are included here and there in Three.js shaders. We’re going to copy the MeshLambertMaterial fragment shader from here and paste it in a new fragment.glsl file.
Then, let’s add a new ShaderMaterial that will include this fragmentShader. However, for the vertex, since we’re not changing it, we can just pick it directly from the lib THREE.ShaderLib.lambert.vertexShader.
Finally, we need to merge the Three.js uniforms with ours, using THREE.UniformsUtils.merge(). Like in the first method, let’s use the sphere color uColor, uNoiseCoef to play with the grain effect and a uNoiseScale for the grain size.
``` import fragmentShader from './fragmentShader.glsl' ...
this.uniforms = THREE.UniformsUtils.merge([ THREE.ShaderLib.lambert.uniforms, { uColor: { value: new THREE.Color(0x51b1f5) }, uNoiseCoef: { value: 3.5 }, uNoiseScale: { value: 0.8 } } ])
const material = new THREE.ShaderMaterial({ vertexShader: THREE.ShaderLib.lambert.vertexShader, fragmentShader: glslify(fragmentShader), uniforms: this.uniforms, lights: true, transparent: true }) ```
Note that we’re importing the fragmentShader using glslify because we’re going to use the same simplex noise 2D from the first method. Also, the lights parameter needs to be set to true so the materials can reuse the value of all source lights of the scene.
Add our custom grain light effect to the fragmentShader
In our freshly copied fragment shader, we’ll need to import the 2D simplex noise using the glslify and glsl-noise libs. #pragma glslify: snoise2 = require(glsl-noise/simplex/2d).
If we look closely at the MeshLambertMaterial fragment we can find a outgoingLight value. This looks very similar to our light_value from the first method, so let’s apply the same 2D grain shader effect to it:
``` // grain vec2 uv = gl_FragCoord.xy; uv /= uNoiseScale;
vec3 colorNoise = vec3(snoise2(uv) * 0.5 + 0.5); colorNoise *= pow(outgoingLight.r, uNoiseCoef); ```
Then let’s mix our uColor with the colorNoise. And here is the final fragment shader:
```
pragma glslify: snoise2 = require(glsl-noise/simplex/2d)
... uniform float uNoiseScale; uniform float uNoiseCoef; ... // write this the very end of the shader // grain vec2 uv = gl_FragCoord.xy; uv /= uNoiseScale;
vec3 colorNoise = vec3(snoise2(uv) * 0.5 + 0.5); colorNoise *= pow(outgoingLight.r, uNoiseCoef);
gl_FragColor.r = max(colorNoise.r, uColor.r); gl_FragColor.g = max(colorNoise.g, uColor.g); gl_FragColor.b = max(colorNoise.b, uColor.b); gl_FragColor.a = 1.0; ```
Add any Three.js lights
No light? Let’s add some THREE.SpotLight in the scene in src/js/Scene.js file.
const spotLight = new THREE.SpotLight(0xff0000)
spotLight.position.set(0, 5, 4)
spotLight.intensity = 1.85
this.scene.add(spotLight)
And here you go:
You can also play with the alpha value in the fragment shader like this:
gl_FragColor = vec4(colorNoise, 1. - colorNoise.r);
And that’s it! Hope you enjoyed the tutorial and thank you for reading.
Resources * https://webglfundamentals.org/ * https://www.behance.net/gallery/106782599/Risograph-Grain-Effect-for-Photoshop
The post Creating a Risograph Grain Light Effect in Three.js appeared first on Codrops.
Another month has passed and we have been busy collecting good inspiration for you! Here’s a fresh roundup of UI interaction shots and animations from the finest designers on Dribbble.
Hope you enjoy it and thanks for checking by!
TRUE Initial Concept by green chameleon
Red Rocket – Review by Marvin Schwaibold
Balart studio menu by Ilsaf Yarullin
2 years by Mariano Meijome
Tod’s Academy – All Projects by Basilico
Procedural Grid by Niccolò Miranda
VILDMARK* – Home Page Card Hover by Vivien Cseresznyés
Voxel NFT by Anatoliy
Söhne Website by Kévin Gautier
JUO Studio Webflow Website by Halo Dev
365 Magazine by Ruslan Siiz
Homepage Animation for Melbourne Wooden Showroom by Vitalii Burhonskyi
Om Swami – Official Website by Niccolò Miranda
Landingpage carousel by Jonas Emmertsen
Moooji.co by Slava Kornilov
Experimental Nike redesign v.2 by Pauline D.
Cyber // E-commerce Website by blacklead studio
Lazarev. | WE’RE BACK IN BUSINESS by Lazarev. ux/ui
3D Animation Homepage For A Creativity Workshop Promo by Vitalii Burhonskyi
Immo Carriere – Web Design for HR & Recruiting Agency by Outcrowd
Neringa Hotel Website by Juste Navickaite
The post UI Interactions & Animations Roundup #22 appeared first on Codrops.
Native web components have been here for a while, but they still seem like the new kid on the block. Mainly due to the fact that they have a high barrier to entry, notably for beginners, and don’t have most of the features from the more established front-end frameworks. Nonetheless, they can be useful, especially for those who want to create framework-agnostic and reusable components. Today we will build some native web components with Minze, a simple JavaScript framework that makes it a breeze to create native web components.
Let’s get started!
Prior knowledge This tutorial should be quite easy to follow for anybody familiar with the basics of HTML, CSS and JavaScript. Advanced knowledge in those fields is not required.
Outline We will be building several web components for a fictive Smart Home dashboard application. You will learn some basic concepts of web components and how to create them with Minze. During this tutorial we will build 3 Components:
- An accordion – for showing and hiding content.
- A switch – that toggles between two states, exacltly like a light-switch.
- A card – a simple encapsulated component that can be fed with content externaly
Following along You can follow along in any environment by including a CDN link of Minze or by using this Codepen with the preloaded Minze script.
```
```
Accordion Our first component is an accordion. It can be used to toggle content visibility.
- Creating and registering the component
First, we need to extend from the
MinzeElementclass to create our component. Then we use thedefinemethod of the said component to register it. The component will be automatically registered in dash-case derived from its class name:sh-accordion. Web components should always consist of at least two words to prevent clashing with build-in html-components.
JavaScript
``` class ShAccordion extends MinzeElement { // ... }
ShAccordion.define() ```
HTML Element
```
```
- Properties & Methods
Next, we define the properties and methods of our component.
reactivedefines well you guessed it, reactive properties, when they change a template re-render will be triggered. The first argument of the nested array is the name of the property, the second is the initial value.toggleOpenis a method that will toggle theopenproperty between true and false.
``` class ShAccordion extends MinzeElement { reactive = [['open', false]]
toggleOpen = () => this.open = !this.open }
ShAccordion.define() ```
- HTML
Here we are defining the
htmlproperty as an arrow function for rendering the encapsulated HTML of the component. The template includes aslottag that can be filled in when the component is used.
``` class ShAccordion extends MinzeElement { // previous code ...
html = () => `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" fill="currentColor" class="arrow">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
<slot name="content"></slot>
` }
ShAccordion.define() ```
- CSS
Styling can be added by using the
cssproperty. We are using the:hostpseudo-class selector to style the component and the::slotedCSS selector to style the externally inserted content. Note the use of ternary operators to conditionally apply styling based on the state of theopenproperty.
``` class ShAccordion extends MinzeElement { // previous code ...
css = () => ` :host { background: rgb(228 228 231); font-family: sans-serif; border-radius: 2px; cursor: pointer; }
.title {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
user-select: none;
padding: 16px;
}
.arrow {
transition: transform 0.2s ease-in-out;
transform: ${this.open ? 'rotate(180deg)' : 'rotate(0)'};
}
::slotted([slot=content]) {
display: ${this.open ? 'block' : 'none'};
padding: 16px;
}
` }
ShAccordion.define() ```
- Event listeners
Finally, we are adding a click event listener. The
eventListenersproperty defines one or more event listeners inside the component. We are attaching a click handler to the title. The first argument of the nested array is a CSS selector, the second is the event type and the third is a callback function that runs when the title is clicked.
``` class ShAccordion extends MinzeElement { // previous code ...
eventListeners = [['.title', 'click', this.toggleOpen]] }
ShAccordion.define() ```
Result Here is the full implementation of the accordion component.
See the Pen
ShAccordion by Sergej Samsonenko (@sergejcodes)
on CodePen.light
Switch Next up we will build the switch component.
- Creating and registering the component
First, we need to extend from the
MinzeElementclass to create our component. Then we use thedefinemethod of the said component to register it. The component will be automatically registered in dash-case derived from its class name:sh-switch.
JavaScript
``` class ShSwitch extends MinzeElement { // ... }
ShSwitch.define() ```
HTML Element
<sh-switch></sh-switch>
- Properties & Methods
Next, we need to define the properties and methods for our component.
reactivedefines reactive properties, when they change a template re-render will be triggered. The first argument of the nested array is the name of the property, the second is the initial value.toggleActiveis a method that toggles theactiveproperty between true and false.
``` class ShSwitch extends MinzeElement { reactive = [['active', false]]
toggleActive = () => this.active = !this.active }
ShSwitch.define() ```
- HTML
Here we are defining the
htmlproperty as an arrow function that holds the template of the component.
``` class ShSwitch extends MinzeElement { // previous code ...
html = () => <div class="indicator"></div>
}
ShSwitch.define() ```
- CSS
Now we are adding styling. We are using the
:hostpseudo-class selector to style the component. Note the use of ternary operators to conditionally apply styles based on the state of theactiveproperty.
``` class ShSwitch extends MinzeElement { // previous code ...
css = () => ` :host { width: 48px; height: 25px; display: flex; background: rgb(255 255 255); border: 1px solid rgb(228 228 231); border-radius: 9999px; cursor: pointer; transition: all 0.2s ease-in-out; padding: 2px; }
.indicator {
width: 20px;
height: 20px;
background: ${this.active ? 'rgb(161, 161, 170)' : 'rgb(228 228 231)'};
border-radius: 9999px;
position: relative;
transform: translateX(${this.active ? 'calc(100% + 2px)' : '0'});
transition: all 0.2s ease-in-out;
}
` }
ShSwitch.define() ```
- Event listeners
Finally, we are adding event listeners. The
eventListenersproperty can define multiple event listeners inside the component. We are attaching a click handler to the element. The first argument of the nested array is a CSS selector, the second is the event type and the third is a callback function.
``` class ShSwitch extends MinzeElement { // previous code ...
eventListeners = [[this, 'click', this.toggleActive]] }
ShSwitch.define() ```
Result Below is the full implementation of the switch component.
See the Pen
ShToggle by Sergej Samsonenko (@sergejcodes)
on CodePen.light
Card Our last element will be a card component.
- Creating and registering the component
First, we need to extend from the
MinzeElementclass to create our component. Then we use thedefinemethod of the said component to register it. The component will be automatically registered in dash-case derived from its class name:sh-card.
JavaScript
``` class ShCard extends MinzeElement { // ... }
ShCard.define() ```
HTML Element
``` <sh-card top-line="Outside" headline="Temperature" value="12°c" background="linear-gradient(220.64deg, #C8F5FF 0%, #B4B4FF 100%)"
```
- Attributes Next, we need to define the attributes that can be added to the component.
``` class ShCard extends MinzeElement { attrs = ['top-line', 'headline', 'value', 'background'] }
ShCard.define() ```
- HTML
Here we are defining the
htmlproperty as an arrow function that holds the template of the component.
``` class ShCard extends MinzeElement { // previous code ...
html = () => `
<slot>
<div class="value">${this.value ?? ''}</div>
</slot>
` }
ShCard.define() ```
- CSS
Adding styling for multiple nested elements inside the component. We are using the
:hostpseudo-class selector to style thesh-cardelement.
``` class ShCard extends MinzeElement { // previous code ...
css = () => ` :host { width: 200px; height: 180px; display: flex; flex-direction: column; flex-grow: 1; background: ${this.background ?? 'transparent'}; font-family: sans-serif; border-radius: 2px; padding: 24px 24px 16px; }
.top-line {
font-size: 16px;
margin-bottom: 2px;
}
.headline {
font-size: 20px;
font-weight: bold;
}
.value {
font-size: 36px;
font-weight: bold;
margin-top: auto;
}
::slotted(*) {
margin-top: auto;
margin-bottom: 12px;
}
` }
ShCard.define() ```
Result Here is the full implementation of the card component.
See the Pen
ShCard by Sergej Samsonenko (@sergejcodes)
on CodePen.light
Conclusion As you can probably tell by now creating web components isn’t really rocket science. To see even more examples view the demo accompanied to this tutorial:
The post Creating Native Web Components appeared first on Codrops.
Inspirational Website of the Week: CIRCUS Shanghai Brilliant colors and an engaging scroll experience combined with great typography. Our pick this week.
Get inspired
Jesse’s Ramen The fantastic website by Jesse Zhou: an immersive 3D ramen shop made with Three.js and Blender.
Check it out
Gooey Warping SVG Numbers A tutorial on how Fabio Ottaviani cleverly uses SVG filters and other SVG tricks to animate this fun countdown.
Check it out
r3f Unshift Effect A beautiful effect made with React Three Fiber (Three.js).
Check it out
Writing Logic in CSS A very interesting article on how CSS can be used to program a smart, flexible style system.
Check it out
Huemint Huemint uses machine learning to create unique color schemes for your brand, website or graphic.
Check it out
Annual Awards 2021 Discover the winners of Awwwards from the past year.
Check it out
Lwder.js Easy-to-use, fast and lightweight loading animations.
Check it out
Paint Jordan Singer made a modern MacPaint version using tldraw.
Check it out
Handpicked specialty coffee roasters Tobias Reich’s latest project. Check out the thread on some background.
Check it out
Garbage A beautifully made website to raise awareness on the global garbage problem.
Check it out
Almond.css A collection of CSS styles to make simple websites look nicer.
Check it out
5 things you don’t need JavaScript for Learn some of the things you can achieve without JavaScript. By Steven Waterman.
Check it out
Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think John Rhea explores some interesting pseudo-classes and shows what we can do with them.
Read it
The Most Popular Front-end Frameworks in 2022 An article on current front-end trends and the pros and cons of each framework.
Read it
Don’t try this at home: CSS _as_ the backend: Introducing Cascading Server Sheets Wait, what? Yes, you read that right! Pascal Thormeier is doing the unthinkable and is having fun! How dare he?!
Read it
Google Tag Manager, the new anti-adblock weapon The “Server-Side Tagging” version of the Google tool allows site owners to bypass browser and other adblocker protections which puts privacy for users at risk.
Read it
Montblanc Legend Red – The Race A great collaboration between Merci-Michel and interparfums: a futuristic racing game for Montblanc Legend Red.
Check it out
Responsive and fluid typography, the easy way A very nice demo that shows how to pull off fluid typography without media queries using some math.
Check it out
My Approach to Automatic Musical Composition Flujoo shares his approach to automatic musical composition, including the theory, the algorithm, and a Python package implementation ch0p1n.
Read it
Andromeda Invaders A 1980s-arcade-style game written using HTML5, Canvas, and Web Audio.
Check it out
A new year, a new MDN The MDN website has changed to create a more holistic experience for its users. Hermina from Mozilla explains.
Read it
React Awesome Shapes Insert awesome shapes into your React site with ease.
Check it out
Web Animation Performance Fundamentals Reza Lavarian dives deep into performance fundamentals of websites.
Read it
From Our Blog Hover Preview Effect with Mini Map An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
Check it out
The post Collective #701 appeared first on Codrops.
I find mini maps really exciting. These tiny UI components can give visual feedback on where we are on a page, e.g. what we are hovering or viewing. Sometimes this helps create a representation of content and ease navigation. But we can also go crazy and try some experimental stuff with it! And that’s exactly what I would like to share with you today.
The main idea is to use a hover effect in order to preview some content. Like a giant tooltip. Since this large preview will cover the whole page (including the thing we are hovering) we use a mini map to guide us. This map shows where we are with the mouse.
The design and animation for this demo is based on the beautiful website of La Culture des Lieux (by extra l’agence). Have a look at it, it’s a wonderful scroll-based design with lots of creative animations. The epic photography used in this demo are by Frankie Cordoba.
The initial view of our demo is a set of three thumbnails:
When we hover over any of the thumbs, we animate some content in:
We also show a mini map that maps the movements of the pointing device to a small representation of the three thumbnails. This indicates where we are at the moment. As soon as we move the mouse away from the thumbnail, the content pops back in and we see the initial thumbnails view.
Have a look at the entire interaction flow:
There are two demos. The first one hides the cursor on hover. The second one shows a custom cursor with a larger appearance while hovering the thumbnails.
Note that this is a highly experimental concept! Obviously this should be some kind of add-on to a design. For mobile, some other interaction and solution would have to be used.
If you are in love with mini maps like me, you might enjoy the Grid Zoom Layout that contains a tiny grid version when opening the content.
Update: we’ve made some effect variations! Have a look at the demos:
- Sketch 001: Repetition Hover Effect (Round)
- Sketch 002: Repetition Hover Effect (Square)
- Sketch 003: Repetition Hover Effect (Rotated)
- Sketch 004: Repetition Hover Effect (Filter)
The post Hover Preview Effect with Mini Map appeared first on Codrops.
Inspirational Website of the Week: Christou 1910 DAYS Very happy and fresh indeed: a joyful horizontal scrolling design with so many amazing details. We’re in love!
Get inspired
Our Sponsor Build Using the DoorDash API DoorDash Developer allows you to easily integrate delivery services into your website or app. We’ve created the API, you set the rules, offer delivery on your terms and only pay for what you use. And integration is incredibly easy.
Get Started
A Complete Guide to CSS Cascade Layers A comprehensive guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity. My Miriam Suzanne.
Read it
Calculate the Specificity of a CSS Selector with @bramus/specificity A way to calculate specificity from within your own JavasScript code. By Bramus Van Damme.
Check it out
CSS Quick Tip: Animating in a newly added element Learn to leverage the natural behavior of attaching animation via CSS keyframes to reveal new elements. By Stephanie Eckles.
Read it
Painting SVG Paths with Masks See how Tom Miller made a beautiful painterly effect with SVG paths, an image mask, and GSAP. By Alex Trost.
Read it
IRA Design With this tool you can build and customize your own illustrations.
Check it out
Include diagrams in your Markdown files with Mermaid Learn how to use Mermaid, a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser.
Read it
Flexbox Dynamic Line Separator Ahmad Shadeed shows a clever way to use flexbox’s default stretching behavior to create a dynamic line separator.
Read it
MicroWaver 59 A fun game: Fifty-nine seconds of delicious, electromagnetic horsepower. Are you hungry for the future? Insert a coin and wave away inside this hyper-interactive food machine. By Pink Yellow.
Check it out
Add Responsive-Friendly Enhancements to ‘details’ with ‘details-utils’
Zach Leatherman shares some handy add-on utilities to enhance
Read it
Infinite Passerella Infinite Passerella is an infinite fashion show made by Lusion as a Monthly Experiment.
Check it out
Using mask as clip-path
Yuan Chuan explains how to use mask rather than clip-path to “clip” elements in a responsive manner.
Read it
Control CSS cascade with cascade layers David Omotayo writes how to use the CSS cascade layers @layer at-rule to address conflicts between selector specificity and order of appearance.
Read it
Shaders and Gradients The second issue of Offscreen Canvas is about learning shaders and explores why gradients are so important, and more.
Read it
Super Mario Scrollable Timeline A fantastic horizontal scrolling timeline of Super Mario made by Adam Kuhn.
Check it out
MonoLisa A font family designed for software developers.
Check it out
Google Search Is Dying A very interesting article on how Reddit is currently the most popular search engine and how Google Search is not working anymore the way it should.
Check it out
Jigglypuff (づ｡◕‿‿◕｡)づ ♫ ♫ ♫ A super-cute demo by Nico Fonseca.
Check it out
An Auto-Filling CSS Grid With Max Columns of a Minimum Size Mike Herchel shares a new auto-filling CSS Grid technique used within the Drupal 10 core.
Read it
In case you didn’t know about it: jless is a command-line JSON viewer designed for reading, exploring, and searching through JSON data.
Check it out
From Our Blog Inspirational Websites Roundup #34 A fresh collection of new websites to get you up-to-date with the latest web design trends and inspire you.
Check it out
From Our Blog Noise Pattern Reconstruction from Monopo Studio In this coding tutorial you learn how to recreate the noise pattern seen on the Monopo Studio website using Three.js
Check it out
From Our Blog Repetition Image Hover Effects A simple and fun hover effect with repeated image layers that get scaled up and down.
Check it out
The post Collective #700 appeared first on Codrops.
The other day, I encountered a very interesting animation. It’s kind of a repetition effect on an image where the same gets scaled, layer by layer. This is Eva Habermann’s website where this element has that exact effect:
While this is a scroll based animation, there was also a hover effect somewhere, I just can’t recall where! If you’ve seen it, please let me know so that I can add it here.
There are some interesting parameters that we can play with in order to create different touches, all with a unique look and feel, so this is what I came up with, hope you enjoy it!
The way that we can define the parameters is as follows:
```
```
We make the following structure out of this:
```
```
Then we animate the “image_element” divs according to the parameters set.
Here’s a short explanation of the parameters:
```
data-repetition
// this is so that we know we have to apply the effect
data-repetition-elems="4"
// number of inner elements/images
data-repetition-animate="scale"
// property to animate: scale, scaleX, scaleY
data-repetition-origin="50% 50%"
// transform origin
data-repetition-stagger="-0.1"
// GSAP animation stagger value between each inner image
data-repetition-initial-scale="2"
// this is the initial scale that is applied to the first inner child
data-repetition-duration="0.8"
// animation duration
data-repetition-ease="power2.inOut" // animation ease ```
There’s lots of things to experiment with here, so I hope you can use this to have some fun with it!
Here’s our first example:
The main idea is to have repeated layers of the same image and do something to them, like scale them up and down, like in this case. There’s a little twist added here, which is that the first and last layer also have a zoom effect on the image. Changing the transform origin, can also add a nice touch to it:
I really hope you enjoy this and find it useful!
Thanks for checking by and if you want to support our work, please share and give us a follow @codrops!
The post Repetition Image Hover Effects appeared first on Codrops.
In this new ALL YOUR HTML coding session we’ll be reconstructing the beautiful noise pattern from Monopo Studio’s website using Three.js and GLSL and some postprocessing.
Monopo Studio: https://twitter.com/monopo_en
Developer: https://twitter.com/bramichou
This coding session was streamed live on February 20, 2022.
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post Noise Pattern Reconstruction from Monopo Studio appeared first on Codrops.
Today I’m super excited to share this fresh collection of uber-creative websites with you! Softness, roundness, washed-outness seems to be something becoming more trendy these days. Lovely retro fonts are making a comeback and everything has a more casual touch.
I hope you enjoy this collection and get up-to-date & inspired!
House of Gucci
Decor Systems
Om Swami
Picsart Unboring
Engineered Floors
ThoughtLab
Sougen
Stink Studios
Garden Eight
Ubac
Proto Clothes Rail
WILDCATTER
Sizzer
Robin Payot
16gen
Иероним Босх
Pro Loco di Castrovillari
The Nifty Portal
reynato.tokyo
Jade Purple Brown
Howdy Design Family
Silvia Sguotti
Made to Be Found
Argor-Heraeus
Nathan Riley
Wanderful Chalet
imotion factory
Tenuta Sant’Apollonia
Youness Benammou
Demilie Creamed Honey
Sea Mirror
Magical Reflections
Alef Estate Development Company
re_
The post Inspirational Websites Roundup #34 appeared first on Codrops.
Inspirational Website of the Week: ThoughtLab Very sharp typography and an interesting bubble motif. Our pick this week.
Get inspired
Offscreen Canvas A fantastic new weekly WebGL and creative coding newsletter. By Daniel Velasquez.
Check it out
The State of JS 2021 The 2021 edition of the annual survey about the latest trends in the JavaScript ecosystem.
Check it out
gsap-video-export A very handy tool for easily exporting GreenSock (GSAP) animations to video. By Chris Johnson.
Check it out
Hello, CSS Cascade Layers In this article, you’ll learn how cascade layers work, and how they will help you write CSS with more confidence, along with use-cases and examples.
Read it
Cowsay A supercool cowsay web interface made with Svelte and HTML Canvas. Copy the ASCII art, or save it as an image. By Shajid Hasan.
Check it out
Getting Started With the File System Access API In this article you’ll learn all about the File System Access API, the web API that allows read and write access to a user’s local files. By Charlie Gerard.
Check it out
Minze Minze lets you rapidly build native web components. Create encapsulated, reusable, cross-framework web components and scale your component library with ease.
Check it out
CSS Polka Dot Generator A great tool for generating CSS-only polka dot patterns and corresponding CSS custom variables for you to reuse.
Check it out
Ripped paper A beautiful ripped paper hover effect made with OGL. The code can be found here. By Clément Roche.
Check it out
Move over JavaScript: Back-end languages are coming to the front-end A new crop of tools is helping developers build web UI components on the backend, all without JavaScript.
Read it
pppointed An SVG arrow builder where you can customize the arrowhead style, curves of the arrow and add some stylistic dashes.
Check it out
UI Icons Many essential icons for user interfaces, based on a tiny 14px grid. Licensed under CC 4.0.
Check it out
Maximilian Berndt Creative Developer Maximilian Berndt has a beautiful new gallery view of his experiments made with OGL.
Check it out
Tally Forms In case you didn’t know about it: a code-less forms & surveys maker that is free.
Check it out
hue.tools An open source color toolkit with color mixer, blender, info and modifier.
Check it out
How does UTF-8 turn “” into “F09F9882”? Seth Michael Larson explains how UTF-8 works in wonderful diagrams.
Read it
A shell command to create JSON: jo Jan-Piet Mens created “jo”, a very useful shell command to create JSON easily.
Check it out
Jahneration Game A nice game created already a while back but put live now for Jahneration’s concert. Read more about it here.
Check it out
Digital Curator An impressive fine art exploration by computer vision.
Check it out
Sha256 Algorithm Explained A visual step-by-step explanation of the Sha256 algorithm.
Check it out
Single-file PHP file manager, browser and photo gallery Files is a single-file PHP app that can be dropped into any folder on server, instantly creating a beautiful gallery of folders, files and photos.
Check it out
The post Collective #699 appeared first on Codrops.
Inspirational Website of the Week: Sizzer So sexy, so smooth and so bold! The website of Sizzer stands out with a supercool design and lots of engaging details.
Get inspired
Creating Generative SVG Grids Learn how to create colorful, generative grid designs with JavaScript and SVG!
Read it
Aspect Ratio is Great An article by Michelle Barker on the CSS aspect-ratio property and how useful it is.
Read it
How to Favicon in 2022 Andrey Sitnik’s article on modern favicon usage with six files that fit most needs.
Read it
How does !important actually work? (It’s not what you think!) Una Kravets explains how CSS !important does more than just increase the important of a style rule.
Watch it
Replace JavaScript Dialogs With New HTML Dialog Mads Stoumann explains how to replace JavaScript dialogs with the HTML dialog element with the same functionality as the alert(), confirm(), and prompt() methods.
Read it
Stylo Stylo is an open source WYSIWYG interactive editor for JavaScript with no dependencies.
Check it out
CSSUI CSSUI is a collection of interactive user interface components realized in pure CSS.
Check it out
PHP: The Right Way An easy-to-read, quick reference for PHP best practices, accepted coding standards, and links to authoritative PHP tutorials around the Web.
Check it out
Building an adaptive favicon A foundational overview of how to build an adaptive favicon. By Adam Argyle.
Read it
Memes Have a laugh at the ridiculousness of design culture with these well designed memes.
Check it out
Erosion A fantastic demo made by Toshiya Marukubo
Check it out
The Complicated Futility of WordPress Dan Devine’s interesting insights on why his team is saying ‘goodbye’ to WordPress as it moves to “full site editing”.
Read it
Fluid type sizes and spacing Piper Haywood shares a fluid type and spacing system she used in her recent projects.
Read it
Mailwind Want to use Tailwind CSS to design HTML emails? Mailwind makes it possible.
Check it out
Building like it’s 1984: A comprehensive guide to creating intuitive context menus An article on the basics, as well as some more advanced interactions, for building seamless context menus. By Michael Villar.
Read it
DarkPattern.games Game reviews to help you find good games that don’t trick you into addictive gaming patterns.
Check it out
Inside the JavaScript Engine Learn about the JavaScript engine, what it does and how it works in this article by Aditya Yaduvanshi.
Read it
Robin Payot A wonderful portfolio and WebGL experience by creative developer Robin Payot.
Check it out
Hibiki HTML Create modern, dynamic, frontend applications without scaffolding or setting up a JavaScript stack.
Check it out
Clock A super awesome clock demo made by saharan.
Check it out
Garden Eight The amazing redesign of Garden Eight’s website is a great source of inspiration.
Check it out
The post Collective #698 appeared first on Codrops.
Inspirational Website of the Week: Silvia Sguotti Bold, fresh and sexy: Silvia Sguotti’s website shines with a unique design. Our pick this week.
Get inspired
Creating a Schema-Based Form System Tania Rascia shows how to make a form system where we can simply define the schema of a form and pass it into a component that takes care of all the common form needs.
Read it
Use Cases For CSS fit-content Ahmad Shadeed explores some practical use cases for fit-content.
Check it out
Our Sponsor Instant websites for your clients with Divi Layout Packs With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out
The baseline for web development in 2022 Alan Dávalos’ in-depth analysis about the big changes in the web between 2021 and 2022 and how those affect the way we should face web development as a whole.
Read it
Welcoming the new Search Console URL Inspection API Read all about the new Google Search Console URL Inspection API, which gives programmatic access to URL-level data for properties you manage in Search Console.
Read it
How to Cycle Through Classes on an HTML Element Chris Coyier describes 8 ways to cycle through classes on an element.
Read it
Preventing smooth scrolling with JavaScript Kilian Valkhof shows how to turn smooth scrolling off for a specific scroll even if it’s turned on in the CSS.
Read it
Inclusive Design Read about inclusive design which describes methodologies to create products that understand and enable people of all backgrounds and abilities.
Check it out
Letmescroll.js An easy.to-use scroll library with standardized events, shortcuts and API.
Check it out
What is Generative Art? Amy Goodchild’s interesting artice on what generative art can be.
Read it
More to give than just the div: semantics and how to get them right A write-up of a great talk that Hidde de Vries did in November at Web Directions and Beyond Tellerrand.
Read it
California Design System The California Design System makes it easy for state digital teams to build accessible, consistent, and performant services and products. Interesting to learn from.
Check it out
Making the web better. With blocks! Joel Spolsky shares an interesting idea: making blocks interchangeable and reusable across the web.
Read it
A Primer on Bézier Curves A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them.
Read it
dddraw A free and simple online drawing tool that makes it easy to freehand draw SVGs.
Check it out
The Nifty Portal A cool geeky website design with some glitchiness.
Check it out
Vertex Handcrafted 3D icons that can be fully customized online.
Check it out
Europe’s Move Against Google Analytics Is Just the Beginning Austria’s data regulator has found that the use of Google Analytics is a breach of GDPR. In the absence of a new EU-US data deal, other countries may follow.
Read it
SkyBot Super cool project: Luke Berndt made a system that shoots photos of all the airplanes that fly over his house.
Check it out
From Our Blog UI Interactions & Animations Roundup #21 A new collection of the most interesting and creative motion designs and animations from the last couple of weeks.
Check it out
The post Collective #697 appeared first on Codrops.
We’re back with a new roundup of the latest, hottest and most creative motion designs from the last month. This time we feel the roundness is going on in many designs and the animations based on these shapes are super interesting.
Remember, when those distortions took off like a rocket ship? Well, those are much more toned down now and we see a lot more sophisticated and meaningful warping and curving going on, which is a good thing.
I hope you enjoy this collection and get up to date with the latest animation trends in web design!
MKTLM by Roman Salo
Interactive Project Index by Luca Fasoli
radical. by Andrew Baygulov
Explorway Web Design by Juste Navickaite
Woven Planet by Glenn Catteeuw
condé vilde // by Andrew Baygulov
Looks like it’s going to rain… by Ivan Gorbunov
Jarang Macul – Landing Page Animation by Risang Kuncoro
Moooji NFT by Slava Kornilov
ATLAS by Zhenya Rynzhuk
Editorial Landing Page – Cole Haan by Francesco Zagami
m.vertigo | Gallery by Ivan Gorbunov
ward // by Andrew Baygulov
Jam of the Week | 156 by Britton Stipetic
BWE e-commerce website by Layo
Dala by green chameleon
Tuning In by Ali Zafar Iqbal
The Heritage Museum Landing Page Animation by Vitalii Burhonskyi
Frøya // by Andrew Baygulov
Expo Dubai 2020 – Canada experience (Homepage) by Nicolas Bonté
365 Magazine by Ruslan Siiz
ZeroWaste – Web Design for Recycling Company by Outcrowd
The post UI Interactions & Animations Roundup #21 appeared first on Codrops.
Inspirational Website of the Week: Accueil – Wanderful Chalet A fantastic mélange of colors, typography and layouts that just work so well. Our pick this week.
Get inspired
Our Sponsor Instant websites for your clients with Divi Layout Packs With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out
Crafting Component Libraries: The Elements Jon Yablonski takes you through the process for crafting the foundational elements that make up a component library based on design fundamentals that can grow and evolve to fit the needs of any interface.
Read it
What’s New Since CSS3 in 2015? A great summary about all the great new stuff that came to CSS in the past couple of years.
Check it out
Here’s what I didn’t know about :where() Manuel Matuzović explains why the where() pseudo-class might be more useful than originally thought.
Read it
Google Analytics declared illegal in the EU Austria’s data protection authority has found that Google Analytics is illegal to use on European websites.
Check it out
PHP in 2022 An article about all the interesting new things PHP has to offer.
Check it out
Pika A free, open-source app to quickly generate beautiful screenshots.
Check it out
Make Free Stuff Max Böck on web3, Wordle and the radical concept of building things for free.
Read it
The Old Internet Shows Signs of Quietly Coming Back Thanks to the increasing disillusionment with today’s Internet, many individuals are creating their own websites.
Read it
BUILD IT Academy A hidden job offer in the website source! Can you find it?
Check it out
Frontend Predictions for 2022 Jay Freestone’s thoughts on what we might see in the coming year, including the return of micro-frontends, functional JavaScript & the demise of the Jamstack as we know it.
Read it
clay.css Adrian Bece made this CSS library for adding inflated fluffy 3D claymorphism styles to any HTML element.
Check it out
Charm Charming libraries and tools to make the command line glamorous.
Check it out
How Apollo GraphQL had a major impact on our microsite performance Berry de Witte writes about how using GraphQL was dragging down performance for a microsite.
Read it
The last design you’ll ever make Designing from cradle to grave is no longer good enough. We need to postpone that grave as long as possible. This is how to design for a right to repair.
Check it out
threejs-starter Francesco Michelini recently updated his general template for ThreeJS applications.
Check it out
Matrix Multiplication An interactive matrix multiplication calculator for educational purposes.
Check it out
Div divisiveness
An article by Scott O’Hara on the advantages and disadvantages of using div elements.
Read it
From Our Blog Background Shift Animation with CSS Blend Modes A background color shift transition using CSS Blend Modes and a multi-layer animation.
Check it out
The post Collective #696 appeared first on Codrops.
Some days ago I encountered the beautiful website of Alef Estate made by the amazing folks of Advanced Team. The site has so many interesting details and interactions! What strikes me the most is the changing cursor that also has a blend mode. When scrolling further down, the whole page switches to a black background with a kind of slice animation. I think this is a super interesting effect! It’s the perfect excuse to code up a portfolio design and play with mix-blend-mode and some background trickery.
If you want to learn about CSS Blend Modes, check out the entry in our CSS Reference by Sara Soueidan: mix-blend-mode. It has lots of examples and demos.
I really hope you are enjoying this effect remake and experiment and find it interesting!
The post Background Shift Animation with CSS Blend Modes appeared first on Codrops.