kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!

Community Reputation

34 Newbie

About kreativzirkel

  • Rank
    GSAP broke my jaw

Contact Methods

Profile Information

  • Gender
    Not Telling
  • Location

Recent Profile Visitors

725 profile views
  1. Multiple eventCallbacks?

    Yeah, obvious "workaround" is Carls solution. Disclaimer, though: I knew that myself, but as always were fishing for a "more convenient" solution. I like anonymous functions and many years of jQuery got me used to multiple event listeners. And again, as always, I learned why it is like it is and accept it But I don't see how Jakes first code snippet would accomplish what I need– In case this really solves my problem and I just don't understand it, please explain in more detail. But maybe there's just a misunderstanding; I don't want to have multiple functions called in one event; i want the same (preferably anonymous-) function called in 2 different events. Thanks!
  2. Why no "onReverseStart"?

    Bummer. Spammed again– I searched specifically for "onReverseStart" – I need some googling lessons. To topic: The thing is: I am not yoyoing– I tween the progress of another tween (sunToMoon) via fromTo. The function calculates wether I need to go from 1 to 0 or from 0 to 1; I'd like to keep it that the sunToMoon-tween takes care of the callbacks itself and not the tween that tweens the progress, because sunToMoon gets altered from different places. Having to repeat the callbacks where the alteration takes place– nah! I don't fully comprehend your explanation on why it's bad for performance and that there is a conecptual naming conflict, but I trust you guys in that and accept it. Too bad though; "where is a complete, there must be a start", my gut is telling! PS: you talk about timelines there; would onReverseStart be a problem for single tweens, aswell?
  3. Why no "onReverseStart"?

    We have onReverseComplete, but not start. I could use it right now 1) Is there a reason to exclude it, that I not see? 2) How would you solve the need of onReverseStart? onRepeat isn't doing it for me– I'm not repeating. Thanks! katerlouis
  4. Multiple eventCallbacks?

    jQuery-style I try to apply 2 callbacks to the same function. I can't figure out the correct syntax and can't find anything about multiple callbacks in the docs or here in the forums. Is it not possible? var blub = new TimelineMax() .to(".stuff", 1, { x: 200 }) .from(.. .staggerTo(.. .add(... // Whyyy noh possiboool? .eventCallback("onComplete onReverseComplete", .. .eventCallback("onComplete, onReverseComplete", .. .eventCallback(["onComplete","onReverseComplete"], .. ;
  5. clipPath Android Chrome Flicker-Bug

    SOLVED! Deperately I tried to go in the exact opposite direction. I stripped everything naked and force3D: false the transformed children. Bam. Profit. // ClipMask on the parent //.. // force children to transform with // translate() or matrix() // NOT! translate3d() or matrix3d() Without force3D: false the children transform with matrix3d– Why they do this is a mystery to me. I assume that is the reason I couldn't recreate the issue on CodePen. The pen didn't use 3d()-methods. Thank you very much Jonathan. Your encouragement to look into the actual transforming-method made me find what I needed. Woop Woop! PS: I don't mind the restriction of strict 2d in this case; but I wonder why Chrome doesn't like 3d in combination with a clipPath? Is this bug worth reporting? PSS: Sorry for the frequent posts; better to stay transparent and communicate for possible readers than.
  6. clipPath Android Chrome Flicker-Bug

    I now made sure that the (presumably causing) x-y-tweens all transform with matrix3d(). The raotationX: 0.01 trick made it happen. The clipMask still gets is cut off. When I only transform one item inside the clipMask'd container, the clipMask is "repaired" by the time the transform tween is finished. When I transform more than one item, the clipMask stays cut off, until I clear the prop entirely It seems the cut-off is repaired when all the transformed children have a "clean matrix"? .link-leiste in my case has a "somewhat dirty matrix" at the end of the tween. EDIT: The "dirtiness" comes from the rotationX: 0.01 trick. // .link-leiste inline-styles copied from Chrome dev tools "elements" backface-visibility: hidden; transform-style: preserve-3d; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0.000174533, 0, 0, -0.000174533, 1, 0, 0, 0, 0, 1); Here's the tween producing this matrix: .fromTo(".link-leiste", .4, { y: "+=10", opacity: 0, transformStyle: "preserve-3d", backfaceVisibility:"hidden", rotationX: 0.01 }, { y: 0, opacity: 1 }, "-=.3") This minor offset doesn't bother me visually at all. It appears to be layouted as expected. But even if this "dirty matrix" would be resolved. It still cuts the clipMask for the time of its tweening. EDIT: So I am trying to force the parent (.menu) to just don't freak out when it's children transform Putting all the tricks on the .menu doesn't work .. rotationX: 1.01, transform: translateZ(0), all result in a static transform on the .menu throughout the animation. But this doesn't change the cutOff throughout the childrens transform.
  7. clipPath Android Chrome Flicker-Bug

    Thanks for the detailed explanation; I still wonder if these solutions need to be applied on the parent (the .menu being clip-path'd) or the items that are moved x / y wise (which is what causes the flicker- or atleast the flicker is gone when I don't tween x and y of the children) backface-visibility seems to be for the transformed items, but what about transform-style and the minimal-rotation trick? Carelessly trial and error with all combinations didn't work so far
  8. My "generic object onUpdate" approach

    That's why I only use it as a reveal mechanism for the mobile menu. If clipPath is not supported, the menu background flashes in and the items tween in from the left. A buggy clipPath is way more troubling that an instant background– I hope you don't expect me to understand this architecture. The syntax alone looks like dark magic to me! I will play around with this by time– right now I need to concentrate on the flicker-bug. Thank you (Some wanna-be funny comments to illustrate my confusion and sheer jealousy of them'mad-skillz) var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; // Jeez (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { // Who pushes who? "use strict"; var cs = getComputedStyle(document.documentElement), prop = cs.webkitClipPath ? "webkitClipPath" : cs.clipPath ? "clipPath" : null; // Hey! I got that!! _gsScope._gsDefine.plugin({ // w00t? propName: "clipPath", API: 2, version: "1.0.0", overwriteProps: ["clipPath"], init: function(target, value, tween, index) { if (prop) { this._addTween(, prop, getComputedStyle(target)[prop], value, prop); // I give up– } return true; } }); }); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); }
  9. My "generic object onUpdate" approach

    My question aimed more for the property-name itself. "clipPath" doesn't seem to work in Safari (9) – "webkitClipPath" does; I am confused now on what to do. Would it be wise to just tween both properties? If yes, what's the best way to do this? Is there some sort of (clipPath && webkitClipPath): "polygon( ... )" magic I don't know about? How would you tween both?
  10. My "generic object onUpdate" approach

    So all of this was for nothing? :D:D Well – I learned a ton 8) When can we expect this change to be in a stable release? Again: clipPath only doesn't work in Safari 9; Blake said GSAP will add a prefix, so why won't it work? I am afraid of doing it wrong by using "webkitClipPath" – and what if I wanted to use both, "webkitClipPath" and "clipPath", and hell, even "WebkitClipPath"? How would you do that? I'd appreciate some more insight on the prefix thing from the Elders. PS: If you could now also hotfix the Chrome bug I'm experiencing *shakingbrandy* 8)
  11. clipPath Android Chrome Flicker-Bug

    I can't have animating the height. Everything inside is depending on the full height of the div. Flexbox children fighting for their space I tried an approach where I fake the clipPath idea; with a wrapper set overflow to hidden, and then animate it's height, while the inner container position to absolute holds the children .. but that lead to other bugs / inconveniences I can't have. I will try out Jonathans idea– And you are right, Jonathan, the bug also appears in Chrome on Mac. Where exactly is backface-visibility to be placed? On the parent? The tweening child? If I can't solve this, I will upload to a stage and show you guys. Thanks so far!
  12. clipPath Android Chrome Flicker-Bug

    Unfortunately I couldn't recreate the bug in a CodePen. So I made a screencast. The bug occurs on Chrome Android. iOS Safari is okay– The screencast is from a browserstack emulation with the exact same issue. The issue occurs when I start tweening x or y WHILE CLIP-PATH is still tweening. As soon as I get rid of x and y tweens, the flicker is gone! // Rough html layout .menu nav a a .reservierungs-button .link-leiste var master = new TimelineMax() .set(".menu", { height: "100%" }) .set(slides, { display: "none" }) .set(slides[slide], { clearProps: "display" }) // CilpPath .add("beforeClipPath") .to({ x: 0, elem: ".menu" }, .6, { x: 1, ease: Power3.easeOut, onUpdate: function() { var percent = * 100; var clipPathString = (slide == 0) ? "polygon(0% 0%, 100% 0%, 100% "+ percent +"%, 0% "+percent+"%)" // from top to bottom : "polygon(0% 100%, 100% 100%, 100% "+ (100 - percent) +"%, 0% "+ (100 - percent) +"%)" // bottom to top ; TweenMax.set(, { webkitClipPath: clipPathString }) } }) .add("afterClipPath") .set(".menu", { clearProps: "webkitClipPath" }) // resolves the issue as soon as the clipPath is over, but not meanwhile. // the menu items .staggerFrom(".menu nav a", .8, { x:"-=200", opacity: 0, ease: Power4.easeOut }, .05, "-=.5") // the rest .fromTo(".reservierungs-button", .5, { x: "-=30", opacity: 0 }, { x: 0, opacity: 1 }, "-=.8") .fromTo(".link-leiste", .4, { y: "+=10", opacity: 0 }, { y: 0, opacity: 1 }, "-=.5") // topbar containing burger, icon fills and such .add(topBar(), (slide == 0) ? "beforeClipPath" : "afterClipPath-=.3") ; In the CodePen (which doesn't recreate the main-issue, neither on phone nor desktop), I stumbled upon another odd behaviour when tweening x or y while clip-path is still tweening. This can be found in Chrome on desktop aswell. Maybe theres correlation? I wildly threw around with force3D and backface-visibility– But nothing changed. I hope even under these hindered circumstances you can give some tips why this might be happening. (hopefully not just a Chrome-bug that can't be circumvented)
  13. My "generic object onUpdate" approach

    You know how to shut me up– A lot to swallow and digest– I guess you'll see a post here with lots of question marks in near future. 8) Thank you! [EDIT] Question 1a): I was wondering why the clipPath pen had no clipPaths. I am on Safari; in Chrome it works– What is the best way to make it work in all browsers? I used "webkitClipPath" in my examples and it works in both Safari and Chrome– Is GSAP capable of prefixing? Maybe when the property is provided in it's CSS form as a string "clip-path"? (thats what I assume autoCSS does–) Question 1b): Do I get right, that you tween the "polygon"-string as a whole? How comes GSAP can do that? Question 1c): When GSAP can do that, tweening a clipPath wouldn't require the onUpdate approach and/or customProperty approach at all, right?
  14. My "generic object onUpdate" approach

    I use Sublime Text 3 on Mac and am very happy with it. The mini-editor looks cool. I am sure there a similar solution available for ST3, – the big community has so many packages / plugins to offer! I tried quite some editors until I got stuck with ST3; love remains until today. But even with a feature like this my opinion remains. Where are the benefits with a separately stored object, you only need once. While doing all this I fell in love with the idea to tween the actual object, like you would do regularly, but add your own custom properties. But somehow this isn't working :'( – even if it worked, would function based values work for this custom property? I often find myself applying logic to the values when there's more than one element tweened in one tween (which is the case 75%+ of the time?) – and staggering should also be possible, right? W000h000.
  15. My "generic object onUpdate" approach

    Got a question– My idea of tweening the actual object and add my own custom properties in order to maintain "staggerability" and function-based values doesn't seem to work. Why is that? // even without function based value it is not working .fromTo(".box", 1, { customColor: "green" }, { customColor: "red", onUpdate: function() { TweenMax.set(, { backgroudnColor: } } }) And one more question: What is "this" refering to as a value inside the properties' object? It should be the object containing the properties itself, right? // I don't want to hardcode the "from" color // but it needs to be set, because it is a custom value .fromTo({}, 1, { elem: ".box", customColor: $(this.elem).css("background-color") }, { customColor: "green" }, onUpdate: function() { TweenMax.set(, { backgroudnColor: } } })