Pro Tips for Smarter Animation Code (New CSS-Tricks Article/Videos)

[GreenSock](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARGlodHRwOi8vZ3JlZW5zb2NrLmNvbS8_dXRtX3NvdXJjZT1OZXdzbGV0dGVyLU9jdC0yMDE3LW1pZCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9jYW1wYWlnbj1DU1MtVHJpY2tzLVNtYXJ0ZXJHAnt9) [Codepen](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARCBodHRwOi8vd3d3LmNvZGVwZW4uaW8vR3JlZW5Tb2NrL0cCe30~) [Github](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARCpodHRwczovL2dpdGh1Yi5jb20vZ3JlZW5zb2NrL0dyZWVuU29jay1KUy9HAnt9) [Facebook](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARCJodHRwOi8vd3d3LmZhY2Vib29rLmNvbS9ncmVlbnNvY2svRwJ7fQ~~) [Google+](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARChodHRwczovL3BsdXMuZ29vZ2xlLmNvbS8rZ3JlZW5zb2NrL3Bvc3RzRwJ7fQ~~) [LinkedIn](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARCpodHRwczovL3d3dy5saW5rZWRpbi5jb20vY29tcGFueS9ncmVlbnNvY2tHAnt9) [Twitter](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARCFodHRwOi8vd3d3LnR3aXR0ZXIuY29tL2dyZWVuc29jay9HAnt9) [Writing Smarter Animation Code](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARDVodHRwczovL2Nzcy10cmlja3MuY29tL3dyaXRpbmctc21hcnRlci1hbmltYXRpb24tY29kZUcCe30~) We're honored to share a new [CSS-Tricks article](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARDVodHRwczovL2Nzcy10cmlja3MuY29tL3dyaXRpbmctc21hcnRlci1hbmltYXRpb24tY29kZUcCe30~) (with videos) highlighting workflow tips that pros use for crafting their complex animations. We'd consider this a "must read" for anyone doing even moderately complex animations on the web. If you've ever coded an animation longer than 10 seconds with dozens of choreographed elements, you know how challenging it can be to avoid the dreaded "wall of code". Worse yet, editing someone else's animation (or even your own from 2 months ago) can be nightmarish. It doesn't have to be. This article contains two of the most important videos we have created yet. After watching, you may never approach scripted animation the same way again. [Learn more](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARDVodHRwczovL2Nzcy10cmlja3MuY29tL3dyaXRpbmctc21hcnRlci1hbmltYXRpb24tY29kZUcCe30~) NEW PRODUCT [GSDevTools](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARHRodHRwczovL2dyZWVuc29jay5jb20vZ3NkZXZ0b29scz91dG1fc291cmNlPU5ld3NsZXR0ZXItT2N0LTIwMTctbWlkJnV0bV9tZWRpdW09ZW1haWwmdXRtX2NhbXBhaWduPUNTUy1Ucmlja3MtU21hcnRlckcCe30~) GSDevTools GSDevTools gives you a visual UI for controlling and debugging GSAP animations. See how this tool can accelerate your animation workflow. [Learn More](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARHRodHRwczovL2dyZWVuc29jay5jb20vZ3NkZXZ0b29scz91dG1fc291cmNlPU5ld3NsZXR0ZXItT2N0LTIwMTctbWlkJnV0bV9tZWRpdW09ZW1haWwmdXRtX2NhbXBhaWduPUNTUy1Ucmlja3MtU21hcnRlckcCe30~) FEATURED TUTORIAL [Liquid Distortion](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAAREJodHRwczovL3R5bXBhbnVzLm5ldC9jb2Ryb3BzLzIwMTcvMTAvMTAvbGlxdWlkLWRpc3RvcnRpb24tZWZmZWN0cy9HAnt9) Liquid Distortion Effects Yannis Yannakopoulos shares tips on creatiting a mesmerizing slideshow with liquid distortion effects powered by PixiJS and GSAP. [Read Article](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAAREJodHRwczovL3R5bXBhbnVzLm5ldC9jb2Ryb3BzLzIwMTcvMTAvMTAvbGlxdWlkLWRpc3RvcnRpb24tZWZmZWN0cy9HAnt9) [GSAP Video Course](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARENodHRwczovL3d3dy5ub2JsZWRlc2t0b3AuY29tL2h0bWw1LWdyZWVuc29jay12aWRlby1jbGFzcy1nc2FwP2E9b3g3RwJ7fQ~~) GreenSock Training Videos Looking to get the most out of GSAP? Carl recorded videos for every lesson in our official training. Watch and learn at your own pace. There's no better way to learn GSAP fundamentals. You'll be coding like an animation superhero in no time. [Details](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARENodHRwczovL3d3dy5ub2JsZWRlc2t0b3AuY29tL2h0bWw1LWdyZWVuc29jay12aWRlby1jbGFzcy1nc2FwP2E9b3g3RwJ7fQ~~) GreenSock Showcase Take a look at the latest inspiring sites that use GSAP. [Resurrecting a Dragon](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARFtodHRwOi8vd3d3Lm5hdGlvbmFsZ2VvZ3JhcGhpYy5jb20vbWFnYXppbmUvMjAxNy8wNi9ub2Rvc2F1ci0zZC1pbnRlcmFjdGl2ZS1kaW5vc2F1ci1mb3NzaWwvRwJ7fQ~~) Resurrecting a Dragon [Coraline Colasse](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARB5odHRwOi8vd3d3LmNvcmFsaW5lY29sYXNzZS5mci9HAnt9) Coraline Colasse [Coulee Creative](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARBtodHRwczovL2NvdWxlZWNyZWF0aXZlLmNvbS9HAnt9) Coulee Creative [One Day in my World](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARB9odHRwOi8vd3d3Lm9uZWRheWlubXl3b3JsZC5jb20vRwJ7fQ~~) One Day in my World [View All Showcases](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARHxodHRwOi8vZ3JlZW5zb2NrLmNvbS9leGFtcGxlcy1zaG93Y2FzZXMvP3V0bV9zb3VyY2U9TmV3c2xldHRlci1PY3QtMjAxNy1taWQmdXRtX21lZGl1bT1lbWFpbCZ1dG1fY2FtcGFpZ249Q1NTLVRyaWNrcy1TbWFydGVyRwJ7fQ~~) NEW: Download GSAP 1.20.3 Be sure to snag a fresh batch of code at your earliest convenience. [Download Now](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARHpodHRwOi8vZ3JlZW5zb2NrLmNvbS8_ZG93bmxvYWQ9R1NBUC1KUyZ1dG1fc291cmNlPU5ld3NsZXR0ZXItT2N0LTIwMTctbWlkJnV0bV9tZWRpdW09ZW1haWwmdXRtX2NhbXBhaWduPUNTUy1Ucmlja3MtU21hcnRlckcCe30~) [Club Greensock] For an all access pass to premium content - [Join Club GreenSock](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARG5odHRwOi8vZ3JlZW5zb2NrLmNvbS9jbHViLz91dG1fc291cmNlPU5ld3NsZXR0ZXItT2N0LTIwMTctbWlkJnV0bV9tZWRpdW09ZW1haWwmdXRtX2NhbXBhaWduPUNTUy1Ucmlja3MtU21hcnRlckcCe30~) [Products](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARHJodHRwOi8vZ3JlZW5zb2NrLmNvbS9wcm9kdWN0cy8_dXRtX3NvdXJjZT1OZXdzbGV0dGVyLU9jdC0yMDE3LW1pZCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9jYW1wYWlnbj1DU1MtVHJpY2tzLVNtYXJ0ZXJHAnt9) [Learning](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARHJodHRwOi8vZ3JlZW5zb2NrLmNvbS9sZWFybmluZy8_dXRtX3NvdXJjZT1OZXdzbGV0dGVyLU9jdC0yMDE3LW1pZCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9jYW1wYWlnbj1DU1MtVHJpY2tzLVNtYXJ0ZXJHAnt9) [Support](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARHFodHRwOi8vZ3JlZW5zb2NrLmNvbS9zdXBwb3J0Lz91dG1fc291cmNlPU5ld3NsZXR0ZXItT2N0LTIwMTctbWlkJnV0bV9tZWRpdW09ZW1haWwmdXRtX2NhbXBhaWduPUNTUy1Ucmlja3MtU21hcnRlckcCe30~) [Blog](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARG5odHRwOi8vZ3JlZW5zb2NrLmNvbS9ibG9nLz91dG1fc291cmNlPU5ld3NsZXR0ZXItT2N0LTIwMTctbWlkJnV0bV9tZWRpdW09ZW1haWwmdXRtX2NhbXBhaWduPUNTUy1Ucmlja3MtU21hcnRlckcCe30~) [Events](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAARHBodHRwOi8vZ3JlZW5zb2NrLmNvbS9ldmVudHMvP3V0bV9zb3VyY2U9TmV3c2xldHRlci1PY3QtMjAxNy1taWQmdXRtX21lZGl1bT1lbWFpbCZ1dG1fY2FtcGFpZ249Q1NTLVRyaWNrcy1TbWFydGVyRwJ7fQ~~) Copyright © 2017, GreenSock Inc. All Rights Reserved 28W051 Timber Ln, West Chicago, IL 60185 Prefer to stop receiving these emails? [Unsubscribe here](~/AALQZgA~/RgRbw2mdP0EIAKzv9X0-F4RXA3NwY1gEAAAAAFkGc2hhcmVkYQdoZWxsb181YA0zNS4xNjIuMTcyLjcwQgoAAp3k4FnAriYfUht0cmlzdHJhbWJhbGR3aW45MkBnbWFpbC5jb20JUQQAAAAAFERwaHR0cHM6Ly9ncmVlbnNvY2suY29tL2ZvcnVtcy91bnN1YnNjcmliZS8_ZW1haWw9dHJpc3RyYW1iYWxkd2luOTJAZ21haWwuY29tJmtleT1jOTllZTJiM2FiN2M5NjYxZjJlZjllMDI1OTBhNjQ1Y0cCe30~)