Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
GSAP

12 Articles
{
,

}
Direct link to the article Responsive Animations for Every Screen Size and Device
animation canvas flip GSAP SVG animation

Responsive Animations for Every Screen Size and Device

Before I career jumped into development, I did a bunch of motion graphics work in After Effects. But even with that background, I still found animating on the web pretty baffling.

Video graphics are designed within a specific ratio and …

Avatar of Cassie Evans
Cassie Evans on Oct 20, 2022
Direct link to the article How I Chose an Animation Library for My Solitaire Game
animation GSAP strategy

How I Chose an Animation Library for My Solitaire Game

There is an abundance of both CSS and JavaScript libraries for animation libraries out there. So many, in fact, that choosing the right one for your project can seem impossible. That’s the situation I faced when I decided to build …

Avatar of Holger Sindbaek
Holger Sindbaek on Jun 29, 2022
Direct link to the article An Interactive Starry Backdrop for Content
canvas GSAP react

An Interactive Starry Backdrop for Content

I was fortunate last year to get approached by Shawn Wang (swyx) about doing some work for Temporal. The idea was to cast my creative eye over what was on the site and come up with some …

Avatar of Jhey Tompkins
Jhey Tompkins on May 18, 2022
Direct link to the article Parallax Powered by CSS Custom Properties
animation custom properties GSAP

Parallax Powered by CSS Custom Properties

Good friend Kent C. Dodds has recently dropped his new website which had a lot of work go into it. I was fortunate enough that Kent reached out a while back and asked if I could come up with some …

Avatar of Jhey Tompkins
Jhey Tompkins on Nov 19, 2021
Direct link to the article Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling
GreenSock GSAP infinite scroll scroll-snap scrolling ScrollTrigger

Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling

I‘m not sure how this one came about. But, it‘s a story. This article is more about grokking a concept, one that’s going to help you think about your animations in a different way. It so happens that this particular …

Avatar of Jhey Tompkins
Jhey Tompkins on Apr 14, 2021
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 Feb 19, 2022)
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)
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Agency Coaching
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top