Join Ray Villalobos for an in-depth discussion in this video Creating a tween animation, part of Building a Responsive Single-Page Design with Sass.
Now that we've finished up our CSS styles, it's time to start doing some animation.…You've probably been wondering how we're going to get this done.…And I've chosen to use a framework called ScrollMagic.…And you can see the URL right here.…And it's a pretty cool animation framework.…What I like about it is that it goes really well with what we've been doing.…It doesn't add a lot of classes in your HTML,…which is one of the things that's kind of my pet peeves.…So, I don't like to see HTML with a bunch of classes.…
And some of the other animation frameworks do this.…Now, if you go to this page and…you continue to scroll, you can see the different effects.…Essentially, it allows you to do three types of things.…One, it lets you control animation based on the scrolling.…You can see my scrolling is over here on the right on a Mac.…They're a little bit hidden.…And as I scroll the animation up and down, it's going to create and control effects.…The other type of control that you can do is called a pin, and…a pin allows you to grab an element and pin it to a certain point on the page.…
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling
Skill Level Advanced
1. Getting Started
2. Organizing Your Sass
3. Creating Responsive Grids with Susy
4. Animating Your Layouts
Next steps1m 38s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.