GreenSock for Beginners: a Web Animation Tutorial (Part 1)

My aim in this article is to give you a thorough introduction to GreenSock, also known as GSAP (GreenSock Animation Platform), a super performant, professional-grade HTML5 animation engine for the modern web.
This is the fourth article in the series Beyond CSS: Dynamic DOM Animation Libraries.
Here’s what I covered in the past issues:

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.

GSAP has too many features to fit in one article. This is why I’ve opted for a multi-part article all dedicated to various areas of the GreenSock library.
In more detail:

By the end of this first part, you’ll have learned about GreenSock’s capabilities and features, licensing model, core components, and basic syntax to tween and stagger DOM elements
In part 2, I’ll introduce GreenSock’s native timeline functionality
Finally, part 3 will focus on some powerful bonus plugins GreenSock makes available to accomplish complex animation tasks easily with a few lines of code.

If you’re already a GSAP Ninja, check out Animating Bootstrap Carousels with the GSAP Animation Library, where George Martsoukos illustrates an effective use of GreenSock for UI animation.
Without further ado, brace yourself, the journey is about to begin!
What is GreenSock and What Is It Good For?
GreenSock is the de facto industry-standard JavaScript animation platform available today.
It’s a mature JavaScript library that has its roots in Flash-based animation. This means the guys behind GreenSock know web animation inside-out, the library has been around for a long time and is not going anywhere any time soon.
GSAP includes a comprehensive suite of tools, utilities, and plugins you can leverage to handle any web animation challenge you happen to face, from animating SVGs consistently across multiple browsers to coding complex animation sequences, dragging elements across the screen, splitting and scrambling text, and so much more.
To mention just three things I particularly love about GreenSock:

Although the library is mega rich in terms of features, the learning curve is relatively shallow because it uses an intuitive and consistent syntax across all its various implementations and plugins. In addition, it offers awesome documentation, tutorials, and support via the GSAP Forums. Also, the library itself is continually updated and maintained. These are all crucial factors when building a project which relies on an external library for any of its key features and user experience
It’s modular and light-weight, which means it won’t add bloat to your web projects
Thanks to its powerful timeline functionality, GSAP affords precise control over the timings not only of single tweens, but also of multiple tweens as part of a whole animation flow.

Core GreenSock Tools
These are GreenSock’s core modules:

TweenLite — the foundation of GSAP, a lightweight and fast HTML5 animation library
TweenMax — TweenLite’s extension, which besides comprising TweenLite itself, includes:


TimelineLite — a lightweight timeline to take control of multiple tweens and/or other timelines
TimelineMax — an enhanced version of TimelineLite, which offers additional, non essential capabilities like repeat, repeatDelay, yoyo, and more.

You can choose to include TweenLite in your project and then add other modules separately as you need them. Alternatively, you can choose to include TweenMax (the approach I’m going to take in this multi-part series), which packages all the core modules in one optimized file.
It’s also worth noting that GSAP offers some paid extras like the DrawSVGPlugin to create animated line drawing effects with SVGs, the powerful MorphSVGPlugin to morph one SVG shape into another (even without requiring that the two shapes have the same number of points), and others. Although you need to be a paying member of the Club GreenSock to use these plugins, GSAP makes available to you for free a special CodePen-based version so that you can try them out. This is a cool offer I’m going to take full advantage of later on in part 3 (and you with me).
GSAP hasn’t adopted a free open-source license like MIT largely for reasons that concern keeping the product’s quality high and its maintenance financially sustainable over the long term.
GreenSock makes available two licenses:

Standard License — use of the library is totally free in digital products that are free to use (even if developers get paid to build them)
Business Green — this license includes three tiers with the middle tier, Shockingly Green, being the most popular. As a Shockingly Green member you’ll gain access to all the bonus plugins and extras, but without the commercial license.

Despite the non-adherence to MIT and similar free use licenses, by letting you peek into its raw code both on the project’s GitHub repo and in your downloads, GreenSock encourages you to learn from its developers’ code and their mastery of JavaScript animation, which is one of the best features of the open source philosophy.
Tweening with GreenSock
Continue reading %GreenSock for Beginners: a Web Animation Tutorial (Part 1)%


Pure CSS3 LavaLamp Menu

I think that you have already seen various animated menus with the LavaLamp effect (based on jQuery plugin). Today I would like to tell you how to repeat the same behavior only with CSS3 (without any JavaScript). I had to use CSS3 transitions in our menu (to animate elements). So, if you are ready, let’s start.
Here are samples and downloadable package:


New & Upcoming Course Highlights: Introducing Text Editors & Express Basics

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. Start learning to code today…
The post New & Upcoming Course Highlights: Introducing Text Editors & Express Basics appeared first on Treehouse Blog.


Powerful New Additions to the CSS Grid Inspector in Firefox Nightly

CSS Grid is revolutionizing web design. It’s a flexible, simple design standard that can be used across all browsers and devices. That’s why we built CSS Grid Inspector. We’ve been working hard on the Firefox Developer Tools Layout panel, adding powerful new features to the Grid Inspector and Box Model. The latest enhancements are now available in Firefox Nightly.


CSS Shapes, clipping and masking – and how to use them

The general release of Firefox 54 is just around the corner and it will introduce new features into an already cool CSS property: clip-path, a property that allows us to clip (i.e., cut away) parts of an element. With Firefox 54, you will be able to use CSS shapes as well: insets, circles, ellipses and polygons. In this demo-rich post, we’ll explore the features of clipping and masking and how they are used.


Three New Products Help Developers With PDFs

pdfHTML to Convert HTML and CSS to PDF
An iText 7 add-on, pdfHTML is a premium upgrade to the previous XML Worker from iText 5. The new solution provides more functionality out of the box and easier extensibility and customization.
“HTML is ubiquitous. A lot of software already outputs HTML in one way or another, and most developers know at least the basics,” said Raf Hens, iText director of product management. “As such, pdfHTML is a convenient way to integrate PDF functionality, allowing developers to use existing HTML and CSS skills and resources to quickly create PDF documents.”


How to Track Changes in the DOM Using MutationObserver

What Is MutationObserver?
MutationObserver is a Web API provided by modern browsers for detecting changes in the DOM. With this API one can listen to newly added or removed nodes, attribute changes, or make changes in the text content of text nodes.
Why would you want to do that?


General CSS Path Transform for ASP.NET Bundling

In a couple of ASP.NET projects, I have had CSS path transform problems with bundling and minification. CSS files are coming in from external agencies and from different open-source projects and the number of files is so big that it is problematic to go through all of these after updates. I found a path transform solution that works for me in most cases and it is described here.

What Does CssRewriteUrlTransform Do, Exactly?
It seems there is something up with CssRewriteUrlTransform class. From MSDN, we can read the following about it: ‘Rewrites urls to be absolute so assets will still be found after bundling.’ We can find out about it from the Process() method page: Example: bundle.Include(“~/content/some.css”) will transform url(images/1.jpg) => url(/content/images/1.jpg).