https://webdesign.tutsplus.

com/courses/up-and-running-with-css-keyframe-
animations/lessons/creating-keyframes-with-css
 Up and Running With CSS
Keyframe Animations
by Craig Campbell6 Jun 2016

Lessons:2Length:13 minutes

Animation CSS

0:42





o
o
o
o
o

o
o
o
o
o


 Turn Autoplay Off

Next Lesson

Up and Running With CSS Keyframe Animations

Introduction
00:41

In this Coffee Break Course, I’ll show you everything you need to know to get
started creating animations using the CSS keyframe and animation properties.
In just ten minutes, you'll learn how to create animations in the browser
without having to rely on external plugins or extensive programming.
Watch the other Coffee Break Course in the series:

 Up and Running With CSS Transitions

1.Up and Running With CSS Keyframe Animations

2 lessons, 13:13

1.1
Introduction
00:41

1.2
Creating Keyframes With CSS

12:32
 Craig Campbell

Craig has been doodling on computers since the first time he opened Paintbrush in Windows
3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful
things on computers.

craigsoup

Previous

 Turn Autoplay Off

Next Lesson

6.2 Animating the Rule

With your items in place, it’s time to animate. In this lesson, I will demonstrate
how to use the CSSRulePlugin to animate the values of an entire CSS rule.

Related Links
  Starting Pen

1.Introduction
2 lessons, 03:33

1.1
Introduction
00:35

1.2
The Plugins

02:58

2.Animating HTML Attributes With AttrPlugin

4 lessons, 28:21

2.1
Quick Review
06:32

2.2
Tweening SVG Shapes
08:13

2.3
Setting Up Your SVG
09:46

2.4
Tweening Attributes
03:50

3.Animating on a Curve With the Bezier Plugin

3 lessons, 27:48

3.1
Animating in a Circle
14:27

3.2
Bezier Properties
07:00

3.3
More Curves

06:21

4.Animating JavaScript Color Properties

2 lessons, 20:27

4.1
Tweening Properties
10:11

4.2
Animating a Gradient

10:16
5.Animating Text Changes With TextPlugin
1 lesson, 08:02

5.1
Animating Text

08:02

6.Animating CSS Rules

2 lessons, 16:47

6.1
Starting From Scratch
06:58

6.2
Animating the Rule

09:49

7.Directional Rotation
3 lessons, 30:20

7.1
Directional Rotation Basics
10:32

7.2
Random Rotation
08:19
7.3
Return on Hover

11:29

8.Conclusion
1 lesson, 00:42

8.1
Final Thoughts

00:42

Craig Campbell
Craig has been doodling on computers since the first time he opened Paintbrush in Windows
3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful
things on computers.

craigsou

New Course: Advanced

Animation With GSAP
Plugins
by Andrew Blackman14 Apr 2016

Languages:

Animation JavaScriptGreenSock Animation Platform

W
hat You'll Be Creating
The GreenSock Animation Platform is a powerful JavaScript library for animating
HTML elements in the browser. In our new course, Advanced Animation With GSAP
Plugins, you will learn how to take your GSAP animations to the next level using the
plugins that come with the platform.

What You’ll Learn

Our recent GreenSock Animation Platform: First Steps course covered the
fundamentals of GreenSock animation and introduced you to the platform. 

In this new course, you will go beyond the basics of GreenSock animation as Envato
Tuts+ instructor Craig Campbell takes you on a tour of the plugins that ship with
GSAP. You'll learn about animating on a curve with the Bezier plugin, animating CSS
rules, using directional rotation, and more.

Watch the Introduction

Start Learning With a Free Trial

You can take our new course straight away with a free 10-day trial of our monthly
subscription. If you decide to continue, it costs just $15 a month, and you’ll get access
to hundreds of courses, with new ones added every week.

If you want to see more of what's possible with GSAP, check out the GreenSock
items on Envato Market.
 Andrew Blackman
Freelance writer and editor

Andrew Blackman is a copy editor for Envato Tuts+, and writes for the Business section. He's a former
Wall Street Journal staff reporter, now travelling around Europe and working as a freelance writer and
editor. He maintains a popular blog about writing and books.

BlackmanAndrew

How to Animate a Coffee-

Drinking Sprite With
ScrollMagic
by Dennis Gaebel14 Jun 2016

Difficulty:IntermediateLength:MediumLanguages:

Animation SassJavaScriptScrollMagic

Creating scroll-initiated motion can be immensely gratifying. We’ll be diving into a

particular effect seen on the Casper Mattress website (created by Jonnie
Hallman) which captivated many developers. In this tutorial we’ll breakdown the
steps needed to make a similar sprite animation with ScrollMagic.

End Result
Let’s take a look at what we’ll be creating:

The Sprite
Before we begin coding we’ll need a sprite to use as the basis for this demo. Here’s
the one we’ll use: me, enjoying a lovely cup of coffee. You can grab a copy in order
to follow the tutorial.
Mmmmm

The entire sprite is arranged in linear fashion along the x-axis. Each image within the
sprite is 200px x 509px resulting in a total size of 2000px x 509px (each single image
is 200px wide multiplied by ten keyframes). 

Extra Points Already

For the extremely curious I specifically utilized the Gulp
plugin gulp.spritesmith instead of piecing together the sprite manually. While it’s
not required to create this demo, here’s the setup I used in case you’d like to try it
yourself:

01 var gulp = require('gulp');

02 var spritesmith = require('gulp.spritesmith');

03  

gulp.task('sprite', function () {
04
  var spriteData = gulp.src('images/*.png').pipe(spritesmith({
05
    imgName: 'sprite.png',
06
    cssName: 'sprite.css',
07
    algorithmOpts: { sort: false },
08
09     algorithm: 'left-right',

10   }));

11   return spriteData.pipe(gulp.dest('images/dist'));

12 });

It's important to note the algorithm property can accept an assortment of values in

order to arrange the sprite as linear, vertical, diagonal and more. I recommend you
take the time to read more about this Gulp plugin for any of your future sprite needs.

Creating the Markup

The markup is the soil from which our demo will grow so we’ll start by creating the
container where the sprite animation will take place. We’ll also construct some
dummy containers for the sake of having regions to scroll through.

1 <section></section>

2  

3 <section>

4   <div></div>

5 </section>

6  

<section></section>
7

The middle section with the containing  div  is where our sprite motion fires, but
we’ll need to add some classes and ids for styling and event hook purposes.

1 <section class="panel"></section>

2  

3 <section class="panel js-scrollpin">

4   <div class="frame"></div>

5 </section>

6  

7 <section class="panel"></section>

The class  js-scrollpin  is the point from which the viewport will become “pinned”
as the user scrolls. This sticking point will last for a defined duration set from within
our JavaScript ( we’ll address this in an upcoming section). The inner  div  with the
class  frame  will be the point where the scrolling magic takes place.

Creating the Styles

Our demo wouldn’t be complete without the styling, so let’s get started! To write the
code with updates and refinements in mind we’ll use Sass, allowing us to create the
loop and variables for succinct authoring.

1 $frame-count: 9;

2 $offset-val: 100;

These variables are defining: 

 the frame count, equal to the number of images in the sprite 

 and the offset value that positions the background-position of each singular
image inside the sprite. 

You may notice that I’ve only set the frame count to 9 due to the fact the first frame is
already in view leaving 9 frames remaining in the sequence (10 - 1 = 9).

I’ve Been Framed

As mentioned, each image within our sprite is 200px wide so I’ll define the width of
the frame as being 200px. 
1 .frame {

2   width: 200px;

3   background-image: url(sprite.png);

4   background-repeat: no-repeat;

  background-position: 0 50%;
5
}
6

The image is loaded as a background and positioned accordingly.

Now for the loop:

1 @for $i from 1 through $frame-count {

2   .frame#{$i} {

3     background-position: -(($i * $offset-val) * 2) + px 50%;

4   }

}
5

This Sass loop is the most important part. As we scroll, each correlating class will be
toggled via JavaScript; these toggled class names correlate to the position of each
image within the sprite.

01 .frame1 {

02   background-position: -200px 50%;

}
03
 
04
.frame2 {
05
  background-position: -400px 50%;
06
}
07
 
08
.frame3 {
09
10   background-position: -600px 50%;

11 }

12  

.frame4 {
13
  background-position: -800px 50%;
14
}
15
 
16
.frame5 {
17
  background-position: -1000px 50%;
18
}
19
 
20
.frame6 {
21   background-position: -1200px 50%;

22 }

23  

24 .frame7 {

25   background-position: -1400px 50%;

26 }

27  

.frame8 {
28
  background-position: -1600px 50%;
29
}
30
 
31
.frame9 {
32
  background-position: -1800px 50%;
33
}
34
35

The compiled output from our Sass helps to explain how this math works, but let’s
dive deeper to make sure we fully understand how the arithmetic is calculated.

1 $i * $offset-val

On each iteration of the loop the  $i  variable cycles from 1 through 9 and multiplied
by the offset value (100). Finally we take the entire result and multiply by a factor of
2. The factor of 2 will help to move the background position in relation to where each
image resides in the sprite. It also matches the offset value defined in the JavaScript
which we’ll discuss in the next part of our journey.

Casting the JavaScript

The key to this entire effect is the JavaScript. For this particular demo we’ll be
using ScrollMagic; a JavaScript library for magical scroll interactions. Before writing
any ScrollMagic code let’s make sure we have the ScrollMagic library loaded.

With that done, we’ll establish some variables.

1 var frame        = document.querySelector('.frame'),

2     frame_count  = 9,

3     offset       = 100;

The variables defined should look pretty familiar as they directly relate to the values
we specified in our Sass, with the exception of selecting the frame class
using  document.querySelector .

1 var controller = new ScrollMagic.Controller({

2   globalSceneOptions: {

    triggerHook: 0
3
  }
4
});
5

The controller is the main class required once per scroll container.
Our  globalSceneOptions  object passed contains a  triggerHook . This property’s
values can be a number between 0 and 1 defining the position of the trigger hook in
relation to the viewport.

1
new ScrollMagic.Scene({
2   triggerHook: 0,

3   triggerElement: '.js-scrollpin',

4   duration: (frame_count * offset) + 'px',

5   reverse: true

6 })

.setPin('.js-scrollpin')
7
.addTo(controller);
8

We define the pin once in the target scene and attach our animation within the same
scene. We’ll create a scene for every class and toggle them on or off depending on the
offset value of the scroll. 

Break it Down
There are a few things going still left to explain so let’s break down the important
parts:

1 triggerElement: '.js-scrollpin'

The Trigger element is the referencing id of the panel that contains our sprite.

1 .setPin('.js-scrollpin')

The  setPin  method will tell ScrollMagic to, once the  triggerElement  is reached,
pin that panel to the top of the viewport.
1 duration: (frame_count * offset) + 'px',

The duration will help control how long the motion occurs, based on the frame count
and offset. As you’ll remember, we had a frame count of 9 and an offset of 100. These
values when multiplied together equate to 900px; the total value of the trigger offset
points.

1
for (var i = 1, l = frame_count; i <= l; i++) {
2   new ScrollMagic.Scene({

3       triggerElement: '.js-scrollpin',

4       offset: i * offset

5     })

6     .setClassToggle(frame, 'frame' + i)

    .addTo(controller);
7
}
8

Since there are 9 frames, we loop through that number of iterations whilst defining the
same panel for a triggerElement. On each iteration of the loop we multiply that loop’s
value by the offset amount (1 * 100, 2 * 100, 3 * 100…). We also define a class to
toggle through;  .frame1 ,  .frame2 ,  .frame3  and so on. Each of the classes
represents the background position of each image within the sprite.

And We’re Done!

Conclusion
You might be wondering what the total file size of the sprite is, so let me lay down
some numbers. Uncompressed the image weighed in at a hefty 1.5 MB, but when
compressed resulted in a more acceptable 319 KB. This does not include the 6KB
gzipped to load the ScrollMagic library. 

I hope you're inspired by this technique to use in your next project and please feel
free, as always, to ask questions in the comments below. Happy coding!
 Dennis Gaebel
Developer & Designer - Buffalo NY

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction
Development & Pattern Based Design. http://droidpinkman.io.

DroidPinkman
/* add transitions here by uncommenting 1, 2, or 3 */

.button {

/* 1. all properties, nothing flashy */

/* transition: all .1s; */

/* 2. individually listed properties,

different speeds */

/*transition: background .2s,

top .05s,

left .05s; */

/* 3. individually listed properties,

different speeds,

added easing */

/*transition: background .2s ease-in,

top .05s ease-out,

left .05s ease-out; */

}
/* base styles */

body {

text-align: center;

padding-top: 100px;

background: #fafafa;

.button {

font-family: 'Roboto', sans-serif;

background: #e1e1e1;

display: inline-block;

padding: 30px 50px;

font-size: 20px;

font-weight: normal;

text-decoration: none;

color: #666;
 box-shadow: -3px 5px 0px rgba(0,0,0,0.2);

position: relative;

top: 0px;

left: 0px;

.button:hover {

background: #2098d1;

color: white;

.button:focus {

background: #2098d1;

color: white;

box-shadow: none;

top: 5px;

left: -3px;

}
* simple "from > to" */
@keyframes move {
from {
left: 5%;
}
to {
left: 85%;
}
}

/* assign animation to ball element */

.ball {
animation: 1s move;
}

/* base styles */

body {
text-align: center;
background: #fafafa;
position: relative;
}

.ball {
width: 10%;
padding-bottom: 10%;
border-radius: 50%;
background: #2098d1;
box-shadow: -3px 5px 0px rgba(0,0,0,0.2);
position: absolute;
top: 100px;
left: 5%;
}
<>html:
<div class="ball"></div>

<div class="ball"></div>
<div class="ball bouncing"></div>
<div class="ball bouncing"></div>
div class="ball"></div>

/* assign animation "move" and "bounce" to ball element */

.ball {
animation: .5s move infinite alternate linear;
}

.ball.bouncing {
animation: .5s bounce infinite cubic-bezier(.1,.25,.1,1) alternate;
}

/* define keyframes */

@keyframes move {
0% {
transform: translateY(200%);
}
100% {
transform: translateY(0);
}
}

@keyframes bounce {
0% {
transform: translateY(200%);
}
100% {
transform: translateY(0);
}
}

/* base styles */

body {
text-align: center;
background: #fafafa;
padding: 50px;
text-align: center;
}
.ball {
width: 10%;
padding-bottom: 10%;
border-radius: 50%;
background: #2098d1;
box-shadow: 0px 5px 0px rgba(0,0,0,0.2);
margin-left: 10%;
display: inline-block;
}
 1. WEB DESIGN
2. WORKFLOW

30 Days to Your First

Website Design
by Ian Yates6 Oct 2011

Lessons:31Length:4.7 hours

Workflow HTMLCSSUI DesignUX

2:44


o
o
o
o
o

o
o
o
o

 Turn Autoplay Off

Next Lesson

30 Days to Your First Website Design

Introduction
02:44

Ready to design your first website but not sure how to start? Ian Yates, Editor
of Webdesigntuts+ and veteran web designer, walks you through every step
of getting your first web design up and running. From the planning stages up
until the pages go live, you’ll get expert guidance on how to make sure your
first design gets done, and done right.

1.Introduction
5 lessons, 25:39

1.1
Introduction
02:44

1.2
What is Web Design?
06:01
1.3
Usability
06:07

1.4
Content
05:20

1.5
Goals

05:27

2.Planning
7 lessons, 45:38

2.1
Three Don'ts of Design Theory
02:48

2.2
Inspiration
05:45

2.3
Style and Theme
06:05

2.4
Conceptual Sketching
11:12

2.5
Designing with Grids
09:01

2.6
The Anatomy of a Webpage
05:44

2.7
Whitespace

05:03

3.Design Concepts
7 lessons, 1:10:58

3.1
Backgrounds and Textures
10:18

3.2
Navigation
08:31

3.3
Web Typography
09:12
3.4
Features Section
16:04

3.5
Contact Form
12:25

3.6
Footer Section
09:05

3.7
Prepping Your Design

05:23

4.Site Elements
5 lessons, 1:04:40

4.1
Sprite Sheets
14:07

4.2
Project Organization
04:47

4.3
Code Editors
14:45

4.4
Web Standards Model
16:25

4.5
Semantics

14:36

5.Prepping Your Design

6 lessons, 1:14:31

5.1
Further into CSS
12:49

5.2
Browsers
16:50

5.3
Behavior: jQuery slideshow
12:43

5.4
Form Validation
13:23
5.5
Cross Browser Testing
11:21

5.6
Google Analytics

07:25

6.Conclusion
1 lesson, 00:48

6.1
Conclusion

00:48
 Ian Yates

My name's Ian; I'm the web design editor round these parts and I also run the translation
project. Ask me anything you like about web design, in any language… I'll find someone who
knows the answer!