Animated Components? (react-spring)

[franz-fletcher]

I'll be honest, I'm still getting my head around the API docs so apologies in advance if this has been addressed somewhere.
So I'm hoping to use craft.js to build a pretty basic storyboarding(for videos) tool. I'd like to implement transitions between pages and their children kinda like Framer.

Now, I actually have built HOC's that take react components and use react-spring to convert them into animatable components configured via an extended set of component props.
Demo (WIP but can share since it's a personal project) : https://sailboat.services/ and https://app.sailboat.services/account/signin

Navigating between Sign In, Forgot Password and Create Account will be a perfect illustration of how I have a parent animation for the page transition and nested child components which animate once the parent animation rests.

Anyway It would be cool if you guys had an idea of how I can implement something similar with craft.js
My hope is that I can make page component animations preview-able whilst my end user is in "edit mode". It looks like once the page is serialised, reconstructing a preview with animations would be doable. Just not sure about getting something going in edit mode.

I'll start tinkering and update this discussion if I figure it out but I'd be so grateful for some pointers to get me started on the right path.

Cheers guys! Great work

[franz-fletcher]

Got a very basic POC to verify it's possible. Sandbox

[prevwong]

Hey @franky-chanyau, those examples aren't really working for me :/

But I think what you're asking should be possible. You probably just need a User Component named Page which accepts some animation props, and once your user has done editing these props - you could just trigger a reanimation.

[franz-fletcher]

I'm an idiot and started refactoring the sandbox code after posting it thinking it would be a quick job. Yeah you hit the nail on the head - that's exactly how I figured out the implementation! Appreciate the reply, I'll hop on the discord because I'm keen to help out with my free time and am really behind the work you're doing