Best of Codrops — 2023
- 1
- 2
Codrops·3y
Scroll-Based Layout Animations
The main idea is to switch the layout view while scrolling and keep the section pinned. We achieve this by combining GSAP’s ScrollTrigger and Flip which seamlessly transition the layout to a new design. This is partly inspired by this demo made by the folks of Framer University.
- 3
- 4
Creating Audio-Reactive Visuals with Dynamic Particles in Three.js
Learn how to create audio-reactive visuals with dynamic particles using Three.js. The tutorial covers initializing the scene, analyzing audio data, detecting tempo, creating procedural reactive particles, adding noise and colors, and bringing audio and visuals together.
- 5
- 6
- 7
On-Scroll SVG Filter Effect
The demo is to animate a mask shape that has a turbulence filter applied to it. Magically, this results in an apparent animation of the whole distortion around the image. We also use the Flip plugin to animate the split title to another place in the content while doing this.
- 8
Theatre.js Tutorial
The Theatre.js tutorial is a comprehensive tutorial on how to create stunning animation sequences. We will demonstrate how to animate a Three.js cube, integrate eye-catching visual effects, modify colors, experiment with HTML elements, and synchronize the animation with sound playback at specific intervals.
- 9
Building a WebGL Carousel with React Three Fiber and GSAP
Building a WebGL Carousel with React Three Fiber and GSAP. The article will be divided into four parts: Generating a 3D plane with a texture and adding a zoom effect to the plane. Implementing post-processing effects to enhance the carousel experience.
- 10
Animating Multi-Page Navigations with Browser View Transitions and Astro
Learn how to implement smooth transitions between pages in Astro using View Transitions. View Transitions make navigation seamless and effortless, reducing compatibility, performance, and accessibility issues. Find out about the performance impact, browser support, and design considerations for View Transitions.
- 11
- 12
Web Design & Development News: Collective #757
Share your insights on tools, processes, and habits that help you get more done in less time. Get inspired: Maximize your productivity as a developer and help shape the industry’s future. Participate in the Developer Productivity survey today to win amazon gift cards and other prizes worth over $200.
- 13
Cyberpunk inspired Three.js Scene with JavaScript and Blender
The 3D model was created using Blender3D and consists of basic rectangular shapes. These shapes were first solidified and subsequently duplicated numerous times, with adjustments made to their rotation and position in order to achieve a visually appealing circular pattern. With the model ready, it’s time to create a Three.js scene to load it.
- 14
- 15
- 16
Free AI Generated Images Vol. 1
Free AI Generated Images Vol. 1 is free to download and use in your personal and commercial projects under the CC BY 4.0 license. Use them in your web design mockups and client work or any other project. To download the images, click on the picture directly or on the link icon and it will open in a new tab.
- 17
Gooey Cursor Effect
The other day I visited Lorenzo Dal Dasso’s fantastic website and had a lot of fun with the cool cursor effect. The idea is simple: create lots of boxes and when we hover with the cursor, show them. Also apply a nice SVG gooey filter to them. Changing the filter and blend mode creates lovely variations.
- 18
- 19
- 20
Frontend Rewind 2023 – Day 01
Frontend Rewind 2023 is a special calendar dedicated to revisiting the highlights of 2023 in frontend development and web design. Each day, a curated selection of content is unveiled. The community discount for today is a 20% discount on a Club GSAP membership using the coupon code CODROPS20. The article 'Typographic Hierarchy in Print, Web & App Design' provides guidance on achieving better typographic hierarchy and enhancing important parts of a UI.
- 21
Recreating the Gradient Mask Hover Effect from Evervault
Recreating the Gradient Mask Hover Effect from Evervault's customer grid. The effect combines a fun typography animation with a moving gradient mask. Each item in the grid will contain a logo and some description. The element that will contain the changing code letters will be a division with the class.
- 22
- 23
- 24
- 25