Giter Site home page Giter Site logo

supportclass / ae-ease-to-gsap-customease Goto Github PK

View Code? Open in Web Editor NEW
62.0 62.0 3.0 32 KB

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

License: MIT License

JavaScript 100.00%
after-effects animation curve ease greensock gsap keyframes

ae-ease-to-gsap-customease's People

Contributors

from-the-river-to-the-sea avatar runegan avatar zlovatt 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

Watchers

 avatar  avatar  avatar  avatar

ae-ease-to-gsap-customease's Issues

Doesn't work with eases that curve up and to the right.

Example ease that causes the failure:
screenshot

Explanation

SVG's y-coordinates are inverted from AE's. Turns out that in writing this script, I only tested with ease curves that go down and to the right, which winds up being what GSAP's CustomEase expects.

When the ease goes up and to the right, the resulting SVG is the opposite, and CustomEase winds up assuming that we're trying to do something wacky and gives us a normalized output that we don't want.

Solution

This script needs to handle normalizing the SVG path data into a coordinate space and orientation that will always be what CustomEase expects.

More info: https://greensock.com/forums/topic/16271-customease-might-not-be-properly-normalizing-svg-path-data/#entry71667

Detect when an ease curve is identical to a stock GSAP ease

If a given ease curve is identical (or perhaps very close) to any of the stock GSAP eases, the script should detect that and notify the user. CustomEases can be expensive to instantiate, and using a stock ease such as Power3.easeOut or Back.easeInOut or what-have-you will be more performant and easier to maintain.

Tests

Given that this is a functional library that takes input and generates consistent output, tests can be written for it.

The tricky part will be writing a test harness that shims/mocks all the ExtendScript globals. Perhaps this work has already been done somewhere else?

Only run on selected keyframes

Currently, the script will always run on all keyframes for the selected property (or properties). It would be nice if the script only looked at the specific keyframes that the user currently has selected.

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.