Coder Social home page Coder Social logo

daybrush / scena Goto Github PK

View Code? Open in Web Editor NEW
767.0 18.0 68.0 8.93 MB

๐ŸŽฌ Scena is a component that represents the timeline of Scene.js. You can control time, properties, and items.

Home Page: https://daybrush.com/scena

License: MIT License

HTML 1.16% JavaScript 0.66% TypeScript 96.97% CSS 1.21%
css animation timeline keyframes scene scenejs react preact preact-compat

scena's People

Contributors

daybrush avatar wadezhan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

scena's Issues

Not able to run scena

Hi,
This looks very promising and will love to use this. I downloaded the project on my windows machine and followed the instructions to run..
$ cd packages/react-editor
$ npm i
$ npm run start

The scena editor does shows up but like this.....

image

But I dont see any timeline editor.. what am I mssing?

thanks
Harsh

How can I use Scena with Moveable?

Hello, I hope this is posted in the correct repo.

We found daybrush to be perfect for a feature in our app with the following requirements:

  • Have an image.
  • Draw interactable square annotation on the image.
  • Retrieve the exact annotation coordinates relative to the image.
  • Have the entire thing be zoomable.

I've reviewed the source code for the demo at daybrush.com/moveable, but it's REALLY BIG and I couldn't find the exact place where you handle drawing new squares. If you could point me in the right direction there, that would be awesome.

It would be even more awesome if you could perhaps give a simple rundown of how I can do what I'm looking for to help me save loads of time; there are so many cool options and it's easy to get lost!

Demo of scena

Hi,

Please where can we have a demo of Scena ? and how to set it up ?

Sincerely

Publish to npm

On npm there seems to be only an empty package for scenejs-editor.
When I try to install from this repository, scenejs is installed instead.

react-scenejs-editor not resolveable

Hey there, tried to get the editor example locally working, but unfortunately without success.
Could you give me a hint why it says: "Module not found: can't resolve './react-scenejs-editor/Editor'
Thanks a lot, Chris

Text editing + deleting an object.

Text editing is not working in Scena when running the local host but is working in moveable demo. Is there a solution for this? How did you get this to move in the hosted moveable demo? I'm also not able to delete an object in the scena local host but this works on the moveable demo. Please advise.

Thanks,
-P

How to add onSelect event listener?

Thank you for providing great open source components. I encountered some errors while trying to customize some functions. Can you tell me how to solve the errors?

https://github.com/daybrush/scena/blob/master/packages/react-editor/src/Editor/Editor.tsx#L274

Editor will pass selectedTargets to moveable property target in MoveableManager,I tried to add an event, but the Selecto component generates an error.

onScroll={({ direction }) => {
  infiniteViewer.current?.scrollBy(
    direction[0] * 10,
    direction[1] * 10
  );
}}
onSelect={(e) => {
  this.setState({
    selectedTargets: e.selected,
  });
}}

image

Basecode not working

Hey guys, when i install moveable and create a react app with the code from here, i allways get the same error.
I tryed getting different code examples from google for this library but i allways get the same errors.

the "target!.style.transform = transform; " is missing semmicolon.
If i remove the "!" then i get the next errors the the brackets are not closed like they should.
Is there any working example project for react? Or did i miss something?.
I'm using npm 7.17.0.

semicolon

How can I use "record" in javascript only?

I would like to know how to use "record" correctly in javascript. I have an animation made and I have a download button that would work as the "record". "Record" I'm referring to is the one on the scene.js demo site, the "record" button re-renders the animation into a video, in my case I want the download button to do the same function and if possible, do an automatic download

Release date?

Hi, this is an amazing project. Please let me know when are you planning to release scena?

TIA

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.