Hello Penpot community! 
Do we have ‘Smart Animate’ feature like Figma for to create seamless animations? Or is it planned?
Thank you!
3 Likes
Hi @merih We have plans to improve Penpot prototype interactions and animations. We have to work on defining this part in depth.
“Smart Animate” is a powerful feature that makes the difference when making prototypes . The results bring the final prototype experience closer to final product behaviour. It is also really complex to develop (matching layers, recognizes differences…)
The interesting thing here will be to investigate about SVG animations and their possibilities. There is still a lot of work to do with the interactions in Penpot. We hope to be able to take advantage of the web standards that Penpot currently use 
3 Likes
Since PenPot is based on SVGs you guys should have a look at this browser application for creating animated SVGs.
It’s probably one of the best on the market and neither Adobe or anyone else does properly animated svgs.
If you would add some timeline animations and option to export animated svgs for websites, that would be on another new level and would get you ton of users from the web side.
This SVGator has exports also for mobile/react, etc. These are extremely useful to hand over directly the animated buttons, custom toggles, etc. to devs.
5 Likes
Have you an idea when you plan the smart animation ?
2 Likes
Totally agree, a “Smart Animate” feature would be a game-changer for Penpot. It’s one of those features that makes prototyping feel magical.
I was looking into how this could be built from a technical perspective and wanted to share a couple of ideas for the community and developers to consider.
My first thought was GSAP (GreenSock Animation Platform), as it’s basically the gold standard for web animation. It’s incredibly powerful and would handle the complex SVG animations flawlessly.
I checked out their license, and it’s interesting. They now have a “Standard ‘No Charge’ License”, which makes the whole library free for most uses. The only tricky part is a “Prohibited Uses” clause that prevents using GSAP in tools for “building visual animations without code” that compete with Webflow. A “Smart Animate” feature could fit into this, although Webflow is about website building, while Penpot is a design tool.
However, their license page has a really hopeful note:
“If you’re unsure whether your product qualifies as a ‘Prohibited Use,’ feel free to contact us so we can discuss it!”
Perhaps this is a conversation the core Penpot team could have with them someday? A potential partnership could be amazing for both communities. Just a thought!
If the GSAP license ends up being a blocker, there’s an open-source alternative that might work just fine: anime.js.
The best part is that it’s under an MIT license, meaning zero legal issues or restrictions for integrating it into Penpot.
A common concern with anime.js was that it wasn’t maintained for a while, but that’s changed! The community has picked it up, and a new version 4.0.0 is in active development. It has all the features we’d need:
-
Great performance.
-
SVG path morphing (for those cool shape-shifting animations).
-
Timelines for syncing everything up.
Just wanted to throw these ideas out there for the discussion. It seems like we have some really solid technical options to make a “Smart Animate” feature a reality in Penpot someday.
3 Likes
Hi everyone,
I’m not sure if this is the best place to discuss this, but if not, please point me in the right direction.
Another topic I saw was related to a User Story created by Andrés Moya (https://tree.taiga.io/project/penpot/us/2132), where he uses specific terms like “Adobe Edge Animate” and mentions: “I am thinking of having 3 tabs top right. DESIGN | PROTOTYPE | INTERACTION”.
Reading this, I immediately thought of the tool https://rive.app/, which some consider a replacement for After Effects (or, more accurately, for Lottie Files - https://rive.app/blog/rive-as-a-lottie-alternative) for building UI animations.
Considering their renderer is open source under the MIT license (https://rive.app/runtimes), I was also wondering about the possibility of taking inspiration from how they build their animation engine. Or even, if feasible, exploring a partnership that could be mutually beneficial for both products and communities.
Honestly, I believe something like this wouldn’t just be a “copy” of Figma’s Smart Animate. Just as Grid Layout and Flex Layout surpassed Figma’s Auto Layout, this feature could also surpass Smart Animate.
P.S. Unfortunately, .riv files are binary, making it impossible to track their diffs effectively in a VCS.
I also looked into the exports from SVGator (https://www.svgator.com/), which @Kafka mentioned. Its formats (Animated SVG, Lottie JSON, React Native) are text-based, so they can be diffed by a VCS, but the diffs are extremely noisy.
Finding a healthy middle ground that allows us to not only commit assets to a VCS but also easily track and understand the changes between versions (without all that noise) would be a true game-changer.
If it were possible to analyze these changes visually inside Penpot (similar to what Figma’s branching allows), that would be 10/10.
Perhaps exploring GSAP or anime.js as a foundation could be a good path forward for this. Let me know if there’s anything else I can help with, beyond research and testing.
P.S. 2: Wow, following up on that last thought—I had no idea the Haiku Animator existed either.
I just did some quick research, and it seems that while the company is no longer active, they did open-source their entire technology stack. The repos are all on GitHub (https://github.com/HaikuTeam/animator), including the core engine (haiku/core) and the animator UI itself (haiku/animator).
Their entire mission was exactly this: to bridge the design-to-code gap for animations, creating components (for React, Vue, etc.) from a visual timeline editor and state machine.
Since this is all now open-source, it could be an incredible resource for the Penpot’s “Smart Animate” feature. This might be a goldmine of insights.
2 Likes
I used Haiku for very small tasks, more out of curiosity than in a true production workflow. Although a bit cumbersome and sometimes a bit sluggish in output, the tool was truly excellent; sadly, it’s no longer maintained, but I agree that it would be a huge step forward for Penpot to leverage these technologies, as well as make SVG editing much more advanced, perhaps using Inkscape knowledge… but I’m not a developer and don’t know the effort required to do that… so I’d better keep quiet! 
1 Like
