Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swampthang

Awesome Custom Ease!

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Awesome, Jack! Yea, I was wondering how I might be able to go right back to that ease. I'll do that and bookmark it. Thanks.

Share this post


Link to post
Share on other sites

Very nice swampthang :) Thanks for sharing.

 

@jack - daaaaang - neat trick - you do love to add the cool bells and whistles to your work don't you?  B)

  • Like 1

Share this post


Link to post
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?

Share this post


Link to post
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. 

Share this post


Link to post
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.  

Share this post


Link to post
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 :) 

Share this post


Link to post
Share on other sites

Thanks for the reply. As for the ThrowProps plugin I don't see it anywhere in the download.

Share this post


Link to post
Share on other sites

Ah, that's because it looks like you're a "Simply Green" member. ThrowPropsPlugin is for "Shockingly Green" and "Business Green" members :)

Share this post


Link to post
Share on other sites

hmmmm... on this episode of As The GreenSock Neighborhood Turns we find swampthang considering an upgrade to a Shockingly Green Club Membership.

 

What will he decide? Stay tuned and find out.  :ph34r:  :D

  • Like 2

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Ok, it looks like this is an issue with perspective and canvas2d context. 

 

UDPATE: Maybe not. I removed canvas from the equation and it's still not working in Chrome. Works in Firefox.

 

See the Pen EZbZgb?editors=0010 by swampthang (@swampthang) on CodePen

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

uh-oh! If Blake is unable to fix something, we're in trouble here.  :blink:

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×