SitePoint

GreenSock 3 Web Animation: Get to Know GSAP&#8217;s New Features On November 1st 2019, the GreenSock Animation Platform (GSAP) released version 3, which is its major upgrade to date. GSAP is a powerful, backward-compatible, performant, and mature JavaScript animation library that allows you to animate pretty much anything on the web — such as DOM elements, JS objects, SVGs, CSS properties, etc. Its intuitive syntax empowers developers with the ability to create some mind blowing animation effects in a relatively short amount of time and with the minimum amount of code. In this article, I’m going to highlight some great new features of GSAP 3 and get you started on how to use them to get things moving on web in no time. What’s New in GSAP 3 More Features and Smaller File Sizes GreenSock has been rebuilt from the ground up using ES6 modules. It’s still feature-packed, with more than 50 new library features, but it’s only half the size! Condensed Syntax for Fast Coding If you’ve ever used GSAP before, you’re already familiar with its intuitive, beginner-friendly syntax. The new API is even more simplified and quick to learn and use. For example, now you don’t need to decide whether you want to use TweenLite or TweenMax, TimelineLite or TimelineMax. There’s just one object, the gsap object: // tween gsap.to(selector, {}) // timeline const tl = gsap.timeline() Also, duration is no longer a parameter of the to(), from(), or fromTo() methods, but it’s set inside the vars object. In particular, the old TweenMax.to(selector, 1, {}) becomes gsap.to(selector, { duration: 1 }) Much more readable and also flexible. In fact, you can now set the duration using a function, for example. Another plus of this new, simplified API is that staggering animations are a breeze to code. No need to use the old staggerTo(), staggerFrom(), and staggerFromTo() methods because you can add staggers directly into the vars object of regular tweens: gsap.to(selector, { x: 50, duration: 1, stagger: 0.5 }) For more flexibility, you can use a stagger object like this: gsap.to(selector, { x: 50, duration: 1, stagger: { amount: 2, from: 'center' } }) Finally, GSAP’s eases have always been awesome, but a bit verbose. Not now. Version 3 comes with a more concise and readable syntax for setting eases. For example, instead of: Elastic.easeOut Elastic.easeIn Elastic.easeInOut you simply write: 'elastic' // same as 'elastic.out' 'elastic.in' 'elastic.inOut' Another simplification consists in the possibility of replacing labels with the < symbol to indicate the most recently added animation’s start time and the > symbol to indicate the most recently added animation’s end time. Below is an example of how you could use labels in a timeline: gsap.timeline() .add('start') // this tween starts at the beginning of the // entire animation .to(selector, {}, 'start') // this tween starts 0.5 seconds after // the previous tween .to(selector, {}, 'start+=0.5') You can now rewrite the code above as follows: gsap.timeline() .to(selector, {}, '<') .to(selector, {}, '<0.5') Inheritable Default Values for the Timeline If the values for some of the settings in your timeline remain the same throughout the child tweens, gone are the days of having to write those values over and over again. GSAP 3 lets you set those properties once in the parent timeline and they will be inherited by the child tweens. For example, instead of writing: const tl = new TimelineMax() tl.to(selector, 2, { ease: Power2.easeInOut, rotation: -180 }) .to(selector, 2, { ease: Power2.easeInOut, rotation: -360 }) Now, you can simply write: const tl = gsap.timeline({defaults: { duration: 2, ease: 'power2.inOut' }} ) tl.to(selector, { rotation: -180 }) .to(selector, { rotation: -360 }) Keyframes Your GSAP 3 code gets even more concise and readable with keyframes. Keyframes, a concept that is quite familiar to CSS developers, are great in those cases when you want to animate the same element in different ways. Instead of creating a separate tween for each stage of the animation, you can now pass an array of keyframes to the {} vars object and all the steps of the animation will be perfectly sequenced inside the same tween. Here’s an example of how this works: gsap.to(selector, {keyframes: { {x: 250, duration: 1}, {y: 100, duration: 1, delay: 0.5} }}) More Utility Functions This latest release of the GreenSock library comes packed with a bunch of new utility methods like snap(), which lets you snap a value to an increment or to the closest value in an array, and random(), which makes it a breeze to generate a random number based on parameters or randomly select an element in an array, and tons more. Simple Animations Here’s an example of using the three basic GSAP methods: to(), from(), and fromTo(): See the Pen GSAP3-to-from-fromTo-examples by SitePoint (@SitePoint) on CodePen. GSAP Eases for Life-like Animations Eases are foundational components of animation. They embody the timing of tweens and thereby add interest and naturalness to the motion you create on screen. GSAP lets you add tons of eases by means of the GreenSock Ease Equalizer, a handy tool that offers a visual representation of GSAP easing options as you select and tweak the best fit for the particular effect you’re after. Let’s try some eases for our musical bird: See the Pen GSAP3-eases-example by SitePoint (@SitePoint) on CodePen. An Example of Keyframe Animation with GSAP As I pointed out above, GSAP 3 gives you the option of implementing a number of tweens on the same element in a more efficient and readable way using keyframes. Here’s an example: See the Pen GSAP3-keyframes-example by SitePoint (@SitePoint) on CodePen. Using GSAP keyframes on the SVG bird element lets me apply a number of tweens without having to write each tween separately. The advantage is that I don’t need to repeat some of the code — for example, the selector code ('.bird') or any of the settings that remain the same throughout the animation. Continue reading GreenSock 3 Web Animation: Get to Know GSAP’s New Features on SitePoint. Aug 12 SVG 101: What Is SVG? Though it was conceived back in the late 1990s, SVG is in many ways the “ugly duckling” file format that grew up to become a swan. Poorly supported and largely ignored for most of the 2000s, since around 2017 all modern web browsers have been rendering SVG without serious issues, and most vector drawing programs have been offering the option to export SVG, which has unquestionably become a widely used graphic format on the Web. This hasn’t happened by chance. Although traditional raster graphic file formats like JPGs and PNGs are perfect for photographs or very complex images, it turns out that SVG is the one graphic format that most closely meets current web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility. So, What Is SVG and Why Should You Use It? SVG is an eXtensible Markup Language (XML)-based vector graphic format for the Web and other environments. XML uses tags like HTML, although it’s stricter. You cannot, for example, omit a closing tag since this will make the file invalid and the SVG will not be rendered. To give you a taste of what SVG code looks like, here’s how you would draw a white circle with a black border: <circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" /> As you can see, under the hood, SVG documents are nothing more than simple plain text files that describe lines, curves, shapes, colors, and text. As it’s human-readable, easily understandable and modifiable, when embedded in an HTML document as an inline SVG, SVG code can be manipulated via CSS or JavaScript. This gives SVG a flexibility and versatility that can’t ever be matched by traditional PNG, GIF or JPG graphic formats. SVG is a W3C standard, which means that it can inter-operate easily with other open standard languages and technologies including JavaScript, DOM, CSS, and HTML. As long as the W3C sets the global industry standards, it’s likely that SVG will continue to be the de facto standard for vector graphics in the browser. The awesomeness of SVG is that it can solve many of the most vexing problems in modern web development. Let’s breeze through some of them. Scalability and responsiveness Under the hood, SVG uses shapes, numbers and coordinates rather than a pixel grid to render graphics in the browser, which makes it resolution-independent and infinitely scalable. If you think about it, the instructions for creating a circle are the same whether you’re using a pen or a skywriting plane. Only the scale changes. With SVG, you can combine different shapes, paths and text elements to create all kinds of visuals, and you’ll be sure they’ll look clear and crisp at any size. In contrast, raster-based formats like GIF, JPG, and PNG have fixed dimensions, which cause them to pixelate when they’re scaled. Although various responsive image techniques have proved valuable for pixel graphics, they’ll never be able to truly compete with SVG’s ability to scale indefinitely. Programmability and interactivity SVG is fully editable and scriptable. All kinds of animations and interactions can be added to an inline SVG graphic via CSS and/or JavaScript. Accessibility SVG files are text-based, so when embedded in a web page, they can be searched and indexed. This makes them accessible to screen readers, search engines and other devices. Performance One of the most important aspects impacting web performance is the size of the files used on a web page. SVG graphics are usually smaller in size compared to bitmap file formats. Continue reading SVG 101: What Is SVG? on SitePoint. Aug 11