Collective #665








Collective 665 item image

3D Force-Directed Graph

A web component to represent a graph data structure in a 3-dimensional space using a force-directed iterative layout. It uses Three.js for 3D rendering.

Check it out






Collective 665 item image

Fig

Fig adds VSCode-style autocomplete to your existing terminal.

Check it out


Collective 665 item image

Helix

A “post-modern” modal text editor where the whole design is based around multiple selections as an editing primitive.

Check it out




Collective 665 item image

Request Quest

The game is pretty simple: look at some code & decide if it would trigger an HTTP request in the latest stable release of particular browsers.

Check it out


Collective 665 item image

NocoDB

A free and open source Airtable alternative that can turn any SQL database into a smart spreadsheet. Supports MySQL, Postgres, SQL server, MariaDB & SQLite.

Check it out




Collective 665 item image

Kalker

Kalker is a calculator that supports user-defined variables, functions, ambiguous syntax, derivation and integration. It runs on Windows, macOS, Linux, Android, and in web browsers (with WebAssembly).

Check it out




The post Collective #665 appeared first on Codrops.

UI Interactions & Animations Roundup #14

Here is a fresh roundup of the latest UI animation trends from Dribbble for you! We’ve selected some exceptionally stylish interactions that show some really nice, experimental motion concepts and animation ideas.

We hope you enjoy this set and get some inspiration for your next project!

Perfumery Product Page Animation

by tubik

The store Skin care Issue 81

by Barbara Skrodzka

WebGL And Webflow Exploration

by Thapelo Marumo

Onboarding text effect

by Gleb Kuznetsov

Anomaly Home

by Vedad Siljak

Marvel. Main page. Free digital comics

by Evgeny UPROCK

Elevated Interior Design Slider | June Homes

by Ion (Ivan) Shipilov

Alignment

by Roman Salo

Anomaly About Page

by Vedad Siljak

Automotive website

by Roman

Folio 2021 — 01

by Aristide Benoist

Lookbook Experience

by Francesco Zagami

Fashion Brand Website

by tubik

Silver & Gold Feed

by Armand Chakhalyan

Wakun /2-2

by Lukas Kus

Expolight 1st Concept

by Advanced Team

New World Carousel Animation

by Armand Chakhalyan

Four Seasons. Main Page

by Evgeny UPROCK

Defund Tigray Genocide Site

by Rolf Jensen

Bowers & Wilkins. Two Concept of Main Page

by Evgeny UPROCK

trashtalk® Interior Studio N° 07

by Pierre Borodin

Slidebean – Homepage (1 of 3)

by Quintin Lodge

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

UI Interactions & Animations Roundup #8

It’s time for a crisp new collection of inspirational UI interaction and animation shots! This time we have Aristide Benoist’s works stand out with some very creative motion ideas and there’s some wonderful mobile animations, too.

We hope you enjoy this set and get inspired!

The Secret Project — 002

by Aristide Benoist

PER-SONA — Interactive Menu Page No. 1

by Rron Berisha

Ecotourism Website Home Page

by tubik

The Secret Project — 003

by Aristide Benoist

GEORGINA

by Slava Kornilov

ORU Office Spaces

by Hrvoje Grubisic

SolarEdge App Redesign Concept

by Kamil Kozie?

Paved Landing Page – Animation Concept

by Robert Mayer

Liquid Tab Bar

by Cuberto

M. Editorial Website Letters Animation

by Zhenya Rynzhuk

Kreditrobot iOS mobile application interaction screens

by Taras Migulko

Cuberto Services Page

by Cuberto

Trip mobile app interaction

by Riko Sapto Dimo

élégante home no.1

by Clay Boan

Wildlife Shot Animation

by Keshav Dev

Tattoo Artist website landing page design interaction

by Taras Migulko

The Secret Project — 004

by Aristide Benoist

DSX About Page

by Clay: UI/UX Design Agency

Street Art News Animation

by Shakuro

Stunning_ Animation

by Tran Mau Tri Tam

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

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.

UI Interactions & Animations Roundup #1

We are happy to share our first inspirational collection of UI interactions and animations with you. Our goal is to provide you with great fresh ideas for web and mobile interaction design and also other cool animations we’ve carefully picked.

We hope you enjoy this first roundup and get inspired!

Olympic Sports Website

by Daniel Tan

Fashion Photography Slider

by Tom Anderson

Flora – Flower Website Concept

by Eddie Luong

Shamel

by Slava Kornilov

Rolf Benz x Future Fabric Chair Interactions

by Nathan Riley

Limnia Fine Jewelry Animation

by Zhenya Rynzhuk

Fashion Photography Colour Slider

by Tom Anderson

Ben Mingo — 001

by Aristide Benoist

Space Education

by Stian

Haruki Murakami – Book Author Website/UI Concept

by Daniel Tan

Web design concept for CTG agency

by Mark Vaira

Hall of fame

by Matthew Hall

2019 Year In Review Animation

by Ally Behr

French Team – Drag Animation

by Adrien Laurent

MUUTO UI Interaction

by Nicholas.design

Story Land Homepage Animation

by Zhenya Rynzhuk

Figma iphone in foot mockup

by Nick Ohmy

Breemark agency

by Diana Kaganskaya

Oh Shet!

by MadeByStudioJQ

Onboarding animation / Made in Principle

by Cuberto

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

Animated Image Columns

Today we’d like to share a little layout with you. The idea is based on the current trend of a grid layout where the columns are animated. You can see this kind of animation in Aristide Benoist’s amazing design for Everest or Hrvoje Grubisic’s GETZ — Photography Portfolio Website concept. In our demo, we animate a decorative image grid and make the columns move away in an alternating way, revealing some content underneath. We use a playful hover effect for the menu items and mimic the animating when they fly away. We also added some slight mouse move interaction for the columns.

The animations are powered by TweenMax.

Attention: Note that the demo is experimental and that we use modern CSS properties that might not be supported in older browsers.

The initial view of the demo is the navigation with the decorative grid in the background.

AnimatedColumns_01

When clicking on one of the menu items, we animate the grid out by moving the columns in an alternating fashion, rotating them slightly. We mimic this behavior on the letters of the menu item.

When the grid moves away, the content area underneath is revealed:

AnimatedColumns_02

AnimatedColumns.2019-05-16 17_23_33

We hope you enjoy this experiment and find it useful!

References and Credits

Animated Image Columns was written by Mary Lou and published on Codrops.