Inside a super fast CSS engine: Quantum CSS (aka Stylo)

You may have heard of Project Quantum… it’s a major rewrite of Firefox’s internals to make Firefox fast. We’re swapping in parts from our experimental browser, Servo, and making massive improvements to other parts of the engine. The project has been compared to replacing a jet engine while the jet is still in flight. We’re […]


Coder Frozen in 2009 Awakens to Find Front-End Development Not Awful

I’ve not seriously touched front-end code, in years. Frankly, it scares me. To that end “front-end devs are not real programmers” is totally BS. I want to talk about some of the recent changes in tooling and APIs that are available so that front-end development might not suck as much as it used to. You will not learn to be a CSS or JS guru with this post. If you’ve written much front-end code, this will be mostly full of face-palm level obvious statements. Therefore, feel free to read for the laughs.
I’ve been working at Heroku for 5+ years and I’ve not shipped a production feature that touched front-end code in that time. Prior to that, I kinda dabbled a bit, but mostly just mocked up other people’s interfaces. The last “real” website on which I was responsible for front-end development was probably circa 2009, and it was awful (both in experience and my designs).


Focusing on Focus

What’s up my a11y allies? Were you ware that the mouse and keyword handle focus differently? Well it’s true. Both handle them differently, and depending on what browser you are in also matters…a lot actually. Focus is a crucial element to the usage and experience of the application we are interacting with. It is also […]
The post Focusing on Focus appeared first on David Walsh Blog.


Czuję się jak 10 lat temu, a to tylko interaktywna książka…

Jestem na urlopie, w założeniu bez komputera, ale mam dziś „dzień wolny” i nie mogę się powstrzymać, by siedzieć cicho, bo znowu, dzięki Bogu, wraz z niezwykle utalentowanymi ludźmi mam przyjemność wypuścić bardzo oryginalny i nowatorski projekt o kodowej nazwie interaktywna książka. Skala jego innowacyjności jest dla mnie podobna do Drawtera, dlatego czuję podobną, co 10 lat […]


Shoelace.css: A Back to the Basics CSS Starter Kit

CSS frameworks such as Bootstrap and Semantic UI have become an essential part of web design. They provide the necessary resets, default styles, and components that save us hours and hours of work. Most CSS frameworks are built using preprocessors such as Less or Sass, which is great, except when folks include the entire library […]
The post Shoelace.css: A Back to the Basics CSS Starter Kit appeared first on David Walsh Blog.


New & Upcoming Course Highlights: Callback Functions, Big Data, SQL, & more

Every week, new courses and workshops are published to the growing Treehouse Library! Here’s a short list of what we’ve added recently, upcoming course highlights, and our weekly video update of What’s New at Treehouse. NEW COURSES Callback Functions in JavaScript– Andrew Chalkley…
The post New & Upcoming Course Highlights: Callback Functions, Big Data, SQL, & more appeared first on Treehouse Blog.


GreenSock for Beginners (Part 2): GSAP’s Timeline

The aim of this second part of GreenSock for Beginners is to introduce you to GreenSock’s TimelineMax. You’ll be learning:

Why you need a timeline
How to include multiple tweens in a timeline
How to package multiple timelines into functions and nest them inside a master timeline for greater flexibility.

By the end of this tutorial, you’ll be comfortable working with GreenSock’s timeline to manipulate and fully control multiple tweens.
For an introduction to the basics of GreenSock, including how to work with TweenMax for sequencing and staggering simple animations, head over to part 1 of this multi-part article.
The GreenSock articles are part of the series Beyond CSS: Dynamic DOM Animation Libraries. Here’s what I covered in the past instalments:

Animating the DOM with Anime.js touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library
Fun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation library
Make Your Website Interactive and Fun with Velocity.js (No jQuery) shows you how to use Velocity.js, an open source, robust free animation library, to create performant web animations
GreenSock for Beginners: a Web Animation Tutorial (Part 1) is an overview of GreenSock, also known as GSAP (GreenSock Animation Platform), where I discuss the library’s modules and licensing model. I also show you how to code a simple tween, sequences of tweens, and staggering animations using GSAP TweenMax.

Why Would You Need GreenSock’s Timeline to Code Your Web Animations?
In Part 1, you learned how to add different animations to an element or multiple elements by creating a number of independent tweens and coordinating their timings with each tween’s delay property.
By default, stacking one tween after another results in all tweens happening at once.
What would be more helpful, however, is to be able to control when a tween is going to happen with respect to other tweens, e.g., at the same time, 1 second or half a second before or after, etc.
Take this basic example with just two tweens. Here’s what happens:

Tween 1: a circle shape grows and shrinks as it rotates on its X and Y axes
Tween 2: some text pops up.

The GSAP snippet that makes it work looks like this:
[code language=”js"]
// scale down the text
// and hide it before the animation begins
TweenMax.set(‘.example__title’, {
scale: 0.2,
autoAlpha: 0
// scale the circle shape down before
// the animation begins
TweenMax.set(‘.example__ball’, {
scale: 0.2
// tween 1‘.example__ball’, 0.5, {
rotationX: 360,
rotationY: 180,
scale: 1,
ease: Elastic.easeIn.config(2, 1)
// tween 2‘.example__title’, 0.5, {
autoAlpha: 1,
scale: 1,
ease: Back.easeOut.config(4)
As you can see, both tweens happen at the same time, which is not the desired effect:
See the Pen GSAP Tutorial Part 2: Why the Timeline by SitePoint (@SitePoint) on CodePen.

If you want the text to appear just when the shape is about to stop rotating, you’ll need to add an appropriate delay to tween2, like this:
[code language="js"]
// tween 2‘.example__title’, 0.5, {
// rest of the code here
delay: 0.6

See the Pen GSAP Tutorial Part 2: Managing Sequences with Delay by SitePoint (@SitePoint) on CodePen.

This works, but imagine you want to change the duration of the first tween, or the number of times it repeats. You’ll soon realize that the second tween doesn’t automatically wait for the first one to come to a close before starting. Therefore, you’ll need to adjust the delay’s value on the second tween. With just two tweens and such a simple animation this won’t be much of a problem. Not so when your animations are more ambitious and the number of tweens grows.
That’s when you’ll be super happy to know that GSAP has you covered with its robust and flexible TimelineLite and TimelineMax, both included in TweenMax.
Coordinating Multiple Tweens with GSAP’s Timeline
Continue reading %GreenSock for Beginners (Part 2): GSAP’s Timeline%