daybrush / scenejs Goto Github PK
View Code? Open in Web Editor NEW🎬 Scene.js is JavaScript & CSS timeline-based animation library
Home Page: https://daybrush.com/scenejs
License: MIT License
🎬 Scene.js is JavaScript & CSS timeline-based animation library
Home Page: https://daybrush.com/scenejs
License: MIT License
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.
import { NgxSceneComponent, NgxSceneItemComponent, NgxSceneModule } from "ngx-scenejs";
@NgModule({
declarations: [
// NgxSceneComponent,
// NgxSceneItemComponent,
],
imports: [
BrowserModule,
NgxMoveableModule,
],
})
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.
"react": "^18.2.0",
"scenejs": "^1.10.3",
"react-moveable": "^0.56.0"
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
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.
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?
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?
Describe the bug
Code crashes when creating a Scene.Frame
using the linear-gradient()
CSS function. Am I using it wrong?
To Reproduce
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
Desktop (please complete the following information):
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?
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.
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?
I need to generate the useNowFrames dynamically through the user input. How can i do that ?
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:
Expected behavior
App works as expected in prod and dev env
Versions :
Additional context
N/a
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've been enjoying working your svelte-movable library. Would love to know if you've considered a svelte client for scenejs.
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
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)" } } }
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?
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?
const newLayer = JsCanvas.newItem(`.Layer-${name}`, {
iterationCount: 1,
selector: true,
delay: delay,
});
newLayer.set(keyframes);
JsCanvas.setItem(`.Layer-${name}`, newLayer);
Describe the bug
When attempting to import NgxSceneModule there are a few issues noticed.
To Reproduce
Steps to reproduce the behavior:
import { NgxSceneModule } from 'ngx-scenejs';
@NgModule({
imports: [
NgxSceneModule
],
})
export class AppModule { }
ng serve (Error #1 will show in console)
Enable VS Code extension Angular Language Service - https://marketplace.visualstudio.com/items?itemName=Angular.ng-template
Add lines to app.component.html:
<ngx-scene></ngx-scene>
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):
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 {
}
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.?
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 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();
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?
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.
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,
});
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()
...
}
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
})
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.
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
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());
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):
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
Add Chrome Extension for timeline with playground
It's an invalid issue for test.
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
Add playground for scenejs-timeline
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
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')
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;')
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.