https://github.com/supportclass/ae-ease-to-gsap-customease
Converts the keyframes of the selected property in After Effects to a set of SVG path commands that can be used directly in GreenSock's CustomEase plugin
https://github.com/supportclass/ae-ease-to-gsap-customease
after-effects animation curve ease greensock gsap keyframes
Last synced: 3 months ago
JSON representation
Converts the keyframes of the selected property in After Effects to a set of SVG path commands that can be used directly in GreenSock's CustomEase plugin
- Host: GitHub
- URL: https://github.com/supportclass/ae-ease-to-gsap-customease
- Owner: SupportClass
- License: mit
- Created: 2017-03-30T20:44:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-01-16T22:57:44.000Z (almost 6 years ago)
- Last Synced: 2023-10-20T23:17:42.286Z (about 2 years ago)
- Topics: after-effects, animation, curve, ease, greensock, gsap, keyframes
- Language: JavaScript
- Homepage:
- Size: 31.3 KB
- Stars: 61
- Watchers: 4
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ae-ease-to-gsap-customease [](https://travis-ci.org/SupportClass/ae-ease-to-gsap-customease)
Converts the keyframes of the selected property in After Effects to a set of SVG path commands that can be used directly in GreenSock's CustomEase plugin. Works on Windows and MacOS.
> **BETA NOTICE:** This script is currently in an early beta. It may not work with all layers and properties.
Most of these limitations will be fairly straightforward to overcome, but we wanted to get this script out in public ASASP.
## Motivation
Ever wished you could take your ease curve from the graph editor in After Effects and somehow use it directly
in your [GSAP](https://greensock.com/gsap) animation? Now you can.
## Installation
1. [Click here](https://github.com/SupportClass/ae-ease-to-gsap-customease/raw/master/ae-ease-to-gsap-customease.jsx)
to download `ae-ease-to-gsap-customease.jsx`, and save it to a place where you can find it again easily.
## Usage
1. Open your After Effects project.
2. Select the layer whose ease curve you wish to export.
3. Select the property (such as Scale, Opacity, etc) whose ease curve you wish to export.
4. Go to "File > Scripts > Run Script File..."
5. Browser to where you downloaded `ae-ease-to-gsap-customease.jsx` and select it, then click "Open".
6. If the script ran successfully, you will see an alert like this:
7. You can now paste the contents of your clipboard directly into a [GSAP CustomEase](https://greensock.com/docs/#/HTML5/GSAP/Easing/CustomEase/).
To preview your ease, you can paste it into GreenSock's "[Ease Visualizer](https://greensock.com/ease-visualizer)" tool.
## Thanks
In writing this script, I studied code from
- [@turbodrive](https://github.com/turbodrive) ([Source](https://gist.github.com/turbodrive/a0913ac83e3d5d5f5b15))
- [@juancabrera](https://github.com/juancabrera) ([Source](https://gist.github.com/juancabrera/026fb883cb2bae93bd21))
- [@bodymovin](https://github.com/bodymovin) ([Source](https://github.com/bodymovin/bodymovin))
I also received guidance from [@zlovatt](https://github.com/zlovatt), who made time to answer my beginner questions.
## License
[MIT](LICENSE)