![]() Load our external SVG Snap.load('img/hill-valley.svg', function (response) ) First step is to include it in our project there are many ways to do this, which you can find here Initialise Snap SVG element // HTML The beauty of Snap.svg is that it is simple to get set up and gives us a tremendous amount of functionality out of the box to manipulate our SVG's. Remove all unused layers and group elements that you feel will be linked together in animation. ![]() The biggest thing that will make working with SVG a breeze is to be very organised with your layering and grouping. ![]() We recommend you check out this article by Sara Soueidan which has some great tools to help you out. Now rather than putting the vast subject of optimisation into this particular article. The first part of any SVG project should be spent optimising your SVG's, hopefully in your case you have either created them yourself or will have a nice SVG supplied by your design team. There are a few different implementations, some with the focus more on the Snap.svg side of things, then also combining both Snap.svg and CSS animations. A bit of CSS will make sure that our SVG is placed in full width, at the top of the large background image. Using a data-attribute, we define the final path that we want the initial one to animate to. Once we have both paths, we can use them in our HTML. When doing this, it’s as well a great way to roughly visualize how the animation will look and feel like (in reverse, of course). Once we have our optimized SVG with a “clean” path, we can use the editor to create the initial shape out of the more complex one: Although this shape is not really visible, we need all the points of the final path to be present in the initial one. SVGOMG cleans up SVGs and removes transforms I use it for paths or groups that had transforms applied to them by Sketch. The optimization step is not always needed as the path editor offers rounding, which is great. ![]() ![]() Then, I copy the path and paste it into the SvgPathEditor. I usually start making the shapes in Sketch and then I optimize them using SVGOMG. Unfortunately, graphic design softwares might not be the best choice for making proper, optimized paths. So the best way to make sure our path animation doesn’t turn out funky, is to start crafting the most complex shape which in our case is the final path with the curve. When we create paths that will be animated, we have to keep in mind that all points present in the final path, also need to be there in the initial shape. So, let’s have a look at this first example, where we simply animate the path of an SVG that has the same fill color as the background of the page: As we scroll, we’ll animate an SVG path from a rectangle to a wave shape.įor this to work, we need two paths: one initial path that is a rectangle and a final path that is the wavy shape. Let’s get started! Path Animation on SeparatorsĪnimating a path on scroll can be particularly interesting for separators and borders to full screen images. We can morph one path into another and we’ll do that once a shape enters the viewport. Scrolling can be so much fun! Let’s have a look at how to make SVG shapes and clip-paths animate on scroll to add a bit of drama and waviness to a design. ![]()
0 Comments
Leave a Reply. |