Inspirational Website of the Week: Heeds A colorful, smart design with some perfectly employed animations made us pick Heeds this week. Get inspired Our Sponsor Learn JavaScript for Free with Fullstack Academy Level up your design career at Fullstack Academy. Bring your own designs to life, manage developers, and become a more valuable hire. Enroll for free today Paper Programs Hello from the future: Paper Programs is an incredible browser-based system for running JavaScript programs on pieces of paper. By Jan Paul Posma. Check it out Subverted Design Joel Califa writes about the importance of the shifting role of the designer and why they need to stand up for users. Read it Crooked Style Sheets Some insane methods for gathering basic user information...
Our Sponsor 300+ pre-built websites with a 1 click installation Be Theme has more than 300 pre-built websites. Pick a pre-built website, install it with the most intuitive installer ever and easily edit it. Explore more Turning Design Mockups Into Code With Deep Learning Emil Wallner shows how Deep Learning can be used to automatically create markup from design mockups. Read it JavaScript Start-up Optimization Addy Osmani writes how to employ a little discipline for your site to load and be interactive quickly on mobile devices. Check it out The Making of Apple’s Emoji: How designing these tiny icons changed my life Read Angela Guzman’s fascinating story about designing the epic emojis. Read it 2017 JavaScript Rising Stars See which GitHub projects were the most popular ones by added stars in...

Today we’d love to share a responsive HTML template for coding projects and documentations with you.

Scribbler was designed for developers who want to set up a small landing page and a documentation/usage page for their coding projects. It is developed with Vanilla JavaScript and many great new CSS features, such as CSS variables and CSS grid. With performance and simplicity in mind, the template is built without any extra overhead of libraries and is easy to customize.

You can use Scribbler freely for your personal project or client work.

Live demo

Check out the live demo: Scribbler Live Preview

Download the template for free:

You can download the ZIP file of the template and the design file here:

Use it freely but please don’t republish or redistribute the template.

We hope you enjoy this freebie and find it useful!

If you’d like to contribute and publish your freebie on Codrops drop us a line.

Find this project on Github

Freebie: “Scribbler” Website Template (HTML, Sketch) was written by Amie Chen and published on Codrops.

Inspirational Website of the Week: Analytica Projects A beautiful design with an interesting scrolling effect. Our pick this week. Get inspired Our Sponsor Music. Food. Vue. Vue.js Development Conference VueConf.US – Vue.js Conference Workshops/Sessions on the most progressive framework for building user interfaces hosted by Vue.js founder Evan You & the core Vue team. Learn about Vue here Toast UI Editor A Markdown WYSIWYG editor that supports CommonMark and GitHub Flavored Markdown (GFM). Check it out A letter about Google AMP Read why the current way AMPs are implemented reinforces Google’s dominance of the web. Read it Better Typography with Font Variants Jonathan Harrell’s tutorial on how to use font variants for making great looking web typography. Read it

Today we’d like to share some fun letter animations with you. The idea is based on Animography’s Dribbble shot “Us By Night” where various little shapes animate with some letters. We wanted to explore some similar animations using different typographies and shape effects. We are using anime.js for the animations and Charming for working with the words.

The demo is kindly sponsored by JazzCon.Tech: Music. Food. Code. New Orleans March 2018. If you would like to become a demo sponsor, you can find out more here.

Attention: For this demo we are using some new CSS properties, please view in an up-to-date browser.

The main idea of the implementation is the following: we create an SVG for each word where we then place the shapes relative to the position of each letter. With a couple of options we can then create fun effects using the simple shapes. To showcase the effects, we’ve created a little slideshow.

This is an initialization example. In our case, the element is an h2 with the class word:

const word = new Word(element, options);

options: {
	shapesOnTop: false, // shapes on top or beneath the letters
	totalShapes: 10, // number shapes per letter
	shapeTypes: ['circle', 'rect', 'polygon'], // type of shapes
	shapeColors: ['#e07272', '#0805b5', '#49c6ff', '#8bc34a', '#1e1e21'], // pick randomly from these colors
	shapeFill: true, // if set to false, there's no fill and the stroke gets...
Our Sponsor #1 Tables & Charts Creator WordPress Plugin wpDataTables is a best-selling WordPress plugin that can help you generate tables and charts in WordPress with a few simple clicks. Check out how Web Developer Roadmap – 2018 Some fantastic graphs that show roadmaps for becoming a web developer in 2018. By Kamran Ahmed. Check it out I’m harvesting credit card numbers and passwords from your site. Here’s how. David Gilbertson captivates us with his charming sarcasm in this fictional, yet alerting scenario. Read it New flexbox guides on MDN Rachel Andrew updated the existing Flexbox guides on MDN to reflect the core use cases. Check it out What’s New in HTML 5.2? In this...
Inspirational Website of the Week: Crux An old schoolish, yet refreshingly realistic design with a brilliant navigation. Our pick this week. Get inspired This content is sponsored via Syndicate Ads HelloSign API: The dev friendly eSign Embed HelloSign API into your app in minutes, with only a few lines of code. Check it out 365 shapes of blue Explore Julien Espagnon’s journey of learning to code with experiments he made each day in 2017. Check it out Object Explorer A resource to help figure out what JavaScript object method would be best to use at any given time. By Sarah Drasner. Check it out Auto-Sizing Columns in CSS Grid: ‘auto-fill’ vs ‘auto-fit’ Sara Soueidan explains how to auto-size...

2017 was yet another incredible year for web designers and developers! We’de like to invite you to a quick look back at all our resources we’ve released this year. The round-up contains all demos we’ve created in 2017, together with our talented contributors! We are very much looking forward to the next year and hope it brings much inspiration and evolution. We wish you a healthy 2018 and encourage you to make a difference. Let’s be bold and fearless, let’s turn this new year into a milestone of change!

From all our hearts, we thank our amazing readers, supporters, contributors and sponsors! Have a wonderful new year full of good vibes, kindness and love. Make it count!

With love,
Pedro, Manoela & little Lucas

A Look Back at 2017: Round-up of Codrops Resources was written by Mary Lou and published on Codrops.

Our Sponsor Create Beautiful Websites Visually The free & easy way to design WordPress websites. Create a stunning new website with Elementor Page Builder, zero coding needed. Check it out Toapi A library for easily letting any website provide APIs. By Jiuli Gao. Check it out How should we resolve percentage margins and padding on grid and flex items? The CSS Working Group is asking the community’s opinion on a longstanding issue in the CSS Grid Layout and Flexbox specification. Rachel Andrew has put together some examples that showcase the issue. Read it A Tinder Progressive Web App Performance Case Study Addy Osmani writes about Tinder Online’s journey of becoming a Progressive Web App. Read it A Sliding Nightmare: Understanding the Range...
Inspirational Website of the Week: Yelvy Innovative details and a super modern design made us choose Yelvy as the site of the week. Get inspired Our Sponsor Free Layout Pack for Divi A free learning management system (LMS) layout pack perfect for any e-course website. Download for free Joy.js A great tool that lets you change code by clicking, dragging or hovering, and see the result immediately. By Nicky Case. Check it out Lynn Fisher Responsiveness is brought to a whole new level on this website: a new design for every breakpoint! Check it out Snowman Create your own fancy snowman with this Christmas Experiment. Check it out Onym A site that collects tools and resources for naming things. Check it out

Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it. It was inspired by the technique seen on the speakers page of the 404 conference.

Please note this effect is very experimental; we use several properties that won’t work in older browsers. The clip-path property is not supported in IE or Edge.

We also use CSS variables for setting some properties that will allow for an easy adjustment of the effect.

Breaking down the effect

When searching the web for an easy to use and light-weight glitch implementation, we came across this question on Reddit. Somebody was asking how the glitch effect was pulled off on the speaker line up page of the 404 conference. The glitch effect was made using CSS animations on a stack of three images that are the same. The animations consist of a rapidly changing clip property on all layers except the first one. Additionally, the layers are being moved slightly. So what we are seeing, is slices of the image, slightly offset and in constant movement.

We wanted to experiment with this and recreate the...

Our Sponsor Divi 3.0: Build Things Visually Divi 3.0 introduces a completely new visual interface that will forever change the way you build websites. Try it free How to Use Local Storage with JavaScript Tania Rascia’s practical step-by-step guide on using local storage. Read it The web we may have lost… Christian Heilmann shares his thoughts on the recent Net Neutrality ruling. Check it out Using SVG to Create a Duotone Effect on Images A great SVG technique for a duotone image effect by Lentie Ward. Read it UI Jar Hand-picked designs from Dribbble for your real life projects. Check it out
Inspirational Website of the Week: NINJA TUNE 2017 A fun scroll experience with many creative effects. Our pick this week. Get inspired Our Sponsor Extra: The Ultimate Magazine WordPress Theme Extra is the ultimate magazine WordPress theme and visual page builder powered by Divi. Try it now How to Connect to an API with JavaScript An easy to follow tutorial on connecting to an API by Tania Rascia. Read it How to break a CAPTCHA system in 15 minutes with Machine Learning Adam Geitgey shows how to hack the world’s most popular WordPress CAPTCHA plug-in. Check it out Image 3D Scatterplot A visualization of colors in an image through a 3D scatterplot. Made by Alexander Overvoorde. Check it out
Our Sponsor ProjectHuddle: Live Feedback On Your Web Project A revolutionary WordPress plugin to gather client feedback directly on top of your web project. Open source, white-label & cross-platform. Check it out Act now to save the internet as we know it The internet as we know it will vanish if net neutrality gets compromised. Tim Berners-Lee urges us to act now to save it. Read it Understanding CSS Layout And The Block Formatting Context Rachel Andrew explains existing and new ways to create a Block Formatting Context. Read it Microlink Microlink is a service that let’s you collect relevant information from any website. Check it out Design Principles An open source resource that collects examples of design principles. By Ben Brignell.

This set of demos explores 3D particle animations using three.js and easing. All of the particles and shapes in these demos are made from basic geometry/material/mesh sets in three.js, such as spheres, lines, and boxes.

The Concept

Making animations with a lot of small moving parts is a lot of fun. Applying different timing offsets and easings to each part or group can make for some interesting visualizations. And even though these can look great in 2D, adding subtle 3D perspective to your animations can make them even more visually appealing. Having the concept of a camera and 3D grid can also aid in the debugging and development of your animations. You can zoom in, zoom out, and view your animation from different perspectives to tune it perfectly.

Repeating animations like this is great for loader animations, backgrounds, and transitions. In these demos they are treated as site loader animations. I hope this inspires you to make your own 3D particle animations!

Benefits of three.js and a 3D Environment

Most of these animations could be made roughly comparable with something like SVG or 2D Canvas. However, adding subtle animations and positioning in a 3D perspective brings them to life. There are also performance benefits from working with three.js/WebGL. These animations only scratch the surface of what three.js is capable of. Custom geometries, materials, lighting, shadows, and shaders can take these to the next...

Inspirational Website of the Week: TAO TAJIMA An incredible web experience with surreal effects. Our pick this week. Get inspired This content is sponsored via Syndicate Ads Test Attack Readiness With Incapsula DDoS Resiliency Score The DDoS Resiliency Score (DRS) calculator is a free online tool you can use to evaluate the effectiveness of your organization’s DDoS mitigation strategy. Try it free Hexi Flexi A CSS Grid powered SCSS component that creates a hexagonal lattice. Check it out Free Font: Lokampwow A fantastic free Gothic style typeface by Dmitry Lokamp. Get it React Performance Fixes on Airbnb Listing Pages Great insight on the process of improving performance in React by Joe Lencioni. Read it
Our Sponsor A smart, free solution for handling creative files Your files deserve a safe home. Organizing, sharing & approval of creative in a customizable portal; everything is easier with Orbit. Check it out Animate Plus Animate Plus is a new JavaScript animation library that aims to focus on performance. Check it out Yolo Hero A super fun game from the Christmas Experiments. You’ll need a webcam and a microphone. Check it out So, you learned JavaScript – now what? Christian Heilmann’s inspiring talk about JavaScript he gave at a graduation ceremony. Read it The 8pt Grid: Consistent Spacing in UI Design with Sketch Chris Godby shows how to use the 8pt spacing system in Sketch. Read it

SVG stroke animations are nothing new, but when using a more complex drawing that is basically made of strokes, then we can create a very original looking effect. Using many different colors and adding some other element animations, we can bring a very unique looking illustration to live.

For the animation we are using GSAP’s sequencing tool TimelineMax and the DrawSVGPlugin.

Let’s dive into the interesting parts that make this animation look so original.

Please note that this is highly experimental and just a proof of concept!

Let’s have a look at the SVG illustration. We’ve divided the drawing into several groups that we’ll animate individually:

	<svg id="bike" >
		<g id="mainpaths" >
			<g id="wheelf" >
			<g id="wheelb" >

The whole animation is build up of the following parts:

  • Entrance / exit
  • Shaking
  • Wheels rotation
  • Strokes drawing
  • Toggling fills

For each part a specific group is targeted. For example, when we want the wheels to rotate, we use the #wheelb or #wheelf groups.

If you look inside the SVG you’ll see that it’s composed of a multitude of little paths. Note that most of the visual effect comes from the fact that there are so many strokes animating at the same time.

Using GSAP from GreenSock and their DrawSVG plugin allows us to control the stroke-dashoffset and the stroke-dasharray properties of each path easily. We animate the stroke-dashoffset from “0 40%” to “60% 100%” of its maximal length. This way, the...

Inspirational Website of the Week: Supercrowds Some very exciting slice effects with lots of interesting transitions. Our pick this week. Get inspired Our Sponsor Do your clients worship you? They will now! Woo your clients in 6 unusual ways with 1 domain name. Serenade them now! Check it out VR/AR prototyping for everyone An in-depth tutorial with a nice intro on how to get started with virtual and augmented reality. By Pavel Laptev. Read it A Pinterest Progressive Web App Performance Case Study Read about Pinterest’s Progressive Web App and how they managed to make their new app load fast on mobiles. An article by Addy Osmani. Check it out How to prototype websites quickly with CSS Grid Per Harald Borgen shows how...
Our Sponsor You’ve been wanting to build mobile apps… Use your favorite development languages and share code between web and mobile. Check it out JSRobot Reaal Khalil created this fun coding game where you control a robot by learning JavaScript. Check it out Infinitown A fantastic WebGL experiment of an infinite town using a brilliant technique. By Little Workshop. Check it out Design Systems Handbook A remarkable resource on design systems. Check it out Lona Airbnb’s tool for defining design systems and using them to generate cross-platform UI code, Sketch files, images, and other artifacts. Check it out Particles danse A stunning...