Jump to content
Search Community

Awesome Custom Ease!

swampthang test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I was wanting to create a multi-word, repeating 'swinging-sign' animation similar to Jamie Jefferson's here:

See the Pen zjsCl by jamiejefferson (@jamiejefferson) on CodePen

 

The way he has that set up (and I'm sure he had to do it that way at the time) called an onStart function that created the swinging effect. That sort of wreaked havoc on the idea of being able to "replay" the timeline. So I pulled up the awesome ease-visualizer and created a custom ease that basically did the same thing. Made for a really simple way to recreate Jamie's awesome effect.

 

I've seen a few folks on stackoverflow and elsewhere wanting to do this so thought I'd post this here for anyone struggling with it. 

 

Here's the custom ease:

ease: CustomEase.create("custom", "M0,0 C0.128,0.572 0.052,1.374 0.15,1.374 0.28,1.374 0.226,0.528 0.358,0.528 0.466,0.528 0.442,1.164 0.552,1.164 0.694,1.164 0.62,0.764 0.736,0.764 0.788,0.764 0.798,1.044 0.856,1.044 0.88,1.044 0.924,0.948 0.94,0.948 0.961,0.948 0.993,1 1,1")

See the Pen LxjqvJ?editors=0110 by swampthang (@swampthang) on CodePen

  • Like 2
Link to comment
Share on other sites

Very cool. Thanks for sharing.

 

By the way, super-secret tip that almost nobody knows about: you can direct-link to your custom ease by tacking it onto the end of the URL as a CustomEase= parameter, like:

 

http://greensock.com/ease-visualizer?CustomEase=M0,0 C0.128,0.572 0.052,1.374 0.15,1.374 0.28,1.374 0.226,0.528 0.358,0.528 0.466,0.528 0.442,1.164 0.552,1.164 0.694,1.164 0.62,0.764 0.736,0.764 0.788,0.764 0.798,1.044 0.856,1.044 0.88,1.044 0.924,0.948 0.94,0.948 0.961,0.948 0.993,1 1,1

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Thanks, PointC. Hey, Jack. I just downloaded the latest and noticed there is now a commonjs-flat folder that looks like it has everything in there. I'm developing in nodejs and up until now have had to add plugins like:

const TextPlugin = require("gsap/src/uncompressed/plugins/TextPlugin");
const Draggable = require("gsap/src/uncompressed/utils/draggable");
const ThrowPropsPlugin = require("gsap/src/uncompressed/plugins/ThrowPropsPlugin");
const CSSPlugin = require("gsap/src/uncompressed/plugins/CSSPlugin");
const ModifiersPlugin = require("gsap/src/uncompressed/plugins/ModifiersPlugin");

Does this mean I can now just do:

const TweenMax = require("gsap");

and it should all work?

 

Reason I ask is I was about to add the CustomEase.js (bounce and wiggle too) into the plugins folder. Would be awesome if you had a private repo that you could add members to where we could just do:

npm install --save gsap

When I go from my Mac to PC and update I always have to start with npm, then snag the download, then copy the extras into the right folders. Any plans for that?

Link to comment
Share on other sites

We can't really do a private repo because anybody could snag the stuff for free as long as they knew the URL. That wouldn't be cool :) And it'd be a huge undertaking to try to implement some sort of authentication system that's tied to expiration dates, etc.

 

And yeah, we updated the dependency stuff so that you should be able to just do require("gsap/Draggable") or require("gsap/TweenMax"), etc. Basically, "gsap/[CLASS_NAME]". If you just point to "gsap", you'll get TweenMax. Should be pretty convenient. 

 

As for CustomEase/Wiggle/Bounce, you can drop those into your node_modules/gsap folder and get the same behavior. We're actually talking about updating the require() statements in those to reference "gsap/TweenLite" instead of "./TweenLite.js" so that it doesn't depend on any relative paths. Would that be helpful? Not sure if it'd mess up anyone else, but I kinda doubt it. This would be for NPM users. 

Link to comment
Share on other sites

Awesome, Jack.

 

Couple of questions.

 

  1. I noticed that the ThrowPropsPlugin is no longer there so assume it's no longer needed. 
  2. Since TweenMax includes CSSPlugin that means I can remove that require as well? I might be late to the party on that anyway. I do have some references to...
    CSSPlugin.defaultSmoothOrigin = true
     but seems like I remember seeing somewhere that's the default, right?

I understand on the private repo thing. I didn't know you could pull from a private repo without entering a valid github login. I'm like, what's the use of a private repo if they let that happen? Authentication via those users you've added shouldn't be that hard for them. They should provide some sort of oAuth API or something.  

Link to comment
Share on other sites

1) I'm not sure what you mean - ThrowPropsPlugin is no longer where exactly?

 

2) Yeah, unless you're referencing CSSPlugin directly, no need to import it (actually, it'd still probably work in the global scope). 

 

Oh, and I wasn't saying you can pull from a private repo without credentials - I just meant i'd be a major headache to try managing hundreds/thousands of different credentials, expiration dates, etc. And if we just use a generic account and give all members the credentials, it'd be extremely likely that folks would share that (maybe even accidentally) with other non-members and it'd be a mess. We wouldn't want to keep having to change credentials and telling everybody what the "password-of-the-week" is :) 

Link to comment
Share on other sites

Ahhh, actually our business account has a business green membership. It's under my partner's name, though. I've had an account personally for some time and just thought I'd keep it going. Besides, all the posts have been under my personal account so why change horses in the middle of the stream, right? Didn't know there was a difference in the plugins. Will download under our business account.

Link to comment
Share on other sites

I've got another little issue here. Rendering an SVG with a foreignObject definitely requires all styles, etc be embedded in the SVG. For some reason, rotationX isn't being picked up in the rendering process. I'm thinking maybe there's something else I need to add to the settings present inside the SVG. Here's a codepen where you can process the images and see how the output looks.

 

When you click the 'process images' button you'll see a bunch of images populate below the animation window. It seems as if the perspective isn't being rendered.

 

Can anyone look at the output of the images and tell me what might be missing in the translation?

 

Anyone? Anyone? Blake?  :?

 

See the Pen GrMKPL?editors=1010 by swampthang (@swampthang) on CodePen

 

UPDATE: Just noticed it works as expected in FireFox. But, it has to work in Chromium.

 

Captured the matrix3d settings set by GSAP in the pen above and created a super scaled down pen that just shows the resulting base64 image. 

 

See the Pen LxObmj by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

 

Anyone? Anyone? Blake?  :?

 

 

Haha! I've been summoned.

 

I have no idea what the problem is, but it definitely looks like a Chrome bug as it also displays correctly in Edge. It looks like it's only doing affine transformations (2d), parallel lines before a transformation will always end up parallel after a transformation.

 

Technically, the 2d canvas context can only do affine transformations, but I'm not sure how it handles a case like yours because your not transforming the image with the actual canvas context, you're just drawing an image transformed elsewhere.

 

I'm really at a lost here. I cannot think of a possible workaround at the moment.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...