Crafting a Scrollable and Draggable Parallax Slider

In this article, I’ll show you how to build a parallax slider with a fun reveal animation. I’ll be using GSAP, CSS Grid and Flexbox and I’ll assume that you have some basic knowledge on how to use these techniques. Besides that, I’ll be using a custom smooth scroll based on Virtual Scroll for a better experience. The article is split...

1d

Collective #637

Building TakeNote, a Notes App for Developers With GitHub Sync Tania Rascia shares how she built TakeNote, a clutter-free web-based notes app for developers. Check it out This content is sponsored via Syndicate Ads 11 Massive Cyber Monday 2020 deals (up to 94% off!) Only available for a limited time! Grab yours now...

2d

11 Massive Cyber Monday 2020 Deals With Up to 94% Off

Black Friday and Cyber Monday are two of the year’s main shopping events. For online shoppers they are anticipated to be as rewarding as ever. New and upgraded products often appear for the first time on Cyber Monday along with many longtime favorites. Web designers in particular will have an opportunity to purchase products or resources they...

2d

Building a Svelte Static Website with Smooth Page Transitions

Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions! In this live stream of ALL YOUR HTML, you’ll learn how image transitions with GLSL and Three.js work and how to build a static website with Svelte.js that will be using...

2d

Collective #636

Inspirational Website of the Week: Loftgarten Design excellence in every way: layout, typography, colors and interactions are just spot-on! Get inspired Our Sponsor The Divi Black Friday Sale Black Friday is the only time each year that we offer 25% off new Divi memberships and Divi membership upgrades and along with each purchase,...

6d

Inspirational Websites Roundup #20

It’s truly incredible how creativity does not know any limits! The sheer amount of super imaginative ideas in web design are mind-blowing. Every time we do the websites roundup and collect amazing designs over weeks, we can’t believe the variety and innovation in design. I’m very happy to share this set with you; it is a very special one! We...

1w

Image Stack Intro Animation

Today I want to share a simple intro animation with you. The concept is to first show an image stack and then animate each image to its position in the grid (or any other layout). For the first demo, I actually used a simple serial layout and added some smooth scrolling with Locomotive Scroll. The animations are powered by GSAP. The...

2w

Replicating the Icosahedron from Rogier de Boevé’s Website

Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions! In this live stream of ALL YOUR HTML, we’ll be replicating the beautiful icosahedron animation from Rogier de Boevé’s website. We’ll be using Three.js and GLSL to make things...

2w

Collective #635

Inspirational Website of the Week: Grove Lust Beautiful simplicity, unique colors and a fun interactive effect made us pick Grove Lust this week. Get inspired This content is sponsored via Syndicate Ads The #1 Leader in Heatmaps, Recordings, Surveys & More Hotjar shows you how visitors are really experiencing your website—without...

2w

UI Interactions & Animations Roundup #12

It’s time to share a new roundup of UI interaction and animation concepts with you! We’ve collected some fresh and super-hot shots that will give you an idea of current trends and some good motion inspiration. Check out those awesome icon animations, playful text warps and fun 3D rotations—they are super trendy these days! Glasses by Ruslan...

3w