Louis Hoebregts “GSAP is awesome - I just dropped all my code, like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers! You have no idea how cool it is to offload that thought process to you guys!” “I will never say it enough but you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you 🥰”.I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. After all these years, and impressive competitors, it's still Best In “I really need to commit to using GSAP more in my daily work & demos. “Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using 's GSAP.“The best thing about GSAP is that it just works, and it works well.If the layer hierarchy is identical, then if the shape paths change you’ll see an animation. You can animate the path of a shape by setting things up correctly in your artboards. Animating the stroke start to 1 (L), randomly (M), stroke end to 0 (R) Paths Want to trace your shape? You can set the end points of a shape’s stroke to either 0, or 1 – the beginning and end, respectively – which allows you to animate along the path of the shape. A pattern of 942, animating its offset from 942 to 0 to -942 This is particularly useful when you want to reveal a pattern – and a key technique for animating a path around a shape in HTML.
You can also set the stroke offset of a shape. The custom approach lets you set a value for the pattern by using any amount of numbers, separated by commas, like so: Offset (HTML & Swift) The simple approach is to set a 1, 2, 3, or 4 component pattern. Patterns are defined by alternating numbers that represent dashes and gaps. The Codepen logo merges a number of simple shapes into a single complex path. Here are some examples: The Github animation uses a number of paths. Complex Shapes From Sketchįlow easily handles importing complex shapes from Sketch, ones with multiple components fused together with path operations. It also doesn’t create very much overhead for languages like Swift. This approach makes it very consistent for exporting to a variety of different programming languages. Here is what the code looks like for one of the larger triangles in the Flow logo: In HTML we take advantage of the SVG/SMIL animations and everything is pretty much lovely. Then, on platforms like iOS we provide a simple class that converts SVG code to a proper path. To do this we created a way to export shapes in a cross-platform way that is consistent, and the result is that we export SVGs. A Shape for Every PlatformĪ critical goal with Flow is to enable export to multiple platforms. One might argue that you can use pngs everywhere, and that’s fair, but in a world of different screen resolutions, etc., dynamically scalable assets are critical and that’s where shapes come in. The backbone of all your designs, shapes are the primary layers you work with – not only in Flow – they make up the majority of visual elements in a user interface.
0 kommentar(er)
