collection | The Blog Pros

June 26, 2020

Inspirational Websites Roundup #16

Today, I have a fresh websites roundup for you, packed with really fantastic designs that will hopefully get you up-to-date on the current trends and inspire you for new projects.

We are always looking for new stuff so don’t forget to share any designs you like or created via @codrops.

And now, I hope you enjoy these brilliant web experiences as much as I do!

Evolution of Stock Photography Aesthetics

Mcube

The post Inspirational Websites Roundup #16 appeared first on Codrops.

June 22, 2020

With the fantastic ScrollTrigger plugin that the great folks of GSAP released some time ago, we’ve been blessed with many awesome scroll demos that are nothing short of creativity and that show what cool things are possible by simply scrolling a page. Take a look at these and other playful and inspiring demos; we hope you enjoy this special selection!

Interactive Password Validator

by Eren Guldas

Pure CSS solar system animation in 2D and 3D

by Yan Zhu

T-Shirt Cannon Button

by Jhey Tompkins

Responsive CSS Grid – Books

by Andy Barefoot

Password Reveal

by Mikael Ainalem

deconstructed

by Gerard Ferrandez

Who can get my blood?

by Romina

Balancing Moods

by Chris Gannon

The Oscars 2020

by Robert Borghesi and Valentino Borghesi

3D button

by Robin Delaporte

switch.css

by Sarah Fossheim

Animal Crossing: Isabelle’s Day Off ??(Pure CSS)

by Tee Diang

Painter

by Ricardo Oliva Alonso

Ghost at the Disco – by Anna the Scavenger

by Anna the Scavenger

PureCSS Gaze

By Diana Smith

Single div CSS “Six”

by Lynn Fisher

Water

by Kasper De Bruyne

boids

by Marius Ballot

sphere

by Giulian Drimba

ScrollTrigger Demo

by Mariusz Dabrowski

(v2) Paper plane button

by Aaron Iker

CSS Grid: Newspaper Layout

by Olivia Ng

Bouncing tab bar

by Aaron Iker

CSS Night Train Ride Animation

by Aysenur Turk

Bedroom Construction with threejs + GSAP

by Yiting Liu

Airplanes.

by Steve Gardner

Text Refraction

by Juan Fuentes

GSAP ScrollTrigger on Variable Fonts Perspective

by Pete Barr

Voyage Slider

by Sikriti Dakua

Checkboxes waves

by Louis Hoebregts

CasioPT-1.css

by Sarah Fossheim

2020.06.15

by Ikeda Ryou

slices

by Atrahasis

Little book of GSAP w/ ScrollTrigger

by Jhey Tompkins

ScrollTrigger – Highlight Text

by Ryan Mulligan

Book Store UI

by Aysenur Turk

The post Awesome Demos Roundup #16 appeared first on Codrops.

June 1, 2020

UI Interactions & Animations Roundup #7

A couple of weeks have past and a fresh collection of inspirational UI shots is waiting for you! This time the roundup comes with lots of sophistication in movements and more subtle distortion effects on images and typographic elements. Animated 3D objects give a touch of drama to interfaces; you’ll also see some of those.

Please enjoy this special collection and hopefully it will get your creative juices flowing!

M. Editorial Website Animation

by Zhenya Rynzhuk

Hestia

by Hrvoje Grubisic

The Secret Project — 001

by Aristide Benoist

Format Ikea planner inner page interaction

by Taras Migulko

Otherworldly the Blob in Action

by Efi Kabak

Furniture Ecommerce Website

by tubik

Nº1

by Slava Kornilov

Millie N. Portfolio — Website

by Bastien Allard

Francesco Interactions

by Matthew Hall

GlobeKit Website Refresh – FAQs Transition

by Nainoa Shizuru

Real Estate Landing Page

by Adam Roller

MIX

by Slava Kornilov

M. Editorial Website Loading Animation

by Zhenya Rynzhuk

Havana – Animation

by Tran Mau Tri Tam

Fashion Magazine

by Zinat Farahani

2º Reading

by Dimest

Folio No.01

by Ruslan Siiz

MOBIUS RIING C4D ANIMATION

by 秦能补拙的大表哥

New digs at FishermenLabs.com!

by Fishermen Labs

Reject 001 – A Landing Page

by Quintin Lodge

The post UI Interactions & Animations Roundup #7 appeared first on Codrops.

May 18, 2020

Inspirational Websites Roundup #15

With our roundups we want to share the most interesting design trends around the web with you. Every collection is our personal selection of what we consider to be the most inspirational and trend-setting designs.

This collection is no different: we think these are the finest and most intriguing web experiences that were released in the past weeks. They are not the only ones though, of that I’m sure! So if you stumble upon some great designs, please share them with us @codrops.

We hope you enjoy this special set of really nice designs!

Madies

Rino & Pelle

Stone & Style

LM Chabot

Dash Dash

Henrik & Sofia

Muteza

Voeux Adveris 2020

Powerhouse Company

CUSP

Mixlegno

Kontrapunkt Type

Waka Waka

Houses Of

Corentin Bernadou

LEGO Ventures

Polygon

Edoardo Smerilli

Kati Forner

DEGENESIS

Kelly Milligan

Henge

Cassiom

thePenTool

Rogier de Boevé

Tiffanie Mazellier

100 DAYS OF POETRY

Olivier Gillaizeau

Guillaume Gouessan

GOODFISH

Ruud Luijten

Alan Menken

Rodolfo Sarno

Stephanie Jeong

Inspirational Websites Roundup #15 was written by Mary Lou and published on Codrops.

May 14, 2020

UI Interactions & Animations Roundup #6

We are very happy to share our sixth UI interactions and animations roundup with you today! Lots of creativity has flown into these amazing works and it’s a pleasure to watch each and every one of them unfold their incredible imagination.

We hope you enjoy this collection and that it will spark some fresh inspiration in you!

Insidemind Motion Concept

by Nathan Riley

Motion exercise N°003

by Bastien Allard

Book event ios mobile app interaction

by Taras Migulko

Starlink Website Design

by Shakuro

Playful Creative Collective

by Zhenya Rynzhuk

Virtual Run | Landing Page

by Minh Pham

Memories Of A Geisha

by Kévin Lagier

Photographer Portfolio Interactions

by Kévin Lagier

Outpost – Concept Exploration

by Sean Hobman

Berluti Editorial Landing Page

by Francesco Zagami

Octane Material

by Matthew Hall

PanPan – Dog Treats UI

by Daniel Tan

Neural Network Website

by Max Gedrovich

Online Museums

by Viacheslav Olianishyn

Format web site design interaction

by Taras Migulko

Nana Asia Site of the Day on CSS Design Awards

by Cuberto

Kalli – Responsive HTML Templates II

by Anton Tkachev

Kati Forner Featured Projects Animation

by Zhenya Rynzhuk

X SEE

by Slava Kornilov

MUUTO Lookbook

by Nicholas.design

Interior Design Project Webpage Animation

by tubik

Play with Magic Motion

by Edoardo Mercati

UI Interactions & Animations Roundup #6 was written by Mary Lou and published on Codrops.

April 19, 2020

Awesome Demos Roundup #15

It’s time for a new roundup of awesome demos! Lots of magic and wonder has been coded up over the past few weeks with highlights like the epic pure CSS landscape by Ben Evans and many more. Take a look and get inspired for your next coding experiment!

We hope you enjoy this selection!

Flowfield ART | Generative

by Sikriti Dakua

3D Orbit Simulation

by Chidi Williams

H2O

by Marco Gomez

CSS Flipping Text

by Jhey Tompkins

Pure CSS Landscape

by Ben Evans

white-resonance

by Paul Henschel

Droplet Loader

by Chris Gannon

Gray Spiral Delaunay with Texture

by Johan Karlsson

Vapor Waves

by Marco Gomez

Compress files

by Aaron Iker

Connect Four in Vue and CSS

by Josh Collinsworth

Color Push

by WeTransfer and Zach Lieberman

3D Kinetic Typography

by Anna the Scavenger

The field

by Akaru

wigglewiggle

by Ajay

Newton’s Sun & Moon

by Jhey Tompkins

[3D] Synth Canyon Run

by Chris Johnson

konfetti

by Mario Carrillo

fullstack

by Hakim El Hattab

Cloud toggle w/ GreenSock

by Jhey Tompkins

Fire Ring using Shader-Doodle – what me worry?

by Paul J Karlik

Circle Swap Photo Gallery [React & GSAP]

by Paul J Karlik

Button bending hover

by Aaron Iker

Complete from line

by Ikeda Ryou

WebGL water ripples

by Martin Laxenaire

Infinite Mondrian Image Gallery

by Jhey Tompkins

Bongo Cat Codes #2 – Jamming

by Caroline Artz

Bubble Tape Text

by Matthew Rayfield

Practice your ukulele!

by Monica Dinculescu

arpeggiator instrument

by Jake Albaugh

Explosive Button

by Jon Kantner

Grunge Poster

by ilithya

Awesome Demos Roundup #15 was written by Mary Lou and published on Codrops.

March 30, 2020

Inspirational Websites Roundup #14

Off to a new roundup of inspirational websites! Some stunning, extraordinary websites have been unleashed upon us in these past weeks and lots of creative genius was set free. Good vibes FTW!

We hope you enjoy this selection and embrace some positive design inspiration!

Rouser

wirewerks

FLOWERS

Yoichi Kobayashi

Andy Davies

BigSpring

Odunpazari Modern Museum

Fiomet

FREDDIE BRAUN

InCharge

Emanuele Milella

Madeleine Dalla

Wannabe — Toys

Cellular Agriculture Society

Mercenaire

sabato.studio

Carbonation

Polly Kole Art portfolio

Helloplayful

Queen Garnet

MSTQ

James Warner

akinokogomi

Ballsystem

USSR Design Almanac

Shape Studio

Work & Co

Yannis Yannakopoulos

CIRCUS Inc.

Inspirational Websites Roundup #14 was written by Mary Lou and published on Codrops.

March 27, 2020

UI Interactions & Animations Roundup #5

In our fifth roundup of UI interactions and animations inspiration, we’ve collected some highlights from Dribbble that will get you up to date with the new trends and satisfy your creative soul. My personal favorites this month are Francesco Zagami’s and Nathan Riley’s works — really fantastic designs!

We hope you enjoy these great shots and get into a positive creative flow.

Motion Exercise — N°001

by Bastien Allard

Tåkern

by Andrew Baygulov

Lumen Museum Webpage Animation

by tubik

M. Editorial Website Cards Animation

by Zhenya Rynzhuk

Peridot Mgmt – Photographer folio & bio

by Clay Boan

GC Studio Projects

by Nathan Riley

M. Article Scroll Exploration

by Zhenya Rynzhuk

Fashion Website

by Aneesh

Wray & Nephew Site

by Nathan Riley

Adam Sorensen Portfolio

by Francesco Zagami

M. Editorial Website Tokyo Film Photography

by Zhenya Rynzhuk

Mors Architects

by Maxim Berg

Mjøsa

by Andrew Baygulov

Pulsating cubes

by Marc Edwards

Video Streaming Platform

by Gapsy Studio

Playfit Website Loader

by Halo Web

Water Engineering Website

by Corey Lewis

FILMPRODUCTION

by Mikhail Nikipelov

Compress files

by Aaron Iker

Green Ray

by CHIPSA

Nana Online Magazine Interaction

by Cuberto

UI Interactions & Animations Roundup #5 was written by Mary Lou and published on Codrops.

March 5, 2020

Inspirational Websites Roundup #13

Today we have a special collection of really interesting and creative website designs for you! Some outstanding works have been released over the past few weeks and we’re very excited to share these masterpieces with you. So many cool new trends are mixed and combined including beautiful 3D graphics, outlined text, unusual layouts and neat hover trails.

We hope you enjoy this selection and get a good dose of fresh inspiration!

Bruno Ortolland

Socialclub

Voir plus loin

Kevin van der Wijst

Pest Stop Boys

Luigi De Rosa

Davide Baratta

DDNA

Illuminating Radioactivity

Vallourec

Tula microphones

Alessandra Zanghi Studio

Connect Homes

Six N. Five

LEQB

Bite Toothpaste Bits

Yelloworld

Loer Architecten

Violet Office

Krause Studio

Sandy Dauneau

80s Fever

Elias Akentour

Josh W Comeau

PenzGidroMash

WØRKS

56k

Viens-là

The Markup

PANAMÆRA

Érika Moreira

kern inc.

DEADWATER

unspun

Playground Paris

Zenly

This is Spotify

Inspirational Websites Roundup #13 was written by Mary Lou and published on Codrops.

March 3, 2020

Awesome Demos Roundup #14

These past few weeks we’ve collected some really nice web experiments: from Shader magic to SVG filter trickery, interactive poetry and particle madness — there’s something for every creative coder’s heart.

We hope you enjoy this collection and find it inspiring!

Stacking Cards Effect

by Claudia Romano

Bouncing Balls

by Meto Trajkovski

Starfields GLShader

by Paul J Karlik

verlet

by Kitasenju Design

Spring pagination

by Mikael Ainalem

Turbulence

by Janxalot

Flight

by Mat Sz

ThreeJS Maths of Heart

by TheFrost

Calm Spikes

by Anna the Scavenger

Editable Neumorphic Text

by Adam Kuhn

Care Bear NEEDS Love (mousedown/touchstart)

by Jhey Tompkins

Curl Simulation

by Daniel Velasquez

Banksy – Valentine’s Day

by David Fitzgibbon

Wavy Color Cube

by Ryan Mulligan

intimacy

by Thibaud Goiffon

What’s behind ?

by Kevin Levron

threejs-nuxt-sample

by Misaki Nakano

The Three Graces (React App)

by Paul Henschel

Wind field – How To

by Louis Hoebregts

Pure CSS Claw Crane

by Jon Kantner

void-merge-2048

by Arthur

Corgo’s with Jason

by Mandy Michael

Pixel Dust

by Paul Neave

Pure CSS Responsive Browser Template

by Adam Marsden

Random, Cos and Sin

by Kevin Levron

Diagonal Layouts in 2020

by Nils Binder

r3f cannon instanced physics

by Paul Henschel

Liquid Grid

by by Kevin Levron

Memphis Beauty

by Anna the Scavenger

Tower Time

by Adrian Rampy

shader moire

by masuwa

Isometric City w/ Airplane

by Adam Kuhn

Awesome Demos Roundup #14 was written by Mary Lou and published on Codrops.

March 2, 2020

UI Interactions & Animations Roundup #4

Here’s a packed collection of animation and interaction inspiration for you. In our 4th roundup we explore the freshest UI and website concept goodness which includes some true gems that will get you excited about the new trends. Some personal favorites are “GC Studio Site” by Nathan Riley, “Music of Plants” by Nino Lekveishvili and “Artist’s portfolio site” by Toma Li. Get creative with those transitions and animations and don’t be afraid to be bold!

We hope you enjoy this roundup and get some fruitful inspiration!

Urban Jungle – Landing Page

by Outcrowd

M. Editorial Website Scroll Animation

by Zhenya Rynzhuk

Portrait Woman ui

by tamo

Helvetica&… Future Waves.

by MadeByStudioJQ

Artist’s portfolio site

by Toma Li

Music Player – Vinyls

by Khonok Lee

Coworking Home Page

by Barthelemy Chalvet

GC Studio Site

by Nathan Riley

2020 fashion

by Helena Stretovych

Parallax Slider

by Giulio Cuscito

Peridot Mgmt

by Clay Boan

Soul+A Website | Water Animation

by Ivan Lauer

The Second life of the Food Animation

by Zhenya Rynzhuk

Neil deGrass Tyson // Transition

by Serhii Polyvanyi

gaph.or

by Andrew Baygulov

3D Hero Explorations Slider Animation

by Zhenya Rynzhuk

Luxam Gallery

by Advanced Team

99 Symptoms – BOX ®

by Kulikov Ilya

Mix & Match

by Dinos&Teacups

Layout #3 / Music of Plants

by Nino Lekveishvili

House Booking interaction mobile KIT onboarding illustrations

by Taras Migulko

blind – shop

by Helena Stretovych

UI Interactions & Animations Roundup #4 was written by Mary Lou and published on Codrops.

February 10, 2020

UI Interactions & Animations Roundup #3

This third collection of wonderful UI interaction and animation videos is full of beautiful website concepts, 3D motion designs and fresh interaction ideas. We really hope you enjoy this latest selection!

404 KG Capital

by Advanced Team

Dispersion Animation

by Nathan Riley

Meeting mobile app interaction design

by Taras Migulko

Digital Arts Exhibition – Landing Page

by Minh Pham

M. Editorial Website Cards Animation

by Zhenya Rynzhuk

Website Art Exhibitions

by Gapsy Studio

Paula Rosa UI Interaction

by Nicholas.design

Ever Wonder…

by MadeByStudioJQ

Travel Community – Web Design

by Anastasia

M. Editorial Website Hover Animation

by Zhenya Rynzhuk

Product Listing Page

by Francesco Zagami

Fabrx Mobile Design System II

by Anton Tkachev

Digital Creative Jobs Educational Platform

by Igor Pavlinski

Hello Dribbble!

by Jon Bell

Push Your Limits

by Wojtek Tymicki

InColor Kitchens Homepage

by kreat?va

Loading switch interaction

by Mauricio Bucardo

Ecommerce Website

by Gapsy Studio

Soul+A Website | Articles Animation

by Vanya Gorbunov

Gemmy Woud Binnendijk – Photography site

by Anthony Goodwin

Photo Grid Animation

by Zhenya Rynzhuk

Untitled – Website Scrolling Animation

by Tran Mau Tri Tam

UI Interactions & Animations Roundup #3 was written by Mary Lou and published on Codrops.

February 7, 2020

Awesome Demos Roundup #13

We are very happy to share our latest selection of fantastic web experiments with you! Some beautiful and exciting code gems were created; from realistic objects with pure CSS, to flowy surprises and fun brushes, there’s lots to explore and learn from.

We hope you enjoy this special pick and get inspired!

pullmearound

by Lars Berg

emoji-brush

by Yoksel

Cut/Copy/Paste

by Adam Kuhn

SVG Pattern Doodler

by Niklas Knaack

subscribercoaster

by Adam Kuhn

Physarum-fluid-2

by Domenico Bruzzese

The line game

by Fabio Ottaviani

Shimmery Text w/ SVG + GSAP

by Jhey Tompkins

fireworks

by Magnus Persson

Typo-coaster

by Michelle Barker

2D Fluid Simulation

by Andrés Valencia Téllez

Radio Hopping

by Jon Kantner

Walkers – How to

by Louis Hoebregts

Night at the Museum of Very Good Boys

by Adam Kuhn

3D CSS Kinetic Type Poster

by Pete Barr

noisy-water

by Nathan Taylor

Flowers

by Cassie Evans

VIBES

by Sikriti Dakua

glitchbrush

by Fabio Ottaviani

Pure CSS Glitch Experiment (Twitch Intro WIP)

by Tee Diang

Tabbar animation – Only CSS

by Milan Raring

PPL MVR

by Kristopher Van Sant

Feedback Reactions

by Aaron Iker

HanaGL

by Ryohei Ukon

Band Moiré Filter

by Henry Desroches

Toggles

by Olivia Ng

Night & Day v2

by Steve Gardner

Polaroid Camera In CSS

by Sarah Fossheim

Animating Clip-Path Sections w/ Intersection Observer

by Ryan Mulligan

verlet-motion

by Jordan Machado

Newton’s Light Bulbs

by Jhey Tompkins

rgbKineticSlider

by Hadrien Mongouachon

Flowing Image – How To

by Louis Hoebregts

Zodiac Hustle

by Daniel Long

ogl-hypnose

by Joseph Merdrignac

Awesome Demos Roundup #13 was written by Mary Lou and published on Codrops.

January 31, 2020

The Complete Unit Testing Collection [Tutorials and Frameworks]

Breaking Unit Testing Down

Introduction and History of Unit Testing [Part 1] by Leah Grantz — We all know we should be incorporating unit testing into our development processes, but do you know the history of this concept? We take a look into the history of test automation to get a look at where this all got started.
Unit Testing Guidelines: What to Test and What Not to Test by Anton Angelov — Unit testing can often take on a rather broad connotation. We try to help narrow down the phrase in terms of what it should (and shouldn't) cover.
Importance of Unit Testing by Bala Murugan — Unit testing is one of the simplest and first measures that developers should take to prevent bugs in production.
The Role of Unit Tests in Test Automation by Bobby Lalvani — Because TDD and AAA complement each other so well, you should combine them with test management tools to get the best results on your DevOps test automation projects.
Why Do We Unit Test? And What’s the Purpose of Code Coverage? by Kevin Hooke — Use code coverage as a tool to help you find untested code, not as an ultimate goal.
8 Benefits of Unit Testing by Ekaterina Novoseltseva — You simply can't overlook the benefits of tearing your application apart, testing each, and putting it all back together.

January 27, 2020

Inspirational Websites Roundup #12

Some wonderful sites went live in the past few weeks, setting the stage for some new 2020 trends. Playing with shapes and bold typography seems to be a thing these days while color palettes remain mostly toned down with a vintage touch. Many UI animation surprises await you in this selection, so we hope you dive in and get inspired with this first websites roundup of 2020!

Talia

Metaconf

Superhero Cheesecake

Qode Kaleidoscope

Monokai

Pantheone Audio

Furrow

Jesper Landberg

obys

Andrew Leguay

Olivier O. Photography

Nathan Taylor

Dekmantel Festival 2020

Fedor Shkliarau

Nightingale

Journée portes fermées

Swab The World

Let Girls Dream

Today

JetBrains Mono

Spotify for Pets

PHENOMENA

basement.studio

Robb Owen

The Design Conference 2020

Danny Garcia

21 Capital

Defeat B.O.C.O.

We are ZIZO

Inspirational Websites Roundup #12 was written by Mary Lou and published on Codrops.

January 25, 2020

UI Interactions & Animations Roundup #2

Today have another inspiration set of great UI interactions and animations for you. Many of these shots give some insight to true masterpieces in the making and we’re happy to share these brilliant works with you.

We hope you enjoy this special selection and get your creative juices flowing!

Pantheone Website

by MakeReign

Haruki Murakami – Book Author Website/UI Compilation

by Daniel Tan

Experiment

by Gilles Tossoukpé

Bodega De Sonido

by Oleg Kulik

Are Studio Animation

by Megan Milosevich

Type in Motion / no.1

by Ana Saka?

STUDIOLISE

by Britton Stipetic

Adios Product – Story Page

by Britton Stipetic

Travel Blog

by The Glyph

VIBES

by ???o? ??W

M. Editorial Website Article Inner Animation

by Zhenya Rynzhuk

Draggable Product Grid

by Tom Anderson

Business Digitalization Company Website

by tubik

COSPALMER®

by Alexey Yurkov

Add To Cart Interaction

by Mauricio Bucardo

Earthplorer Blog

by The Glyph

Clother app interaction design

by Taras Migulko

IOCO / Biocomputer

by Mike | Creative Mints

M. Editorial Website Article Inner Animation

by Zhenya Rynzhuk

Landing Page – Skateboarding School

by Outcrowd

UI Interactions & Animations Roundup #2 was written by Mary Lou and published on Codrops.

January 8, 2020

Awesome Demos Roundup #12

From sound experiments to exquisite shapes, from Christmas themes to 3D dreams —our latest demos collection is nothing short of spectacular and glorious. Despite the past weeks being busy, full of end-of-year deadlines and packed schedules, creativity in the geeky coding web world has not suffered, to the contrary! So much amazing stuff was made!

We hope you enjoy this first awesome demos selection of 2020 and get inspired to create something fun.