Jump to content
Search Community

RolandSoos last won the day on January 18 2019

RolandSoos had the most liked content!

RolandSoos

Members

  • Posts

    200

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Posts posted by RolandSoos

    Custom animated property does not reset when fromTo used in rare case

    in GSAP

    Posted

    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"
});

     

     

    See the Pen aLwNxG by mm00 (@mm00) on CodePen

     

    Custom animated property does not reset when fromTo used in rare case

    in GSAP

    Posted

    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;
            }
        });
    })();

     

    Chrome rotationY lose perspective when other animation plays

    in GSAP

    Posted

    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.

     

    See the Pen PJmQwV by mm00 (@mm00) on CodePen

     
    Does it make any difference if I apply the transform:perspective to #layer1 and #layer2 instead of the #col-1 and #col-2?

    See the Pen oGWEeM by mm00 (@mm00) on CodePen

     

    Chrome rotationY lose perspective when other animation plays

    in GSAP

    Posted

    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: 

    See the Pen OxmjgE by mm00 (@mm00) on CodePen

     

    And this one produce the bug:

    See the Pen jGmwXK by mm00 (@mm00) on CodePen

     
    I have also opened a ticket at Chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=769644

     

    • Like 1

    Chrome rotationY lose perspective when other animation plays

    in GSAP

    Posted

    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!

     

     

     

     

    Custom animated property does not reset when fromTo used in rare case

    in GSAP

    Posted

    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

    Quote

    _gsScope.CSSPlugin.registerSpecialProp

     

    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?

    Custom animated property does not reset when fromTo used in rare case

    in GSAP

    Posted

    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
  );
}

     

    See the Pen GEXOmj by anon (@anon) on CodePen

    OnUpdate not called when pause change the playhead

    in GSAP

    Posted

    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();

    See the Pen MoeqmP?editors=0010 by anon (@anon) on CodePen

    Usage of CSSPlugin.registerSpecialProp in the right way

    in GSAP

    Posted

    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
        );
    }
    • Like 2

    Usage of CSSPlugin.registerSpecialProp in the right way

    in GSAP

    Posted

    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
    );

    Tutorial to create plugin which animates custom property

    in GSAP

    Posted

    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. :)

    Chrome bug: When I scale an element with background image, the image flickers

    in GSAP

    Posted

    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;
        }
6
7
8
Page 7 of 8  
×
×
  • Create New...