Is there any way to embed Lottie animation into export react studio code?


#1

Website with cool animation take user experience to new level.

Most interesting animation on web may be LottieFiles with thousands of beautiful file are available.

It can be embed into website like following:

I think it is worthing to embed lottie animation into React Studio


#2

or the better way is RS support animation gif image, the website not depend on 3rd party webservice


#3

We haven’t been playing around with gufs at all. I’m guessing one could build a plugin which takes the Lottieflies JSON as setting and then writes the code in place but this is just my guess.

P.S. It’s midsummer in Finland and our team will be back to work on Monday.


#4

Hi @Ngoc_Anh_Vu we needed this as well, so created a React Studio plugin for using Lottie Files. You need to paste the JSON from the Lottie file, I dont know how to allow uploading of files from within a plugin.

You can get it here, I will also publish this to Neonto since i’m sure it’ll be useful for others too https://github.com/automediaAI/RSPlugin-Lottie

@Antti_Neonto is this something possible? ie Allow user to pick local file, rather than having to paste the JSON in the plugin?


#5

Its really cool, this plugin will make UX of the webapp was generated by ReactStudio much more exciting ! :muscle:


#6

The plugin working well with my project:

https://drive.google.com/file/d/1tjPfE8Sjo57aVg4pAjyTl2lhPtFov3DU/view?usp=sharing

:star::star::star::star::star:


#7

Hi,

Thanks for the plugin file. Could you explain a bit what file would you like to upload into Plugin settings, Lottie JSON file or something else? Pasteing JSON feels quite good and easy way of adding the animation. Currently there is no endpoint for uploading files in the plugin API.

BTW. I suggest you to change the Plugin code a bit. It seems that plugin code generation overrides Studio’s CSS and animation alignments are not as in the Studio. We played a bit with the Example plugin and Plugin works with Studio alignments if you simply put Height and Width 100% to template code. Basically then animation size is always 100% of its container size in Studio’s canvas.

Here’s example code:

  var jsx = `<LottieController
        play
        loop
        speed = {${speed}}
        animationData={${lottieJson}}
        style={{'width':'100%','height':'100%'}} />`;
  return jsx;


#8

I agree with Antti, pasting json text quite good.

I think, if this plugin is taken as an official plugin of React Studio, it will make RS so much more exciting


#9

Hi @Antti_Neonto thank you for your comment about dimensions, makes sense. Updated the plugin with this change. You can review, if its good kindly accept my submission to the plugin store, sent email to hello@neonto.com. About JSON, just wanted a way in UI to upload file each time rather than pasting JSON but I think its good enough for now.

@Ngoc_Anh_Vu - you can get the new release from same link. This is much better now, sizing can be managed by the React Studio canvas, and keylines are also working.


#10

I have another question @Antti_Neonto, I need to make a more advanced plugin for AnimeJS, links below. I mainly need it for Text animations, like below. I feel this makes more sense as an ‘Element’ rather than a ‘Plugin’. Any tips on how to get started on something like this? Some examples of such complex plugins would be great.

Site: https://animejs.com/
npm React Package: https://www.npmjs.com/package/react-anime

Tagging my partner @nitinkhanna too


#11

new update working much better, thank you :+1:t4:


#12

Do you think you could do this as custom CSS animation? That way you can add animation basically to any element. Obviously if you need to add complex animation then you probably need to add is similar kind of element plugin as the Lottie plugin.


#13

Well, we looked at custom CSS animations and even writing complex CSS animations into the custom code, but we feel it’s best to export this task to a plugin.

There’s one thing preventing us from using a library like https://github.com/hyperfuse/react-anime

If you see the code sample in the github link above, you’ll notice that they expect us to wrap the divs we want to play the animation on, in a JSX component. I tried to get this to work, but the code that React Studio exports doesn’t ever wrap an component with another. The only time I saw this happen is when an element is in the foreground/background layers. Those layers wrap around elements, but all other element stand in their own divs and their positions are set via CSS.

Is there something I can do to place the components I want to animate into an Anime component? Maybe I’m overlooking some simple way of doing this?