- Grammy Award-winning keyboardist Shaun Martin (Snarky Puppy, Kirk Franklin) feelin' the love with the Keyscape LA Rhodes on two 70's pop classics!
- KeyShape is a vector graphics animation tool that works seamlessly with Sketch. Create symbols, export to multiple formats such as CSS, animated GIFS or even video files.
A leader in the locksmith and hardware industry with over 50 years of experience. We pride ourselves on creating innovative solutions to key handling and key organization problems.
Hey guys! Yesterday I had a presentation internally about Keyshape, my go-to tool for animating everything from icons to illustrations. Today I recorded an international version for all of you to enjoy ? ? ✅
9 out of 10 times I use this marvellous animation app because it does so many things right:
- Easy to use interface that resembles a bit of Flash (in a good way ?)
- Amazing export options (CSS, Lottie, Android Vector Drawables, KeyshapeJS, MP4, GIF etc)
- The code output is clean and easy to implement in projects
Lottie is a hugely popular animation format that works about everywhere. Via the official Keyshape Lottie plugin you add animation super powers to a very affordable app.
Many times when I need to animate something complex I usually do this:
- Browse around Lottiefiles.com to find an open source animation
- Download the Lottie JSON file and open it up inside Keyshape
- Change things like colors, timing etc
- Export the animation again to either Lottie or any other format that suits my current project needs
- If I export it again as Lottie I drag+drop it into Lottie Preview for testing it out, distributing it further. All your animations that you add to preview and don’t publish to Lottiefiles.com are by default private. But here’s the neat thing, you can still share them with your developers. ? ❤️
Also, since I now have the animation inside Keyshape, it’s a piece of cake exporting it or adapting it for several use case.
Some of you may now this, most of you won’t: Keyshape is actually responsible for me doing video tutorials in the first place. When I started using it in 2017 there where the total amount of 0 video tutorials about Keyshape. I felt a strong need to start showing the world how awesome this little animation gem was. I still do!
So without further notice, here are a couple of great tips I have gathered through my experience.
As an added bonus, here’s Fredrik’s NPM package for easier use of Keyshape animations in React. Go team! Ysulyw devices driver.
Keyshape is a vector graphics design software with animation capabilities. You can create animated icons, banners, and vector graphics for web pages and social media sites.
Lucky Line Key Shapes
Features
Keyshape Lottie Plugin
- Drawing Tools
- Typical vector tools, such as node, pen, pencil, rectangle, ellipse, hand, and zoom tool
- Immediately see the preview of the shape you draw
- Boolean path operations
- Text-on-path for curved text
- Use linear and radial gradients
- CSS shorthand filters
- Animation Features
- Timeline-based animations with keyframes
- Animate position, scale, rotation, opacity, stroke opacity, fill opacity, stroke color, fill color, stroke width, dash array, dash offset, and filter
- Preview animations on web browsers with a click of a button
- Work With SVG
- Open SVG documents created in other vector graphics software
- Copy SVG code directly from Keyshape to a text editor
- Paste SVG code directly from a text editor or web page to Keyshape
- Export Formats
- SVG with CSS animations
- SVG with Javascript animations
- PNG, JPEG
- Image sequences, sprite sheets
- Animated GIF
- MPEG-4 video
Comments are closed.