Jump to content
GreenSock

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

kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!

kreativzirkel

ShockinglyGreen
  • Posts

    183
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by kreativzirkel

  1. Please forgive the lack of a pen. Deadline– ... It's gonna work like this! I promise– var tl = new TimelineMax() .to(elem, 1, { y: function() { return $(window).height() / 100 * 50; } }); $(window).on("resize", function() { // refresh the timelines tween }); How can I force tl to execute the tweens function and therefore recalculate the y-value? Thank you for your help!
  2. Thank you for your replies! Unfortunately deadline is kicking so hard, that I can't look into your suggestions in depth right now. Attempt to clarify what I want: My page is extremely long (a case study) at the end of the page ScrollMagic triggers an animation (the scenes duration is 0) This animation contains some fixed elements which cover the whole screen. The thing is, when this animation triggers the user is surprised, and it feels unexpected. We want to send the message that the page is coming to its end by "making it harder to scroll down" – like there is a rubber at the bottom which pulls the content harder and harder. But we don't want the content to snap back to it's original position. The way I see it: All I need is a tween, that increases the y-value while scrolling. But the rate at which this value increases, needs to increase as well. I fiddled around with several easings, but couldn't accomplish the feel of pulling on a rubber. Maybe what I want is comparable in feel with the "pull to refresh" feature many apps use these days. Mostly though, I think it is comparable to the overscroll effect on iOS Safari (without the back-snapping, of course).
  3. I want to replicate an iOS Safari like rubber-band effect, when you overscroll pages or apps. I just can't get the easings / ScrollMagic settings right.. This thing needs some physics!
  4. Thanks for the efforts – Unfortunately this assumption is wrong in my case. The steps are all independent in their duration and that is unchangable. For the rest I have to look into your pen closer in a couple of days; deadline is pushing hard for a first draft. Decision is to go with the behavior of my latest pen.
  5. Of course I thought about reversed() aswell, but see a change in the reversed()-status at the early stages of this implementation. Which confused me a lot! I guess this is the case here. My tl is paused and goTo() creates a new Tween the tl progress in either direction. So this progress-tween is technically going forward and therefore reversed() returns false. That makes sense to me. But while this progress-tween is happening, why doesn't tl know that it is currently being manipulated backwards? Here is my approach to it. I included a reverse variable, that is changed by goTo() depending on the duration of the progress-Tween. When this duration is negative it means we are going backwards. Furthermore I included an if in goTo that cancels the animation, when we goTo() the same element we are on now. Without the cancel the timeScale would be increased, but not decreased, since we only decrease it onPause of the tl. The next time I will try to implement going backwards to the element that was last viewed, rather than just decreasing the tweeningTo var. When there is a more elegant way to the track the direction let me hear it And definitely come forward when you have an idea for a better "lastState" mechanic. This manual .call(update, [x]) just sucks
  6. That coming from one of the Elders! <3 –back to topic– I initially named the thread "how to get playhead direction?" – Is there really no getter for this in GSAP API? I haven't found anything in the DOCS or forums on getting playhead direction. It's hard to imagine being the only one who ever needed that. Is there something I am missing?
  7. Weird, I specifically did fork my original pen, because I was asking you guys to use this exact one. Sorry for the inconvenience. To be on the same page again, this is the latest version of what I got: I now have another requirement: Going back only decreases the `tweeningTo` var, which is a mechanic that is not clear to the user. The way I want it to be, when you change direction: "go back to the last state we passed and don't increase the timeScale any further". Example: initial state is 1, you press the right arrow. Notice when you now press the left arrow halfway through the tween. The timeScale is now 2. Example 2: Lets assume you would be fast enough for this.. you press the right arrow 5 times very quickly, so tweening to 6. Now you press the left arrow right between 2 and 3. Two problems with that: c1) you would go (I assume unexpectedly for most) to 5, which feels weird until you realize whats going on c2) the timeScale to 5 is now even higher than before where you were on your way to 6 – There are more weird scenarios, Example 3: You are on 1 and press right quickly 4 times, going to 5, and press left when you are around step 4. When you didn't keep track of your presses and know exactly that it was 4 times, this feels like the last left-press wasn't recognized. This may seem nitpicky in the case of this pen, but the projects animations are about 4 times as long; so I want to get this super sharp. And all these cases feel way weirder when you change out "keys left and right" with "swipe up and down" on touch devices. "I swiped in the opposite direction, why is it still going there?" My idea now is to keep the "lastState"-mechanic in tact and then check for a direction change on keydown etc. But I hope you have a better solution in mind
  8. Amazing how much I learn each time I engage (90% begging for help ^^) with you guys! Didn't think of using `Math.max()` in `tweenTo()` – much more elegant than using ifs. a1) When `tweenTo()` gets executed multiple times, multiple TweenMax-instances are trying to tween tl's time, right? I mean, TweenMax.to(tl..) from the first call of `tweenTo()` is not finished yet– Why does this work? (Just realized this is a basic behavior of GSAP which I always took for granted – Curious!) a2) How comes the onComplete-callback of the first TweenMax.to(tl..) doesn't reset the timeScale to 0 for the following calls? It's hard to explain.. imagine ur reflexes are good enough to skip right before the timeline reaches the position. The previous TweenMax.to(tl..) still fires it's onComplete and therefore resets timeScale to 0, resulting in a timeScale that stays at 1 on every skip (because it's reset to 0 beforehand) – TweenMax.to(tl, Math.abs(positions[i] - tl.time()), {time:positions[i], ease:Linear.easeNone, onComplete:function() { // Reset timeScale when tween is done timeScale = 0; } }).timeScale(timeScale); This approach is more straight forward. But besides dealing better with the duration of tl's time-tween (although I think maybe .tweenTo() does exactly the same?) and manipulating the timeScale successfully, I don't see why labels make things messy in this case (not defensive behaviour! I just guess I'm missing something here). My `tweenTo`-var is the new `positionIndex` My `states`-var generated from the labels is the new `positions` var We both tween to the next position (I use .`tweenTo()`, you use `TweenMax.to(tl, ..)`) Only major difference I see is how we deal with the timeScale manipulation. You could argue that tweening the timeScale won't feel good to the user, but I had no chance to judge that, because my timeScale manipulation doesn't seem to affect the timeline unless you hammer the button like a maniac. Try my pen again and quickly press right arrow twice. The timeScale of tl tweens, as seen in the output which is generated from the actual timeScale in an onUpdate-callback. But the animations speed definitely isn't 10 times as fast. Although the idea and implementation with lastState is inelegant, I really want to understand and fix this mistake. EDIT: I noticed that the output of the timeScale in your pen comes from the variable. I changed it to `tl.timeScale()` which results a constant 1– I guess this has also to do with my misunderstanding of the situation? EDIT 2: Okay I am getting closer, the major difference is: – you change the timeScale of the TweenMax that is tweening tl's time; – I was manipulating timeScale of the tl, which doesn't effect anything, since .tweenTo() also manually tweens the time? Like tl's timeScale() only changes speed when tl is "played normally"? But.. this doesn't explain to me, why the second skip does make it super fast..
  9. Hey, long time no read I have a master timeline, which the user can traverse in steps. Immediate back and forth is cool, but besides that this pattern doesn't feel very responsive. This becomes very noticeable when you want to go down quickly. That is why I want to give the user the ability to skip animations, but without jumps in the animation. The plan for skipping: 1) tween to the label after the one we are tweening to right now (or the one after, or the one after that..) 2) immediately increase the timeScale and tween it back to 1 (duration of that tween could be influenced by how many skips etc.) I am having a very hard time to solve issue 1) .. I wanted to check which label we have passed last with tl.currentLabel(). Unfortunately that doesn't work when you go backwards. As the docs state "Gets the closest label that is at or before the current time" – In depth: Let's say we are in the middle of the animation from 4 to 5 and want to skip to 6. currentLabel() returns 4 at that point (remember: we are still tweening from 4 to 5). 4 to 6 is more than 1, therefore it's a skip. Hurray!– But when we go that route in reverse, so tweening from 6 to 5 and skip to 4, currentLabel() returns 5... 5 to 4 is 1, therefore not recognized as a skip, although it is one.. We need it to return 6! So I need more of a "Last label we crossed" alá `tl.getLastLabel()` My workaround is to update a `lastState` variable manually like so var lastState = 1; var updateLast = function(x) { lastState = x; } var tl = new TimelineMax() // initial state .call(updateLast, [1]) .add("state1") // animating to state 2 .to( ... ) .call(updateLast, [2]) .add("state2") // animating to state 3 .to( ... ) .call(updateLast, [3]) .add("state3") // animating to state 4 .to( ... ) .call(updateLast, [2]) // I am not editing out this mistake, as it illustrates perfectly why this solution is pain! .add("state4") This is by far not the most elegant way to do this; My idea for solving issue 2) is also really buggy and doesn't have the intended effect. I hope things aren't explained to confusingly and fellow Magicians come forward and help me out <3 René
  10. 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!
  11. 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?
  12. 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
  13. 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"], .. ;
  14. 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.
  15. 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.
  16. 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
  17. 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(target.style, prop, getComputedStyle(target)[prop], value, prop); // I give up– } return true; } }); }); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); }
  18. 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?
  19. 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)
  20. 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!
  21. 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! https://www.dropbox.com/s/06st1azrxl6fyxi/GSAP clipPath.mov?dl=0 // 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 = this.target.x * 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(this.target.elem, { 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)
  22. 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?
  23. 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.
  24. 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(this.target, { backgroudnColor: this.target.customColor } } }) 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(this.target, { backgroudnColor: this.target.customColor } } })
  25. Back in the days, wise master Blake showed me a great trick, when I was fighting with a gradient tween (or was it clip-path?) He just made an object containing a value to be tweened + a function that was called onUpdate of said tween. This function then worked with the value that is currently being tweened. Brilliant! This was when the Matrix flickered right before my eye– for a tiny moment; long enough to hammer the last nail into CSS and jQuery animations coffin. It looked somewhat like this: var generic = { elem: ".box", x: 0, update: function() { var percent = this.x * 100; var value = "polygon(0% 0%, 100% 0%, 100% "+ percent +"%, 0% " + percent + "%)" TweenMax.set(this.elem, { webkitClipPath: value }) } } // used like this TweenMax.to(generic, 1, { x: 1, onUpdate: generic.update.bind(generic) }) Great way. Lots of control; easy to read. Accessible. But for me, very personally, in almost all cases this felt like an "overkill"– I never needed that object again, or even worse, needed multiple "instances" of object. I always had to scroll up to fiddle with details, play around to find what I need. All this binding, writing the object name so often. And then I want to change the name, because .. reasons– I forget– and. Ah! I like to stay inside the timeline, as long as possible. Most of you seem to disagree with me on this one, when I bring similar issues to you, where I don't want to leave the timeline. Lastly the Matrix reveals itself way more often to me and starts to lose it's blur. And now it hit me. Creating an object on the fly to tween is no biggie, but getting access to the tweened value for the onUpdate function? As I become more and more comfortable with logging and sniffing what the tweens have to offer, I found that `this.target` inside "onUpdate" gives me exactly what I needed. // somewhere in a timeline or as a standalone Tween .to({ x: 0, elem: ".box" }, 1, { x: 1, onUpdate: function() { // this.target is the key to the properties! var percent = this.target.x * 100; var value = "polygon(0% 0%, 100% 0%, 100% "+ percent +"%, 0% " + percent + "%)"; TweenMax.set(this.target.elem, { webkitClipPath: value }) } }) // or .fromTo({}, 1, { x: 0, elem: ".box" }, { x: 1, onUpdate: function() { ... // or // tween the actual element in order to access function based values / index etc., or staggering? // and add your own custom properties .fromTo(".box", 1, { customX: 0 }, { customX: function(index, elem) { if (index % 2 == 0) return 1; else return -1; }, onUpdate: ... // or // just add multiple colors for a gradient change .fromTo(".box", 1, { customColor1: "green", customColor2: "green" }, { customColor1: "yellow", customColor2: "blue", onUpdate: ... I wanted to share this with you guys, just in case out there are people with the same fear and anxiety to leave the timeline 8) Louis out. *macdrop*– waitwhat?! –****!
×