daybrush / scenejs

🎬 Scene.js is JavaScript & CSS timeline-based animation library

Scene.js

🎬 Scene.js is an JavaScript & CSS timeline-based animation library.

Official Site  /  API  /  Features  /  Examples  /  Main Project

                 

🚀 Examples

• ClapperBoard Animation
• Panda eating Bamboo Animation
• Circle Burst
• Motion Effect
• Tree Animation
• Snow Animation
• Card Rotation
• Raindrop Effect
• Cube
• Shape
• Timer

More Examples

⚙️ Installation

$ npm install scenejs

<script src="//daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>

📄 Documents

• API Documentation
• Features Documentation

📦 Packages

Package	Version	Description
react-scenejs		A React Component that create JavaScript & CSS timeline-based animation with Scene.js.
svelte-scenejs		A Svelte Component that create JavaScript & CSS timeline-based animation with Scene.js.
vue-scenejs		A Vue 3 Component that create JavaScript & CSS timeline-based animation with Scene.js.
vue2-scenejs		A Vue 2 Component that create JavaScript & CSS timeline-based animation with Scene.js.
@scenejs/render		Make a movie of CSS animation through Scene.js.
@scenejs/effects		Effect collection library where you can add scene effects to Scene.js.
@scenejs/timeline		A library that represents the timeline of Scene.js. You can control time, properties, and items.
@scenejs/media		A library for playing or controlling media with Scene.js.
@scenejs/iframe		A library that control the animation of iframe with Scene.js.

🎬 Make Scene

import Scene from "scenejs";

const scene = new Scene({
  ".class": {
    0: "left: 0px; top: 0px; transform: translate(0px);",
    1: {
      "left": "100px",
      "top": "0px",
      transform: "translate(50px)",
    },
    2: {
      "left": "200px",
      "top": "100px",
      transform: {
        translate: "100px",
      },
    }
  }
}, {
  selector: true,
  easing: "ease-in-out",
}).play();

🎬 Add Media (Audio/Video)

This library supports adding video and audio components to your scene. To add a video or an audio, you need to install @scenejs/media library.

Add necessary npm package

$ npm i @scenejs/media

How to use

import MediaScene from '@scenejs/media';

const mediaScene = new MediaScene();
    mediaScene
        .addMedia("background", "./background.mp3")
        .seek(0, 40.79);
    
    mediaScene
        .addMedia("video", "./video.mp4")
        .seek(0, 40.79)
        .setVolume(1)
        .setPlaySpeed(1)
        .setDelay(startTime);

    scene.setItem("video",mediaScene);

Please note that this library uses the built-in capability of your browser to play audio and video files. Make sure necessary codecs are installed, and the browser supports the video/audio file being added to the project

✨ Effects

• typing
• flip
• flipX
• flipY
• shake
• shakeX
• shakeY
• wipeIn
• wipeOut
• zoomIn
• zoomOut
• blink
• fadeIn
• fadeOut
• transition

🌐 Supported Browsers

Internet Explorer	Chrome	FireFox	Safari	Opera
9+(10+ playCSS)	latest	latest	latest	latest

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to scenejs or other packages, please write the issue or give me a Pull Request freely.

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Sponsors

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

📝 License

This project is MIT licensed.

MIT License

Copyright (c) 2016 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

scenejs's Issues

Support Angular Component

Support Web Animation API

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

add scenex for functional programming

interface SceneX {
  each(callback: (item: Scene | SceneItem, id: string, items: {[key:string]: Scene | SceneItem}) => void, target: Scene);
  each(callback: (frame: Frame, time: number, items: {[key:string]: Frame}) => void, target: SceneItem);
  map(...)
  filter(...)
set()
get()
end()
play()
pause()
animate()
timeupdate()
...
}

How can i set the useNowFrame object dynamically on react-scenejs ?

I need to generate the useNowFrames dynamically through the user input. How can i do that ?

What is the proper way to add items dynamically?

I need to add the scene items dynamically. But when I add any new item, it's stacked and animations are not working. I have tried to add new item like below. What will be the proper way to add items dynamically?

Description

const newLayer = JsCanvas.newItem(`.Layer-${name}`, {
			iterationCount: 1,
			selector: true,
			delay: delay,
		});
		newLayer.set(keyframes);
		JsCanvas.setItem(`.Layer-${name}`, newLayer);

If I submitted a issue, can I delete it?

It's an invalid issue for test.

splitStyle function will skip the last available item like ‘text-shadow:5px 5px 5px;-webkit-mask-image:;filter:blur(6px);’

Add Chrome Extension for timeline

Add Chrome Extension for timeline with playground

2019 Roadmap

Features

• Add Web Timeline Editor #38
  • Shape https://github.com/daybrush/shape-svg
  • Dragger https://github.com/daybrush/drag
  • Selector https://github.com/daybrush/moveable
  • Keyboard Controller https://github.com/daybrush/keycon
  • Timeline Editor https://github.com/daybrush/scenejs-timeline
• Add Google Extension for Timeline Editor #39
  • https://github.com/daybrush/scenejs-timeline
• Add Render(Encoding) App
  • https://github.com/daybrush/scenejs-render
• Add burst effect
  • https://github.com/daybrush/scenejs-effects
• Add After Effect Plugin #37
• Add JQuery Plugin
• Make a variety of animations
  • https://codepen.io/collection/DLWxrd/

2.0 Roadmap

2.0 RoadMap

• Update react-scenejs
• Update vue-scenejs
• Add svelte-scenejs
• Add vue3-scenejs
• Add demo for frameworks
• Add Motion Tracker
• Merge repositories (effetcs, renderer, media, iframe)

changed

• get, set method => getter, settter properties

deprecated

• ngx-scenejs
• preact-scenejs

how to update keyframes? i try to use this way to update keyframes,but it is no change?

html

<div class="wrapper">
  <div class="circle-area">
    <ngx-scene
      #scene
      [keyframes]="keyframes2"
      fillMode="forwards"
      easing="ease-in-out"
      (sceneAnimate)="onAnimate($event)"
      (scenePlay)="onPlay($event)"
      (scenePaused)="onPaused($event)"
    >
      <div class="circles">
        <div class="circle circle1"></div>
        <div class="circle circle2"></div>
        <div class="circle circle3"></div>
      </div>
    </ngx-scene>
    <div class="player">
      <div [class]="playState" (click)="onClick()"></div>
      <input
        class="progress"
        type="range"
        [value]="time"
        min="0"
        max="100"
        (input)="onInput($event)"
      />
    </div>
  </div>
</div>

ts

keyframes2 = {};
 
 ngAfterViewInit() {
   this.keyframes2 = {
     item1: {
       0: {
         display: 'none',
       },
       1: {
         display: 'block',
         opacity: 0,
       },
       2: {
         opacity: 1,
       },
     },
     item2: {
       2: {
         opacity: 1,
       },
     },
   };
  
   const tl = new Timeline(this.scene.getItem(), this.timeline.nativeElement, {
     keyboard: true,
   });
   tl.on('select', (e: SelectEvent) => {
     console.log(e.selectedItem);
   });

 }
 }

I try to use this way to update keyframes,but it is no change?

Support vue-scenejs for scenejs 1.0.0

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

I tried vue-scenejs README example but it is not working

Describe the bug
A clear and concise description of what the bug is.
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "onPlay" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components,
... to many bug and picture isn't show.

To Reproduce

<template> 
  <vue-scene
    :keyframes="keyframes"
    easing="ease-in-out"
    fillMode="forwards"
    direction="normal"
    :iterationCount="1"
    :playSpeed="1"
    :time="0"
    :css="false"
    :autoplay="false"
    :ready="true"
    @play="onPlay"
    @paused="onPaused"
    @ended="onEnded"
    @animate="onAnimate"
    @timeupdate="onTimeUpdate"
    @iteration="onIteration"
  >
    <div className="circles">
      <div className="circle circle1"></div>
      <div className="circle circle2"></div>
      <div className="circle circle3"></div>
    </div>
  </vue-scene> 
</template>

<script>
  import {
    VueScene,
    VueSceneItem
  } from "vue-scenejs";
  export default {
    name: 'user',
    components: {
      VueScene,
      VueSceneItem,
    },
    data() {
      return {
        keyframes: {
          ".circles .circle": i => ({
            0: {
              "border-width": "150px",
              "opacity": 1,
              "transform": "translate(-50%, -50%) scale(0)",
            },
            1.5: {
              "border-width": "0px",
              "opacity": 0.3,
              "transform": "scale(0.7)",
            },
            options: {
              delay: i * 0.4,
            },
          }),
        },
      };
    }
  }
</script>

I tried to this
Expected behavior

Screenshots

Running as root without --no-sandbox is not supported

OS: Ubuntu 18.04
Node: v10.24.1

Hello,

I'm having the following issue while trying to render an HTML file:

// Command: render -i /tmp/8c7a99b9-4417-49ac-891d-7246c426c72e.html -o /tmp/8c7a99b9-4417-49ac-891d-7246c426c72e_rendered.mp4

stdout: Open Page:  file:///home/muratcolyaran/projects/microservices-google-cloud/index.html

stdout: Start Rendering

stderr: Error: Failed to launch chrome!
[0616/111525.046404:ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

    at onClose (/home/muratcolyaran/projects/microservices-google-cloud/node_modules/@scenejs/render/node_modules/puppeteer/lib/Launcher.js:348:14)
    at Interface.helper.addEventListener (/home/muratcolyaran/projects/microservices-google-cloud/node_modules/@scenejs/render/node_modules/puppeteer/lib/Launcher.js:337:50)
    at Interface.emit (events.js:203:15)
    at Interface.close (readline.js:397:8)
    at Socket.onend (readline.js:173:10)
    at Socket.emit (events.js:203:15)
    at endReadableNT (_stream_readable.js:1145:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

I know I need to start chromium headless but I couldn't find how could I send options to the puppeteer.

Redirect the old URL to the new one?

I believe this is the old URL for the project: https://scene.js.org/

Is there a way to redirect that to the main official site that's currently listed on the GitHub repo?

Scene.transition usage

Hey there, get an error when trying to use Scene.transition documented here https://daybrush.com/scenejs/features.html#transition.

scenejs__WEBPACK_IMPORTED_MODULE_15__.default.transition is not a function

Using npm package version 1.1.7, same issue with 1.1.4. It also seems transition method is not in the Scene type definition.

Here's are reproducible demo https://codesandbox.io/s/busy-goldwasser-p7mcy?file=/src/App.js

Easing option per keyframe

Environments

• Framework name: ReactJS
• Framework version: 18.1.0
• React scene component version: 1.1.0
• Testable Address(optional):

Description

Is it possible to add an easing option per keyframe? Now I have an options object with the easing option, but that is over the whole animation.

{ ".headline_subline_button_gSla8FyLX.format_336x280": { "0": { "visibility": "visible", "transform": "translate(0px, 0px)" }, "5": { "visibility": "visible" }, "0.7": { "transform": "translate(100px, 0px)" }, "options": { "easing": "cubic-bezier(0,1.29,1,-0.27)" } } }

How to control playback in react

Scenejs is great，To use react-scenejs in react, I have to set ref on the component to call play() to control playback. Is there any other way?

Errors when using NgxSceneModule

Describe the bug
When attempting to import NgxSceneModule there are a few issues noticed.

1. Error at run time:
   

2. Error in VS Code
   

To Reproduce
Steps to reproduce the behavior:

1. ng new
2. yarn add ngx-scenejs
3. Add lines to app.module.ts:

import { NgxSceneModule } from 'ngx-scenejs';

@NgModule({
  imports: [
    NgxSceneModule
  ],
})
export class AppModule { }

4. ng serve (Error #1 will show in console)

5. Enable VS Code extension Angular Language Service - https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

6. Add lines to app.component.html:

<ngx-scene></ngx-scene>

7. Error #2 will show in VS Code

Expected behavior
When importing an Angular Module it shouldn't have errors at run time nor when using the Angular Lange Service.

Screenshots
(See Above)

Desktop (please complete the following information):

• OS: macOS 10.13
• Browser: Google Chrome 76
• IDE: VS Code 1.38
• Extensions: Angular Language Service 0.802.3

Additional context
I have tested with ngx-scenejs 1.1.0 and 1.0.1, from my test the behavior remains the sanme on both versions.

In your examples I have noticed that you have imported NgxSceneComponent directly into AppModule then added it to then declarations. While this does not have any errors at run time the Angular Language Service still produces error #2 and this does not match the way other Angular dependancies are imported.

I have also noticed that node_modules/ngx-scenejs/declaritions/ngx-scene.module.d.ts appears to be empty.

export declare class NgxSceneModule {
}

Scenejs + react-moveable + CSS transform-origin + transform (with translate and rotate)

Environments

"react": "^18.2.0",
"scenejs": "^1.10.3",
"react-moveable": "^0.56.0"

Description

In the below clip,
I am not able to find what is causing the target 1 element to move away from its origin - specifically between 2 to 3 to 4 keyframes.

Is this anything to do with transform property's order of precedence between translate, rotate, transform-origin?

You can see the exact values from the dev tools for your reference.

Thanks @daybrush

scenejs+react-moveable-css-transform-origin-issue.webm

Supports exported SVG in After Effect.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Support ngx-scenejs for scenejs 1.0.0

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Can i animate a variable?

Hey!

Am i doing this right? I want to animate variables, but this doesn't seem to work

	var var1 = document.querySelectorAll(".gf1");
	var var1 = document.querySelectorAll(".gf2");

    var gf1togf2 = new Scene ({
        var1 : {
            
            0: {
                opacity: 1,
                transform: "scale(1) translateX(0px)",
                display: "block"
            },


            .5:{
                display: "none",
            },
            
            1: {
                opacity: 0,
                transform: "scale(0.8) translateX(-900px)",
            }
        
            
        }, 

        var2 : {
            
            0: {
                display: "none",
                opacity: 0,
                transform: "scale(0.8) translateX(900px)",
            },

            .5: {
               
                display: "block",
            },
            
            1.5: {
                opacity: 1,
                transform: "scale(1) translateX(0px)",
            }

		},  
		"bar" : {
		0: {
			width: "25%"
		},

		.5: {
			width: "40%"
		}

		}   

      }, {
        easing: "ease-in-out",
        selector: true,
        delay: 0.3
      })


    var testow = document.getElementById("testow");
    testow.addEventListener("click", () => {
        gf1togf2.play();
    })

I'm trying to create a multi-page registration form and i want to use only one scene for each page (there are 5 of them) . Is it possible?

Typewriter effect in reverse

Hi @daybrush

Any idea how can we run the typewriter effect in reverse? I have tried the sceneItem.setDirection but it does not produce the desired effect. Please see the attached gif as a visual example of the effect I need

Secondly can we integrate other animation libraries to produce effects not available in this library.?

Preset Template

const scene = new Scene();

// ex)
Scene.disssolve(0, 1, scene.getItem("a"), scene.getItem("b"), {
    from: 0.2, // default: 0
    to: 0.8, // default: 1
});

Scene.fadein(0, 1, scene.getItem("a"), {
    from: 0.2,
    to: 0.8,
});

scene.getItem("a").dissolve(0, 1, scene.getItem("b"), {
    from: 0.2,
    to: 0.8,
});

scene.getItem("a").fadein(0, 1, {
    from: 0.2,
    to: 0.8,
});


scene.getItem("a").fadeout(0, 1, {
    from: 0.8,
    to: 0.2,
});

Not clear how to use with typescript

I want to try flip function, but it is not clear how to use scenejs with typescript

import Scene from 'scenejs'

const scene = new Scene({
   // no options autocomplete or helper
})

scene.flipY // error

The play() request was interrupted by a call to pause()

Environments

• Framework name: no framework, HTML, CSS, JS
• Framework version: -
• Scene.js Component version: 1.10.3
• Testable Address(optional):

Description

I seem to have an issue with the latest version of SceneJS. I had to update SceneJS to the latest update in order to fix the cubic bezier easing option. I created an issue for it here: #88
But now I get the this error when loading in videos: The play() request was interrupted by a call to pause(). It doesn't happen with every video, but with some video's it does. If I downgrade the SceneJS version, it works and I don't get this error.

I use the following code to load in a video into Scene and play it

this.mediaScene = new MediaScene();

this.scene = new Scene({
	...this.animations,
	media: this.mediaScene
}, {
	selector: true,
	fillMode: "forwards",
	iterationCount: 1
});

this.mediaScene
	.addMedia('jger54t4', VIDEO_DOM_ELEMENT)
	.seek(0, 5)
	.setVolume(1)
	.setDelay(0)

Is it possible that there is an issue in the latest release that is causing this?

How to make the carousel map play automatically?

I created a carousel component through the scenery package of scenejs. It works fine when I click on the next or previous one, but I don't know how to make it play automatically, because I didn't set jsx during initialization. The keyframes property is used instead of code:
` React.useEffect(() => {
const scene = (SceneRef as any).current;

	const sceneItem = scene.getItem(".carousel");
	scene.getItem(".carousel").set({
		".carousel": {
			"0": {
				transform: {
					translateX: prevPos + "px"
				}
			},
			"1": {
				transform: {
					translateX: `${current * -parseFloat(width)}` + "px"
				}
			}
		}
	});
	scene.play();
}, [current, prevPos]);`

so what do I need to do? Thank you

where is NgxMoveableModule from code????

import { NgxSceneComponent, NgxSceneItemComponent, NgxSceneModule } from "ngx-scenejs";

@NgModule({
declarations: [
// NgxSceneComponent,
// NgxSceneItemComponent,
],
imports: [
BrowserModule,
NgxMoveableModule,
],
})

I want to adjust the order of transform, filter.

I want to adjust the order of transform, filter.

import { SceneItem } from "scenejs";

const item = new SceneItem();

item.set(0, "transform", "rotate", "0deg");
item.set(0, "transform", "translate", "0px, 0px");

// transform: rotate(0deg) translate(0px, 0px);
console.log(item.getNowFrame(0).toCSS());

item.setTransformOrder(["translate", "rotate"]);
// transform: translate(0px, 0px) rotate(0deg);
console.log(item.getNowFrame(0).toCSS());

code crash Frame = new Frame('background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));-webkit-background-clip: text;-webkit-text-fill-color: transparent;')

Describe the bug
this code will make the CPU 100%：
const frame:Frame = new Frame('background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));-webkit-background-clip: text;-webkit-text-fill-color: transparent;')

[email protected]

[scenejs/ionic] issue with --aot / --prod builds

Describe the bug

Hi, Thank you for this amazing library !
I'm using it in my cordova/ionic 4 application, everything works as expected in my dev environment, however I'm facing an issue with the staging build when I pass "--aot" argument to the build cmd : ionic-app-scripts build --aot --minifyjs --minifycss --optimizejs
The error is
Error: Cannot find module "."

To Reproduce
Steps to reproduce the behavior:

1. Create an Ionic 3 project
2. Add scenejs as npm dependency
3. build project with --aot --minifyjs --minifycss --optimizejs
4. See error Error: Cannot find module "."

Expected behavior
App works as expected in prod and dev env

Versions :

• test device : iPhone 7 / iPhone XR
• ionic 4.3.1
• cordova : 8.1.2 ([email protected])
• @ionic/app-scripts : 3.1.11

Additional context
N/a

Support Vue Component

batch remove properties is not works by frame.remove method

[email protected]

the API:
/** * remove property value * @param {...String} args - property name * @return {Frame} An instance itself * @example frame.remove("display") */ public remove(...args: NameType[])

when i call this method like this: moveableFrame.remove(...['transform', 'height']), can not remove properties

just can remove one by one :moveableFrame.remove('transform') moveableFrame.remove('height')

Is svelte-scenejs on the roadmap?

I've been enjoying working your svelte-movable library. Would love to know if you've considered a svelte client for scenejs.

How to work with SVG?

I think it is a very noob thing to ask, but how to make SVG work? In the features panel I can't select the div or canvas with the code. Here is a sample:

new Scene({
    "[data-linedrawing] svg path": {
        "0": "stroke-dasharray: 4450 4450",
        "0>": "stroke-dasharray: 0 4450",
        "0.3": "stroke-dasharray: 360 4450",
        "1.2": "stroke-dasharray: 1450 4450",
        "2": "stroke-dasharray: 2400 4450",
        "2.6": "stroke-dasharray: 3000 4450",
        "3.1": "stroke-dasharray: 4450 4450",
    },
  }, {
    iterationCount: "infinite",
    easing: "ease-in",
    selector: true,
  }).play();

Where is the selector parameter? I tried this code many time but nothing is showing up.

How can I add nodes outside of this time

I found that it is necessary to add nodes within the preset time period. If I want to add nodes outside the second time period, what should I do?

There are too few documents about timeline. Where can I find more?

Rotating a group of elements from the center of the group doesn't work

Add Playground

Add playground for scenejs-timeline

• Add Server.
• Add Load / Save features.
• Add menus/tools
• Add Selector, Mover
• Add Scene Info, Properties

In timeLine , i want to delete designated node what can i do?

In timeLine
i want to delete designated node what can i do?

.on('select', (e: SelectEvent) => {
     console.log(e.selectedItem);
   });

it only get the track,it can not get node in the track. I want to get the node and controll it

Could it bind 3d model?

Can I control a item with two different easing?

I want to move an item in an arc. So I should control the 'top' to be moved by ease-in, the 'left' to be moved by ease-out. I have no idea about how to control an item with two different easing type. Is there a simple way to do this?

Here is my code.

    const animate = new scenejs({
          '.hand-img': {
            0: {
              top: 830 * 0.005 + 'rem'
            },
            0.8: {
              top: 950 * 0.005 + 'rem'
            },
            2: {
              top: 950 * 0.005 + 'rem'
            }
          }
        }, {
          selector: true,
          easing: 'ease-in',
          iterationCount: 'infinite'
        });
        const animate2 = new scenejs({
          '.hand-img': {
            0: {
              left: 500 * 0.005 + 'rem'
            },
            0.8: {
              left: 620 * 0.005 + 'rem'
            },
            2: {
              left: 620 * 0.005 + 'rem'
            }
          }
        }, {
          selector: true,
          easing: 'ease-out',
          iterationCount: 'infinite'
        });
        animate.play();
        animate2.play();

Update the keyframes on state update

Environments

• Framework name: ReactJS
• Framework version: 18.1.0
• Moveable Component version: 0.39.2
• Scene Component version: 1.1.0
• Testable Address(optional):

Description

We have build an application sort of like Figma, where you can create and drag layers around. We can give those layers some styling. And also, we can create animations on those layers. For this, we are creating keyframes and passing that to the Scene React component.

{ ".rectangle_OvnRKtiTq.halfpage": { "0": { "visibility": "visible", "transform": "translate(38px, 197px)" }, "5": { "visibility": "visible" }, "options": { "easing": "linear" } } }

But in order for this to work properly, we have to pass a key prop and update that every state change (so every time we drag a layer), so the Scene component will remount itself. This works, but then the Scene component and all of its children, including the layers, will also remount. This gives a flickering result to the layers because it has to load in the image and video layers as well.

If i remove the key prop, then the flickering goes away, but then the animations doesn’t update properly.

Is there a way to update the Scene component with the new keyframes without remounting? Or does Scene not support this? Does it only read the keyframes on componentDidMount and not on componentDidUpdate?

I hoped I explained it correctly. Thanks in advance for your response.

Disable animations when Scene is in paused state.

I have some elemens in a Scene, and I would like to have the animations applied only when Scene is playing.
The scenario is the elements can be moved around to adjust their positions before the Scene is played.
The problem then is some elements may be offscreen before they are actually played, making an editing use case tedious to implement and depends on a lot of conditional code.

Is there a simple way of conditionally setting the css transforms only when the Scene | SceneItem in a playing state.

Scene({...}, {
...,
disabled: true
})

Code crashes when creating a Frame using the linear-gradient CSS function

Describe the bug
Code crashes when creating a Scene.Frame using the linear-gradient() CSS function. Am I using it wrong?

To Reproduce

• demo
• live (see DevTools console)

new Scene.Frame({
  "mask-image": {
    prefix: "linear-gradient(",

    // If the suffix item is removed, no error occurs
    suffix: ")", // <- Uncaught Error: invalid format

    model: "linear-gradient",
    type: "",
    separator: ",",
    value: [
      {
        prefix: "",
        suffix: "",
        model: "",
        type: "array",
        separator: " ",
        value: ["to", "left"]
      },
      {
        prefix: "",
        suffix: "",
        model: "",
        type: "array",
        separator: " ",
        value: ["transparent", "40%"]
      },
      {
        prefix: "",
        suffix: "",
        model: "",
        type: "array",
        separator: " ",
        value: ["black", "60%"]
      }
    ]
  }
});

Expected behavior
no error should occur

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: chrome
• Version: 104.0.5112.101

Frame CSS background-image: url() object problem

Describe the bug
Problems with Frame when adding a background or background-image URL, it returns an [Object object] when you do toCSS();

Desktop (please complete the following information):

• OS: Mac
• Browser Chrome
• Version 81.0.4044.138

Additional context

Don't Work

import { Frame } from 'scenejs';

const frame = new Frame({
            'background-repeat': 'no-repeat',
            'background-position': 'center center',
            'background-size': 'cover',
            'background-image': 'url(https://www.clautic.com/league/wp-content/uploads/unicorn-wallpaper.jpg)',
});

console.log(frame.toCSS());

Work

import { Frame } from 'scenejs';

const frame = new Frame({
            'background-repeat': 'no-repeat',
            'background-position': 'center center',
            'background-size': 'cover'
});

console.log(`${frame.toCSS()}; background-image: url(https://www.clautic.com/league/wp-content/uploads/unicorn-wallpaper.jpg)`);

Thanks man

Support preact-scenejs for scenejs 1.0.0

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

typing - effects is undefined in Vue-scenejs

Describe the bug

  import {
    zoomIn, 
    typing
  } from "@scenejs/effects";
...
    mounted(){
      console.log("effects : ", typing)
      console.log("effects : ", zoomIn)
      /*
      effects :  undefined
      effects :  ƒ zoomIn(_a) {
  var _b = _a === void 0 ? {} : _a,
      _c = _b.from,
      from = _c === void 0 ? 0 : _c,
      _d = _b.to,
      to = _d === void 0 ? 1 : _d;

  return set(["transform", "scale"], [f…
      */

and My pacakge.json

  "devDependencies": {
    "@daybrush/builder": "^0.1.1",
    "@scenejs/effects": "^0.1.0",

When I tried to typing-effect
typing-effect
But it is not working.
Is it diffrent version vue-scenejs and scenejs?

Is React Native supported?

Does SceneJS support Typescripts? Node?