jeremyckahn / stylie Goto Github PK
View Code? Open in Web Editor NEWA graphical CSS3 animation tool
Home Page: https://jeremyckahn.github.io/stylie/
License: Other
A graphical CSS3 animation tool
Home Page: https://jeremyckahn.github.io/stylie/
License: Other
Moving keyframes by re-typing the millisecond value in the form is causing the animation to break. This is a pretty tough bug to fix โ I've already spent several hours on it. This is a significant bug, so I'm working to get a fix out as quickly as I can.
Filing this issue for visibility.
http://cubic-bezier.com/#.17,.67,.94,.35
I would like a bezier function to update in realtime with the option of editing it in the UI.
Copy/pasting the generated CSS as-is won't do much good until it has position: absolute
.
Blocked by #17.
Blocked by #16.
From here:
cubic-bezier(0.345, 0.005, 0.670, 0.975);
instead of linear
)From here:
Would be nice to have them, happy to send a PR.
Happy New Year!
RE: transform: scale(1,3); /* Standard syntax scale(x,y) */
How do I stretch the height the object from the right panel ?
SCALE only have one input.
First and foremost, thanks for this tool. It is extremely impressive, and has made playing with CSS animations fun! Huge thanks!
I wouldn't claim to be an expert here, so this could be by design. Why are there two translates applied in the transform, one with pixels as units and the other with percentages as units?
I was struggling to figure out why my animations were different between Chrome and Firefox. I believe FF is ignoring the second translate, while Chrome applies both. When I remove the second percentage-based definition, both browsers behave similarly. If this is a bug, I hope this helps; if not, I'd love to know what's going on...
Thanks again!
.S {
-webkit-animation-name: S-transform-keyframes;
-webkit-animation-duration: 5000ms;
-webkit-animation-delay: 0ms;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 0 0;
animation-name: S-transform-keyframes;
animation-duration: 5000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
@-webkit-keyframes S-transform-keyframes {
0% {-webkit-transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
40% {-webkit-transform:translate(2px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
60% {-webkit-transform:translate(-9px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
80% {-webkit-transform:translate(-17px, -6px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100% {-webkit-transform:translate(-1px, -1px) scale(1) rotateX(0deg) rotateY(39deg) rotateZ(0deg) translate(-50%, -50%);}
}
@Keyframes S-transform-keyframes {
0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
40% {transform:translate(2px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
60% {transform:translate(-9px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
80% {transform:translate(-17px, -6px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100% {transform:translate(-1px, -1px) scale(1) rotateX(0deg) rotateY(39deg) rotateZ(0deg) translate(-50%, -50%);}
}
Create bezier handles for the anchors of the paths rather than CSS easing terms (no one knows what those are, but they can visually see the path change). A lot of projects do this so I don't think it would be too crazy, but it would help a lot.
Hi, great little tool, thanks!
I have a few use cases for stylie, first some context: I'd like to use the generated animations inside a HTML5 magazine solution, which adapts to screensize. This means there's no fixed canvas, and sometimes we need to use percentage based values for animations. Together with that, elements are often positioned with an initial offset which positions them outside the viewport.
Would it be possible to add a visible canvas to stylie, so it's possible to animate elements from outside to the inside?
And together with that, could it use % based values for translates/scaling instead of pixels as an option?
I noticed in the output its all compiled CSS. It would like to take the output via SASS w/ Compass and put it in my app and still be manageable. http://www.colorzilla.com/gradient-editor/ does it for gradients.
Things like After Effects operate like so: when someone pauses and moves the slider manually to a spot they like, then create any alteration, it automatically makes a keyframe and tween between the old and new keyframe.
JS error stops Stylie working at all. Renders blank page. Happens on http://jeremyckahn.github.io/stylie/ and locally.
Hi, could you please guide me on how to install stylie. i get this errors
$ npm install https://github.com/jeremyckahn/stylie
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated [email protected]: connect 2.x series is deprecated
npm ERR! code 1
npm ERR! git dep preparation failed
npm ERR! command C:\Program Files\nodejs\node.exe C:\Users\User\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js install --force --cache=C:\Users\User\AppData\Local\npm-cache --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/pinpoint'
npm ERR! npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm ERR! npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm ERR! npm WARN deprecated [email protected]: this library is no longer supported
npm ERR! npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm ERR! npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm ERR! npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm ERR! npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/formula'
npm ERR! npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm ERR! npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! npm WARN deprecated [email protected]: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm ERR! npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm ERR! npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm ERR! npm WARN deprecated [email protected]: Use uuid module instead
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm ERR! npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm ERR! npm WARN deprecated [email protected]: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm ERR! npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm ERR! npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm ERR! npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm ERR! npm WARN deprecated [email protected]: connect 2.x series is deprecated
npm ERR! npm ERR! code 1
npm ERR! npm ERR! path C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\node-sass
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! npm ERR! gyp info it worked if it ends with ok
npm ERR! npm ERR! gyp verb cli [
npm ERR! npm ERR! gyp verb cli 'C:\Program Files\nodejs\node.exe',
npm ERR! npm ERR! gyp verb cli 'C:\Users\User\AppData\Local\npm-cache\_cacache\tmp\git-clone-87149d77\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! npm ERR! gyp verb cli 'rebuild',
npm ERR! npm ERR! gyp verb cli '--verbose',
npm ERR! npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! npm ERR! gyp verb cli '--libsass_library='
npm ERR! npm ERR! gyp verb cli ]
npm ERR! npm ERR! gyp info using [email protected]
npm ERR! npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! npm ERR! gyp verb command rebuild []
npm ERR! npm ERR! gyp verb command clean []
npm ERR! npm ERR! gyp verb clean removing "build" directory
npm ERR! npm ERR! gyp verb command configure []
npm ERR! npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! npm ERR! gyp verb which
failed Error: not found: python2
npm ERR! npm ERR! gyp verb which
failed at getNotFoundError (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:13:12)
npm ERR! npm ERR! gyp verb which
failed at F (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:68:19)
npm ERR! npm ERR! gyp verb which
failed at E (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:80:29)
npm ERR! npm ERR! gyp verb which
failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:89:16
npm ERR! npm ERR! gyp verb which
failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\isexe\index.js:42:5
npm ERR! npm ERR! gyp verb which
failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\isexe\windows.js:36:5
npm ERR! npm ERR! gyp verb which
failed at FSReqCallback.oncomplete (fs.js:183:21)
npm ERR! npm ERR! gyp verb which
failed python2 Error: not found: python2
npm ERR! npm ERR! gyp verb which
failed at getNotFoundError (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:13:12)
npm ERR! npm ERR! gyp verb which
failed at F (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:68:19)
npm ERR! npm ERR! gyp verb which
failed at E (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:80:29)
npm ERR! npm ERR! gyp verb which
failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:89:16
npm ERR! npm ERR! gyp verb which
failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\isexe\index.js:42:5
npm ERR! npm ERR! gyp verb which
failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\isexe\windows.js:36:5
npm ERR! npm ERR! gyp verb which
failed at FSReqCallback.oncomplete (fs.js:183:21) {
npm ERR! npm ERR! gyp verb which
failed code: 'ENOENT'
npm ERR! npm ERR! gyp verb which
failed }
npm ERR! npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! npm ERR! gyp verb which
succeeded python C:\Users\User\AppData\Local\Programs\Python\Python39\python.EXE
npm ERR! npm ERR! gyp ERR! configure error
npm ERR! npm ERR! gyp ERR! stack Error: Command failed: C:\Users\User\AppData\Local\Programs\Python\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! npm ERR! gyp ERR! stack File "", line 1
npm ERR! npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! npm ERR! gyp ERR! stack ^
npm ERR! npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! npm ERR! gyp ERR! stack
npm ERR! npm ERR! gyp ERR! stack at ChildProcess.exithandler (child_process.js:308:12)
npm ERR! npm ERR! gyp ERR! stack at ChildProcess.emit (events.js:315:20)
npm ERR! npm ERR! gyp ERR! stack at maybeClose (internal/child_process.js:1048:16)
npm ERR! npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
npm ERR! npm ERR! gyp ERR! System Windows_NT 10.0.19041
npm ERR! npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\User\AppData\Local\npm-cache\_cacache\tmp\git-clone-87149d77\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! npm ERR! gyp ERR! cwd C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\node-sass
npm ERR! npm ERR! gyp ERR! node -v v14.16.0
npm ERR! npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! npm ERR! gyp ERR! not ok
npm ERR! npm ERR! Build failed with error code: 1
npm ERR!
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR! C:\Users\User\AppData\Local\npm-cache_logs\2021-04-06T15_54_11_951Z-debug.log
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Local\npm-cache_logs\2021-04-06T15_54_25_926Z-debug.log
Stylie is currently being served as http. Switch to https to prevent Mantra exports from breaking.
Hi, Great project you have here. Just wondered if there is any way to make the object being animated rotate to face the direction of travel? In your demo, you use a circle but for any other sort of object at some point if there is a change of direction, the object ends up facing the wrong way.
Is there any way to auto rotate the object to the direction of travel? Thanks.
Blocked by #16.
How do I make a stop in my animation?
already changed the infinite to 1 and did not work.
Can you help-me?
.stylie {
animation-name: stylie-transform-keyframes;
animation-duration: 2000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
@Keyframes stylie-transform-keyframes {
0% {transform:translateX(40px) translateY(437px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100% {transform:translateX(447.5px) translateY(437px) rotate(0deg) translate(-50%, -50%);}
}
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.