GreenSock

I couldn't see any issues on that page. If you're having trouble, would you mind creating a reduced test case in codepen or something so that we can tinker and see exactly what you mean?

That's not something we currently offer, but we'll definitely consider it for the future. If anything, it'd probably be in the download zip for account holders (since CustomEase is only available to account holders). Is the greensock.com/ease-visualizer page not loading well for you? Is that the main reason for your request?

@anteksiler, I'm not quite sure what you mean - strictUnits isn't at all related to orientation changes. It's just for storing the original (starting) value as it's initially reported instead of changing to to match the ending percent-based value. Does that answer your question?

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.

What's weird is that when you get the initial value from the browser, it reports it with the color as the FIRST parameter: var div = document.querySelector("div"); div.style.filter = "drop-shadow(0px 0px 5px #f00)"; var cs = document.defaultView.getComputedStyle(div); console.log(cs.filter); //reports drop-shadow(rgb(255, 0, 0) 0px 0px 5px) So that was throwing things off, as GSAP was trying to tween drop-shadow(rgb(255, 0, 0) 0px 0px 5px) to "drop-shadow(0px 0px 5px #00f)", so the values didn't match up. Here's how you could do it with a generic value: function alsoWorks() { var filter = {value:"drop-shadow(0px 0px 5px #f00)"}, element = document.querySelectorAll('div')[0]; TweenLite.to(filter, 1, { value: "drop-shadow(0px 0px 5px #00f)", onUpdate: function () { element.style.filter = filter.value; } }); } I've also made an improvement in the next update to handle that situation better but it'd still require that you put things in the order that the browser reports them. Reminder: since browser support for filters is so inconsistent, GSAP doesn't "officially" support them.

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!

Howdy Dane. Here's a solution: https://jsfiddle.net/z6s9a54d/ A few things: Most of this has to do with immediateRender. A set() call typically renders immediately by default. Your first one set visibility:hidden (good), but you had 2 more after that which had clearProps:visibility, meaning those completely wiped out what the first one did. You could set immediateRender:false on the two subsequent ones and you'd be fine. You're using a much longer syntax than you need. You could just use the convenience methods on timelines., like: //OLD: tl.add( TweenLite.set(...), 1); //NEW: tl.set(..., 1); Note that timeline.set() tries to figure out your intent and set immediateRender automatically - if it's at the very start of the timeline and it's not paused, immediateRender will be true, otherwise false. Another reason to use the convenience methods There were some typos in your code (extra commas and missing semicolons) Does that clear things up?

Yep, I suspect you're looking for that autoKill feature that we've already got baked in to make your life easier. For the record, there's no way to know that a value is edited elsewhere other than what we do inside the plugin which is to record the value we set, and then next time we go to set a new value, we compare the previous one with the current one. If it's different, we know we didn't set it, so SOMETHING else did. In other words, if I set scrollTop to 100 and then on the next tick, I check scrollTop and it's 130, something else messed with it. Does that help at all?

Ah, very interesting. This is an EXTREMELY uncommon scenario - it would only happen if you kill the VERY NEXT tween (that's going to get rendered in the queue) from within an onComplete or onUpdate callback. If you had even one other tween inbetween those, you wouldn't see this problem. Good job! It should be fixed in the next update which you can preview (uncompressed TweenMax) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Any of these would also work around the issue: Pause that tween (in addition to or instead of killing it) Just add some other tween inbetween those Use a TimelineLite/Max instance instead of the root timeline.

Sorry about the confusion - the issue is just that there's a default minimum duration applied to the throwProps stuff of 0.5 seconds. You can change that by either setting it directly in your Draggable, like: Draggable.create('#box2', { throwProps: true, throwResistance: 999999, minDuration:0 }); Or you could set overshootTolerance:0. Either one should work. Does that resolve things for you?

No, it's generally a bad idea to just always parseTransform - it hurts performance. The **ONLY** time you'd ever want to use parseTransform is if you're going against the best-practice and manually setting transform-related stuff OUTSIDE of GSAP. Is there any particular reason you're using jQuery to set that instead of GSAP (like with a TweenMax.set())? And no, you rarely need to use .fromTo(). The beauty of the .to() method is that it'll automatically figure out the starting values dynamically for you (whatever they are at the start of the tween). That's almost always what people want. But if you use a fromTo(), it requires that you set both the starting and ending values. That's ideal if you're wanting to make it jump from its current value to some other place before starting to tween. But that's relatively uncommon from what we've seen.

I have no idea how to answer that. I thought Rails was a server-side language.

Thanks for letting us know that you solved it (and for sharing your solution)

I assume "I don't have access to DOM elements" means that you're trying to animate CSS properties, right? That requires CSSPlugin which is included inside of TweenMax but if you're only using TweenLite, you need to make sure you load CSSPlugin too in order to animate CSS properties. The "gsap" package actually points to TweenMax (that's what "main" is in the package.json), thus when you did this: import TweenLite from "gsap"; It was loading TweenMax (and exporting TweenLite from that). In other words, CSSPlugin was along for the ride When you did this: import TweenLite from "gsap/TweenLite"; ...that was ONLY getting you TweenLite (no CSSPlugin...no TweenMax). So all you've got to do is *also* load CSSPlugin (in addition to TweenLite) if your goal is to animate CSS properties. Or just stick with using the "gsap" (TweenMax). Make sense?

I'm totally unfamiliar with Rails, so I won't be much help. Those "dependencies" are just JavaScript files that need to be loaded on the page for it to work, but please note that several of them (ScrambleTextPlugin, SplitText, and Physics2DPlugin) are members-only plugins that come with Club GreenSock. See http://greensock.com/club/.

Welcome to the forums. You already got your question answered via twitter, right?: https://twitter.com/HuilingLiu1203/status/823870418809298945 I'm completely unfamiliar with Rails, so I probably can't be much help. Let us know if you need anything else.

Great job, @OpherV! Thanks for sharing.

Sorry to hear about the trouble. And thanks for renewing your membership Have you tried using that new "commonjs-flat" folder that we started providing with GSAP 1.19.1 (in your zip download)? Those files are all lose in one directory so that it's super easy for Node/NPM folks to leverage. Actually, you should be able to snag the Physics2DPlugin.js file from that directory and dump it into your "gsap" NPM folder and it'll just work That way, you could do: import Physics2DPlugin from "gsap/Physics2DPlugin"; Does that help at all?

Ah, okay, I see what you mean - that'd only happen when you're declaring your own GreenSockGlobals object and loading ColorPropsPlugin from GSAP 1.19.0 or 1.19.1. Here's a revised minified chunk of code that you can drop into your project to resolve things (it'll be in the next official release of GSAP as well, of course): /*! * VERSION: beta 1.5.1 * DATE: 2017-01-23 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2017, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";var a,b,c=/(\d|\.)+/g,d=/(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g,e={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],fuchsia:[255,0,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},f=function(a,b,c){return a=0>a?a+1:a>1?a-1:a,255*(1>6*a?b+(c-*a*6:.5>a?c:2>3*a?b+(c-*(2/3-a)*6:+.5|0},g=function(a,{var g,h,i,j,k,l,m,n,o,p,q;if(a)if("number"==typeof a)g=[a>>16,a>>8&255,255&a];else{if(","===a.charAt(a.length-1)&&(a=a.substr(0,a.length-1)),e[a])g=e[a];else if("#"===a.charAt(0))4===a.length&&(h=a.charAt(1),i=a.charAt(2),j=a.charAt(3),a="#"+h+h+i+i+j+j),a=parseInt(a.substr(1),16),g=[a>>16,a>>8&255,255&a];else if("hsl"===a.substr(0,3))if(g=q=a.match(c),{if(-1!==a.indexOf("="))return a.match(d)}else k=Number(g[0])%360/360,l=Number(g[1])/100,m=Number(g[2])/100,i=.5>=m?m*(l+1):m+l-m*l,h=2*m-i,g.length>3&&(g[3]=Number(a[3])),g[0]=f(k+1/3,h,i),g[1]=f(k,h,i),g[2]=f(k-1/3,h,i);else g=a.match(c)||e.transparent;g[0]=Number(g[0]),g[1]=Number(g[1]),g[2]=Number(g[2]),g.length>3&&(g[3]=Number(g[3]))}else g=e.black;return b&&!q&&(h=g[0]/255,i=g[1]/255,j=g[2]/255,n=Math.max(h,i,j),o=Math.min(h,i,j),m=(n+o)/2,n===o?k=l=0:(p=n-o,l=m>.5?p/(2-n-o):p/(n+o),k=n===h?(i-j)/p+(j>i?6:0):n===i?(j-h)/p+2:(h-i)/p+4,k*=60),g[0]=k+.5|0,g[1]=100*l+.5|0,g[2]=100*m+.5|0),g},h=function(a,{var c,d,e,f=(a+"").match(j)||[],h=0,i=f.length?"":a;for(c=0;c<f.length;c++)d=f[c],e=a.substr(h,a.indexOf(d,h)-h),h+=e.length+d.length,d=g(d,,3===d.length&&d.push(1),i+=e+(b?"hsla("+d[0]+","+d[1]+"%,"+d[2]+"%,"+d[3]:"rgba("+d.join(","))+")";return i+a.substr(h)},i=(_gsScope.GreenSockGlobals||_gsScope).TweenLite,j="(?:\\b(??:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b",k=_gsScope._gsDefine.plugin({propName:"colorProps",version:"1.5.1",priority:-1,API:2,global:!0,init:function(a,c,d,e){var f,h,i,j;this._target=a,this._proxy=h="NUMBER"===(c.format+"").toUpperCase()?{}:0;for(f in c)"format"!==f&&(h?(this._firstNumPT=i={_next:this._firstNumPT,t:a,p:f,f:"function"==typeof a[f]},h[f]="rgb("+g(i.f?a[f.indexOf("set")||"function"!=typeof a["get"+f.substr(3)]?f:"get"+f.substr(3)]():a[f]).join(",")+")",j=c[f],"function"==typeof j&&(j=j(e,a)),this._addTween(h,f,"get","number"==typeof j?"rgb("+g(j,!1).join(",")+")":j,f,null,null,):this._addTween(a,f,"get",c[f],f,null,null,b,e));return!0},set:function(a){var b,c=this._firstNumPT;for(this._super.setRatio.call(this,a);c;)b=g(this._proxy[c.p],!1),b=b[0]<<16|b[1]<<8|b[2],c.f?this._target[c.p](:this._target[c.p]=b,c=c._next}});for(a in e)j+="|"+a+"\\b";j=new RegExp(j+")","gi"),k.colorStringFilter=b=function(a){var b,c=a[0]+a[1];j.lastIndex=0,j.test(c)&&(b=-1!==c.indexOf("hsl(")||-1!==c.indexOf("hsla("),a[0]=h(a[0],,a[1]=h(a[1],)},i.defaultStringFilter||(i.defaultStringFilter=k.colorStringFilter),k.parseColor=g,a=k.prototype,a._firstNumPT=null,a._kill=function({for(var c,d=this._firstNumPT;d;)d.p in b?(d===a._firstNumPT&&(this._firstNumPT=d._next),c&&(c._next=d._next)):c=d,d=d._next;return this._super._kill(}}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(a){"use strict";var b=function(){return(_gsScope.GreenSockGlobals||_gsScope)[a]};"function"==typeof define&&define.amd?define(["TweenLite"],:"undefined"!=typeof module&&module.exports&&(require("../TweenLite.js"),module.exports=b())}("ColorPropsPlugin"); Better?

Hm. I'm on a MacBook Pro. Didn't notice faint flickering on the whole browser window. Maybe a graphics card issue on your system? Do you have access to another system to test on?

Cool site! Let me guess - this is only a problem in Chrome, right? (Chrome recently added PointerEvents which have some strange behaviors) Two potential solutions to try: Update to GSAP 1.19.1. Set allowNativeTouchScrolling:false on your Draggable instance. Do either of those help?