RolandSoos

Sure. In this case when the animation ends, it removes the transform property from the element. I would like to do the same with my custom property as I had rendering issues in Chrome when filter:blur(0px) were preset and filter:none; or the removed css property solved the issue. TweenLite.fromTo(".red", 3, { n2blur: 5, x: 100 }, { n2blur: 0, x: 0, clearProps: "transform,n2blur,filter" });

Hey Jack, I would like to use the clearProps parameter to clear n2blur my custom "property". I added the following code to your implementation, which seems to work when clearProps:"n2blur" present, but maybe you have an official suggestion to remove the property when not needed. if (start == "blur(0px)" && start == end) { end = "none"; } Modified plugin: (function () { var _div = document.createElement("div"), _filterProp = /Edge\/\d./i.test(navigator.userAgent) ? false : (_div.style.webkitFilter !== undefined) ? "webkitFilter" : (_div.style.filter !== undefined) ? "filter" : false; _gsScope._gsDefine.plugin({ propName: "n2blur", API: 2, version: "1.0.0", overwriteProps: ["n2blur"], init: function (target, value, tween, index) { if (!_filterProp) { //browser doesn't support filters return true; } if (typeof(value) === "function") { //accommodate function-based values value = value(index, target); } var start = window.getComputedStyle(target)[_filterProp], end = "blur(" + value + "px)"; if (start === "none") { start = "blur(0px)"; } if (start == "blur(0px)" && start == end) { end = "none"; } this._addTween(target.style, _filterProp, start, end, "n2blur"); return true; } }); })();

In your opinion and past experience, can the perspective-ception break only 3d transforms (Z, rotation X/Y, ) or can it break also x/y or scale, opacity and such?

I haven't mentioned, but the user can animate columns, rows and they can add more rows and columns into columns. So they can end up in the same perspective-hell Also the #slide can contain absolute positioned elements which are also animatable

Yes, that is the hardest part to track browser changes to see what broken... We are working on an editor where the user can edit their own animations, so I'm unable to prepare for every case like this one. I will see what happen if I add perspective to each part of the animated element and I'm hope it will work as expected. Thank you!

Thanks Jonathan! So is it not possible to render an element in a bigger space (#slide) when the transformed element is not its direct child? Also is it safe to have perspective on a grand-grand-...parent element and also on the parent element in the same branch? For example I have perspective on the #slide, which gives the perspective to the #layer 3 and I also have perspective on the two col in which #layer1 and #layer2 rendered. Does it make any difference if I apply the transform:perspective to #layer1 and #layer2 instead of the #col-1 and #col-2?

The difference between the two pen, is that the one which has the bug adds a dummy x animation to the left image. Also if you remove the transform CSS from the #col-1 selector, both of the example works as expected. The following works fine: And this one produce the bug: I have also opened a ticket at Chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=769644

It seems like this issue is not related with the version of Chrome. I have tried it every version since Chrome 48 and all of them produce the same bug. I'm still working on the Codepen.

Currently I do not have a codepen which shows the issue as it happens only in our application and I wasn't able to narrow it down. I have created a video which illustrates the issue. There are 3 elements which animates. Blue bars on the bottom timeline shows their animation delay and duration. Heading layer: It is above the rounded picture. Fades in after 1950ms and plays for 1500ms Author picture: it is the left picture. Starts to fade in at start and plays for 1500ms. Picture with baloons: it has rotationY which turns it from 90° to 0°. What you should see: rotationY should have perspective all the time. This perspective works fine between the two other animation, but when any of them plays, the perspective not applied. I'm trying to create a Codepen to illustrate it on a live example. Maybe it is a Chrome bug, I'm not sure. If you have any suggestion, please share and I will try. Thanks!

I'm really grateful for the plugin you made for me! It works like charm I didn't know that it is so easy to make like this in a GSAP plugin. It's great to see that GSAP is so extendable! Ps.: Maybe you should hide the _gsScope.CSSPlugin.registerSpecialProp inside the internals too

It took a while to learn to use your internal functions, but I think I found a workaround for this case which seems to work. My code is a little messy, but I wanted to update you about my progress.

Jonathan: Thanks, I understand your solution and I think it's great that you support filter property now. But our software already has its own structure for the data of animations. I'm unable to change the n2blur name and the value to something different. Maybe I can do the transformation of our objects when needed, but I feel it is just a hack and the registerSpecialProp should work consistent with the in-built properties. Carl: Also I'm not able to change the default values from 0 to 0.000001 as it would be the same like transforming the property into a new name. What I can do is to make changes to the function which registered with I feel that it is somewhere in GSAP as the reset works fine for the inbuilt properties, but does not work for properties which handled with the _gsScope.CSSPlugin.registerSpecialProp. Do you feel the same?

Hi, maybe you remember, I have created a custom animated property for the filter blur property. I think it has a bug, but I'm not sure, I think you can help me out. I know that my timeline contains non optimized code, but it is the simplier version of the real code and it is made to be able to show the bug. If you reduce it to one timeline it will work fine, I know First timeline animates the box from opacity 0 to 1. x and n2blur is there to make sure the properties stays at 0. After it completes, it starts the second timeline from 0s. Second timeline animates the same box and moves it to x:200 and blur:5. If you click on red box, the first timeline plays from the start. After the page load the timeline1 starts ......... then we reach the end of the second timeline too. At this point, everything is fine. Then click on the red box, It jumps back to opacity:0 and x:0, which is great, but it does NOT jump to blur:0 and this is what my problem is. I would like to behave like the in-built x property behaves and resets itself with the from value which applied in the first timeline. window.n2FilterProperty = false; var element = document.createElement("div"); if (/Edge\/\d./i.test(navigator.userAgent)) { //Edge has buggy filter implementation } else if (element.style.webkitFilter !== undefined) { window.n2FilterProperty = "webkitFilter"; } else if (element.style.filter !== undefined) { window.n2FilterProperty = "filter"; } if (window.n2FilterProperty) { _gsScope.CSSPlugin.registerSpecialProp( "n2blur", function(target, value, tween) { var start = 0, match; if ( (match = target.style[window.n2FilterProperty].match(/blur\((.+)?px\)/)) ) { start = parseFloat(match[1]); } if (start == value) { return function() {}; } var diff = value - start; return function(ratio) { target.style[window.n2FilterProperty] = "blur(" + (start + diff * ratio) + "px)"; }; }, 0 ); }

Thank you Carl and sorry that I missed it in the doc

Open my codepen and click anywhere in the frame. It sets the progress to 0.99999 which trigger onUpdate fine, then it pauses at 0 and in this case the onUpdate not called, but I think it should as the background color changed back to red. If pause changes CSS properties then it should give an onUpdate callback too, don't you think? So with this, I'm unable to get my custom property when the playhead sets with pause. This works fine: tl.progress(0.9999).progress(0).pause();

Okay, I have added the conditions to handle prefixed and unprefixed browsers. It seemed for me that that -moz -ms and -o prefixes are not used in any production release of the browsers... var blurProperty = false, element = document.createElement('div'); if (element.style.webkitFilter !== undefined) { blurProperty = 'webkitFilter'; } else if (element.style.filter !== undefined) { blurProperty = 'filter'; } if (blurProperty) { CSSPlugin.registerSpecialProp( "n2blur", function (target, value, tween) { var start = 0, match; if ((match = target.style[blurProperty].match(/blur\((.+)?px\)/))) { start = parseFloat(match[1]); } if (start == value) { return function () { }; } var diff = value - start; return function (ratio) { target.style[blurProperty] = "blur(" + (start + diff * ratio) + "px)"; }; }, 0 ); }

Version #2 Do I need to add this check if the start and end value are the same to prevent not necessary property change? if(start == value){ return function(){ }; } CSSPlugin.registerSpecialProp( "n2blur", function (target, value, tween) { var start = 0, match; if ((match = target.style.webkitFilter.match(/blur\((.+)?px\)/))) { start = parseFloat(match[1]); } if(start == value){ return function(){ }; } var diff = value - start; return function (ratio) { target.style.webkitFilter = "blur(" + (start + diff * ratio) + "px)"; }; }, 0 );

I would like to implement my custom animatable property to be able to easily animate the filter: blur(10px) CSS property. Could you take a look at my example to confirm that I use CSSPlugin.registerSpecialProp as it intended? http://codepen.io/anon/pen/ybVQEr Currently implemented for webkit only

I think I found what I need, so this topic can be deleted

Hi, I know I can animate custom things on the onUpdate callback, so I wouldn't go that way with my case. What I would like to do is to create a plugin such the CSSPlugin just lot simplier which would be able to animate my custom things. As a simple example, I would like to create a plugin to animate the CSS opacity value (without browser compatibility checks and IE filter etc...) Do you have such plugin tutorial or plugin skeleton how I should start? I think you have some kind of plugin interface, but it would be lot easier if you have some kind of easy to understand example plugin.

Well, my local solution was a fallback to CSS transitions as this much feature was enough for that animation. .n2noselftransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } function CSSTransitionFromTo($el, duration, from, to) { this.startTime = -1; this.currentProgress = 0; this.$el = $el; this.duration = duration; this.from = from; this.from.immediateRender = true; this.to = to; this.$el.css('transition', 'all ' + this.duration + 's'); } CSSTransitionFromTo.prototype.pause = function (at) { if (at == 0) { this.$el.addClass('n2noselftransition'); TweenLite.set(this.$el, this.from); } } CSSTransitionFromTo.prototype.play = function () { this.$el.removeClass('n2noselftransition'); this.startTime = $.now(); TweenLite.set(this.$el, this.to); } CSSTransitionFromTo.prototype.progress = function (at) { return ($.now() - this.startTime) / this.duration / 1000; }

I have opened a ticket in the Chromium tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=713675

I just switched from img tags to background image to save time not calculating cover and contain for imgs

And what is your personal suggestion based on your experience? Can we count on chromium developers that this will be fixed in short time or I should stick with css transition for this special animation? Ps.: it is strange that sometimes works fine and sometimes not as you have to restart your browser to see the flicker....

Thanks! I tried your example on Win7 + Win10 + OSX with Chrome 57 and Chrome 58. Same result with the flickering Are you sure that it's smooth on your end? Even tried with added position relative to the div...