Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
GSAP

7 Articles
{
,

}
Direct link to the article GreenSock ScrollTrigger
GSAP

GreenSock ScrollTrigger

High five to the Greensock gang for the ScrollTrigger release. The point of this new plugin is triggering animation when a page scrolls to certain positions, as well as when certain elements are in the viewport. Anything you’d want configurable …

Avatar of Chris Coyier
Chris Coyier on Jan 28, 2021
Direct link to the article Tips for Writing Animation Code Efficiently
animation GSAP waapi

Tips for Writing Animation Code Efficiently

I’ve been coding web animations and helping others do the same for years now. However, I have yet to see a concise list of tips focused on how to efficiently build animations, so here you go!

I will be using …

Avatar of Zach Saucier
Zach Saucier on Apr 10, 2020 (Updated on Jul 29, 2020)
Direct link to the article How to Animate on the Web With GreenSock
animation GreenSock GSAP SVG web animation

How to Animate on the Web With GreenSock

There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: …

Avatar of Sarah Drasner
Sarah Drasner on Jan 13, 2020 (Updated on Jan 20, 2021)
animation GSAP Sass waapi

Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API

Staggered animation, also known as “follow through” or “overlapping action” is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life”. At its core, the concept …

Avatar of Opher Vishnia
Opher Vishnia on Jul 4, 2017 (Updated on Mar 30, 2020)
animation GSAP SVG

Cars with Broken Windshield Wipers

I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could …

Avatar of Chris Coyier
Chris Coyier on Dec 22, 2016
GreenSock GSAP offset-path SMIL SMIL features SMIL replacement

SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

SMIL, SVG’s native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in WebKit, and has never (nor will likely ever) exist for Microsoft’s …

Avatar of Sarah Drasner
Sarah Drasner on Dec 14, 2015 (Updated on Aug 21, 2017)
animation benchmarks GreenSock GSAP SVG

Weighing SVG Animation Techniques (with Benchmarks)

The following is a guest post by Sarah Drasner (@sarah_edo). Sarah has been researching and giving talks about animation lately. I jumped at the chance to have her share some of that research here, this time focusing on …

Avatar of Sarah Drasner
Sarah Drasner on Jan 27, 2015
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top