Power up GSAP with Plug­ins

Add more fea­tures and func­tion­al­ity to de­signs

Web Designer - - Create With The Greensock Animation Platform -

css­plu­gin

greensock.com/docs/plug­ins/ Css­plu­gin

Al­lows you to an­i­mate al­most any CSS prop­erty in­clud­ing 2D and 3D trans­forms and colours. This plugin au­to­mat­i­cally checks to see if the ob­ject you are an­i­mat­ing is a DOM el­e­ment, then the en­gine cre­ates that CSS ob­ject for you!

textplu­gin

greensock.com/textplu­gin

The Textplu­gin an­i­mates the text of any DOM el­e­ment. It re­places it one char­ac­ter or one word at a time. So when the tween is fin­ished, the DOM el­e­ment’s text has been com­pletely re­placed. You can cre­ate in­cred­i­ble text ef­fects with this plugin!

Physic­s2d­plu­gin

greensock.com/physic­s2d­plu­gin Pro­vides ba­sic physics func­tion­al­ity for an­i­mat­ing an ob­ject po­si­tion, based on ve­loc­ity, an­gle, grav­ity, ac­cel­er­a­tion, ‘ac­cel­er­a­tio­nan­gle’, and/or fric­tion. It is in­cred­i­bly sim­ple to use to cre­ate sim­ple physics sim­u­la­tions with­out the over­head of a full physics en­gine.

bezier­plu­gin

greensock.com/bezier­plu­gin-js

This plugin al­lows you to an­i­mate vir­tu­ally any prop­erty along a curved Bezier path. You can de­fine the path as an ar­ray of points/val­ues that can be in­ter­preted mul­ti­ple ways, giv­ing loads of flex­i­bil­ity and dy­nam­ics to your mo­tion or an­i­ma­tion paths.

morphsvg­plu­gin

greensock.com/docs/plug­ins/ Morphsvg­plu­gin

Al­lows you to con­trol tweens that morph SVG paths. This al­lows you to morph one shape to an­other. This can be used to make unique and en­gag­ing tran­si­tions from one ob­ject to an­other, morph but­tons or SVG text. The pos­si­bil­i­ties are end­less.

drawsvg­plu­gin

greensock.com/drawsvg

This handy plugin al­lows you to re­veal or hide SVG strokes pro­gres­sively, to cre­ate a ‘draw­ing’ an­i­ma­tion of SVG paths. You can see a great ex­am­ple of this in ac­tion in the image above in Shane Mielke’s NFL logo an­i­ma­tions.

The Morphsvg and DRAWSVG plug­ins al­low you to cre­ate in­cred­i­ble SVG an­i­ma­tions, as seen here in th­ese NFL lo­gos by Shane Mielke

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.