{"id":2234,"date":"2024-01-16T09:35:39","date_gmt":"2024-01-16T08:35:39","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=2234"},"modified":"2024-01-16T09:37:47","modified_gmt":"2024-01-16T08:37:47","slug":"introducing-springui-your-best-swiftui-spring-animation-companion","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/","title":{"rendered":"Introducing SpringUI, your best SwiftUI spring animation companion."},"content":{"rendered":"\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">Hey guys! The last year or so, I have been busy learning SwiftUI together with my mostly best friend, ChatGPT. Made <a href=\"https:\/\/www.temperamento.net\" target=\"_blank\" rel=\"noopener\">some apps<\/a> just for fun, and now it\u2019s time to write about my latest one, <a href=\"https:\/\/apps.apple.com\/se\/app\/springui\/id6474429097?mt=12\" target=\"_blank\" rel=\"noopener\">SpringUI<\/a>, which, I think, is my absolute favorite one so far.<\/p>\r\n<h2 class=\"\">What is SpringUI?<\/h2>\r\n<p class=\"\">It\u2019s a free macOS animation app that removes the guesswork when working with so-called <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/animation\/spring(response:dampingfraction:blendduration:)\" target=\"_blank\" rel=\"noopener\">spring animations in SwiftUI<\/a>. I was personally perplexed and curious about spring, so I built this primarily for myself to better understand it. Spring deals with strange things like mass, stiffness, damping, and my favorite one, bounce!<\/p>\r\n<p class=\"\">I come from a keyframe based animation workflow, so dealing with the above is very odd, but strangely rewarding.<\/p>\r\n<h2 class=\"\">Who is this app for?<\/h2>\r\n<p>Anyone curious about creating spring animations for any of Apple\u2019s platforms, be it iOS, macOS, watchOS, tvOS, or even spatialOS. I guess most users will be either designers or developers, but hey, what do I know?<\/p>\r\n<p class=\"\">The best thing is, you do not need to be a master animator or a ninja developer to create animations, just play around with all the controls, export, and you are done.<\/p>\r\n<h2 class=\"\">Superpowers built-in<\/h2>\r\n<ul class=\"\">\r\n<li>Advanced transformation controls like 3D rotation, hue and saturation, blur, opacity, scaling etc.<\/li>\r\n<li>It has built-in support for the whole <a href=\"https:\/\/developer.apple.com\/sf-symbols\/\" target=\"_blank\" rel=\"noopener\">Apple SF Symbols library<\/a>, which sports around 5000+ icons so far!<\/li>\r\n<li>Not only that, but it exports production-ready SwiftUI animation code and an animation example with one click.<\/li>\r\n<li>Support for adding custom images instead of SF symbols. Perfect for animating your custom icon library or just an illustration, card, whatever.<\/li>\r\n<li>The animation data can be used with anything that can be animated in SwiftUI, your imagination will be the only limit here.<\/li>\r\n<\/ul>\r\n<h2 class=\"\">Animation time!<\/h2>\r\n<p>Bored to death with all the uninspiring icon animations in your current Apple ecosystem app? Look no further, experiment with all the funky animation controls we have inside SpringUI.<\/p>\r\n<p>Best thing, you do not need to know a single line of code to animate with SpringUI, everything is handled with easy to understand sliders for experimentation.<\/p>\r\n<p>Lets create something similar to this animation:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" class=\"wp-image-2232\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-1.gif\"><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">Make sure you have first downloaded <a href=\"https:\/\/developer.apple.com\/sf-symbols\/\" target=\"_blank\" rel=\"noopener\">Apples SF Symbols 5 app<\/a>, since we are using it in this tutorial.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2619\" height=\"1605\" class=\"wp-image-2222\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2.png\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2.png 2619w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-300x184.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-1024x628.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-768x471.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-1536x941.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-2048x1255.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-250x153.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-550x337.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-800x490.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-294x180.png 294w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-490x300.png 490w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-2-816x500.png 816w\" sizes=\"auto, (max-width: 2619px) 100vw, 2619px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<p>Search for \u201dmusic\u201d and copy the names of \u201dmusic.mic.circle\u201d and \u201dmusic.mic.circle.fill\u201d out to clipboard, or just paste them into SpringUI like this, name of symbol, name of second symbol. Easy peasy!<\/p>\r\n<h2>Preview the animation<\/h2>\r\n<p>Just hit the Preview button or tap directly on the symbol itself, and you will see how the animation looks right now, out of the box. We can do much better, let\u2019s play with some advanced animation controls that we have.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"800\" class=\"wp-image-2228\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-3.gif\" alt=\"Booooooring.\"><\/p>\r\n<figcaption>Booooooring.<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">Let&#8217;s go nuts!<\/h2>\r\n<p>Try playing around with hue rotation, 3D rotation, the amount of bounce etc. and you will find yourself creating something like this in a couple of seconds:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"800\" class=\"wp-image-2224\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-4.gif\" alt=\"Much better!\"><\/p>\r\n<figcaption>Much better!<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<p>A little hidden gem: If you feel lost and want to revert a specific parameter to the original value, just click on the icon attached to said parameters name and it will revert.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"632\" class=\"wp-image-2221\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-5.gif\" alt=\"Revert back to original value, boom!\"><\/p>\r\n<figcaption>Revert back to original value, boom!<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">Lets copy out to code<\/h2>\r\n<p>You have two ways of exporting animation code from SpringUI, either you just copy the animation parameters, or my favorite one, specially for playing around with it more, you copy an entire SwiftUI file example. Let\u2019s do that!<\/p>\r\n<p class=\"\">Make sure you have installed also <a href=\"https:\/\/apps.apple.com\/se\/app\/swift-playgrounds\/id1496833156?mt=12\" target=\"_blank\" rel=\"noopener\">Swift Playgrounds<\/a>, we are going to copy the code out of SpringUI into a default app template.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2474\" height=\"1962\" class=\"wp-image-2229\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6.png\" alt=\"Add a new app template\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6.png 2474w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-300x238.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-1024x812.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-768x609.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-1536x1218.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-2048x1624.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-250x198.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-550x436.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-800x634.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-227x180.png 227w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-378x300.png 378w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-6-630x500.png 630w\" sizes=\"auto, (max-width: 2474px) 100vw, 2474px\" \/><\/p>\r\n<figcaption>Add a new app template<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<ol class=\"wp-block-list\">\r\n<li>Fire up Swift Playgrounds<\/li>\r\n<li>Select \u201dApp\u201d<\/li>\r\n<li>Jump back to SpringUI and click on the Copy code button. Everything you need is now copied out to Macs clipboard memory.<\/li>\r\n<li>In Swift Playgrounds, make sure you have selected the SwiftUI file named \u201dContentView\u201d.<\/li>\r\n<li>Replace the template code with the code from SpringUI, just select everything in ContentView and use Command+C to add the copied code from SpringUI. My example looks like this:<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2654\" height=\"1970\" class=\"wp-image-2225\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7.png\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7.png 2654w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-300x223.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-1024x760.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-768x570.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-1536x1140.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-2048x1520.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-250x186.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-550x408.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-800x594.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-242x180.png 242w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-404x300.png 404w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-7-674x500.png 674w\" sizes=\"auto, (max-width: 2654px) 100vw, 2654px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">Nice! Now click on the SF symbol and see what happens. Hubba hubba. Lets make it a bit bigger, for demo purposes and also, let&#8217;s add a color to the symbols, that is not the primary default one:<\/p>\r\n<ol class=\"\">\r\n<li>Scroll down to Line 34 and change from \u201d.primary\u201d to \u201d.pink\u201d, then scroll down to line 38 and change from primary to \u201d.blue\u201d.<\/li>\r\n<li>Let\u2019s make it bigger! Scroll down to line 24 and change \u201dsymbolSize\u201d to 200 for both the width and height:<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2948\" height=\"1984\" class=\"wp-image-2223\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8.png\" alt=\"Make it big!\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8.png 2948w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-300x202.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-1024x689.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-768x517.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-1536x1034.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-2048x1378.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-250x168.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-550x370.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-800x538.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-267x180.png 267w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-446x300.png 446w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-8-743x500.png 743w\" sizes=\"auto, (max-width: 2948px) 100vw, 2948px\" \/><\/p>\r\n<figcaption>Make it big!<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<h1 class=\"wp-block-heading\">The \u201dfinal\u201d animation<\/h1>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"492\" class=\"wp-image-2227\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-9.gif\"><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<p>Mine looks like this, yours will probably look different. The cool thing now is, you can change this as many times as you need to. Just go back to SpringUI, change some parameters, and click on the \u201dCopy code\u201d button again.<\/p>\r\n<ol>\r\n<li>Go back to SpringUI, and change some things<\/li>\r\n<li>Click the \u201dCopy code\u201d button<\/li>\r\n<li>Open up Notes or the Text editor app on your Mac, is not relevant. Paste the new code, mine looks like this:<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2396\" height=\"1852\" class=\"wp-image-2220\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10.png\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10.png 2396w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-300x232.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-1024x792.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-768x594.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-1536x1187.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-2048x1583.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-250x193.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-550x425.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-800x618.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-233x180.png 233w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-388x300.png 388w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-10-647x500.png 647w\" sizes=\"auto, (max-width: 2396px) 100vw, 2396px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<p>Currently, you will only need to copy these parameters into our Playgrounds app project. Scroll down to line 7, select everything down to line 24 like this, and copy in the new animation parameters. Done!<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2948\" height=\"1984\" class=\"wp-image-2231\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11.png\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11.png 2948w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-300x202.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-1024x689.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-768x517.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-1536x1034.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-2048x1378.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-250x168.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-550x370.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-800x538.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-267x180.png 267w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-446x300.png 446w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-11-743x500.png 743w\" sizes=\"auto, (max-width: 2948px) 100vw, 2948px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">The \u201dfinal final\u201d version<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"492\" class=\"wp-image-2226\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tutorial-12.gif\"><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">That\u2019s it, hope you enjoyed this tutorial and that SpringUI will bring you much joy. It also supports adding custom images, perfect when animating anything from your own icons library to anything really. SwiftUI has animation support for so many component and states that it would take me forever to list them all.<\/p>\r\n<p><br>Have fun!<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Hey guys! The last year or so, I have been busy learning SwiftUI together with my mostly best friend, ChatGPT. Made some apps just for fun, and now it\u2019s time to write about my latest one, SpringUI, which, I think, is my absolute favorite one so far. What is SpringUI? It\u2019s a free macOS animation&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Introducing SpringUI, your best SwiftUI spring animation companion.<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":2233,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":70,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[],"class_list":["post-2234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing SpringUI, your best SwiftUI spring animation companion. | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing SpringUI, your best SwiftUI spring animation companion. - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Hey guys! The last year or so, I have been busy learning SwiftUI together with my mostly best friend, ChatGPT. Made some apps just for fun, and now it\u2019s time to write about my latest one, SpringUI, which, I think, is my absolute favorite one so far. What is SpringUI? It\u2019s a free macOS animation&hellip;&nbsp;Read More &raquo;Introducing SpringUI, your best SwiftUI spring animation companion.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-16T08:35:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-16T08:37:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Introducing SpringUI, your best SwiftUI spring animation companion.\",\"datePublished\":\"2024-01-16T08:35:39+00:00\",\"dateModified\":\"2024-01-16T08:37:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/\"},\"wordCount\":931,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png\",\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/\",\"name\":\"Introducing SpringUI, your best SwiftUI spring animation companion. - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png\",\"datePublished\":\"2024-01-16T08:35:39+00:00\",\"dateModified\":\"2024-01-16T08:37:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png\",\"width\":1024,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing SpringUI, your best SwiftUI spring animation companion.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing SpringUI, your best SwiftUI spring animation companion. | Sketch2React Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/","og_locale":"en_US","og_type":"article","og_title":"Introducing SpringUI, your best SwiftUI spring animation companion. - Sketch2React Blog","og_description":"Hey guys! The last year or so, I have been busy learning SwiftUI together with my mostly best friend, ChatGPT. Made some apps just for fun, and now it\u2019s time to write about my latest one, SpringUI, which, I think, is my absolute favorite one so far. What is SpringUI? It\u2019s a free macOS animation&hellip;&nbsp;Read More &raquo;Introducing SpringUI, your best SwiftUI spring animation companion.","og_url":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/","og_site_name":"Sketch2React Blog","article_published_time":"2024-01-16T08:35:39+00:00","article_modified_time":"2024-01-16T08:37:47+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Introducing SpringUI, your best SwiftUI spring animation companion.","datePublished":"2024-01-16T08:35:39+00:00","dateModified":"2024-01-16T08:37:47+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/"},"wordCount":931,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/","url":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/","name":"Introducing SpringUI, your best SwiftUI spring animation companion. - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png","datePublished":"2024-01-16T08:35:39+00:00","dateModified":"2024-01-16T08:37:47+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2024\/01\/springui-tut-cover.png","width":1024,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/introducing-springui-your-best-swiftui-spring-animation-companion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing SpringUI, your best SwiftUI spring animation companion."}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/2234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=2234"}],"version-history":[{"count":5,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/2234\/revisions"}],"predecessor-version":[{"id":2239,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/2234\/revisions\/2239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/2233"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=2234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=2234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=2234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}