Jump to content

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!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by kreativzirkel

  1. Wow, great intel. Jonathan: Would you add these properties by default in the CSS or when needed with GSAP? If the following request is too much to ask, just ignore it. But I absolutely don't understand OSUblakes CodePen. The example Carl provided made sense to me, until the onUpdate part. I just don't see what this is doing. Why ripple needs to be bound? onUpdate: drawRipple.bind(ripple) I'd highly appreciate an explanation. Maybe on a bare bone level. All I need is 2 circles coming from the middle and ending right when the screen is filled. Bonus question: How would you draw everything but the circle in the middle for revealing the new panel? Kind a the same, but inverted / masking– u know René PS: How do you link to a user? Neat feature 8)
  2. That's why I called out for the Elders experience. Agree! Okay, how about this ugly workaround: // how can I get the parameter of the config() so I don't have to hardcode the steps? .set(tl, { time: <TOTAL DURATION / STEPPED EASE STEPS>}) .to(el, 2, { x: 200, ease: SteppedEase.config(5) }
  3. There are always workarounds and thousand ways to Rome. My point remains: it took a lot of digging to find out about the other names seen in the object. We can't expect new users to have the endurance, stamina and motivation to dig so deep into Easings right after they first load up GSAP. I just learned that CustomEases are better in performance? And you just agreed that you can't work without the EaseVisualizer at all. Easings are already hard to grasp by nature and even harder when you are overwhelmed by GSAP alone – This is circumventable and worth making as intuitive as the timeline concept is. That's all I'm saying The code example of OSUblake got me thinking; is it better performance-wise to create an easing with `new RoughEase`, store it in an var and use this instead of rewriting the same RoughEase multiple times? And if the performance is better; how much better are we talking here?
  4. Like I care if you change a thing; the only reason I wrote that post is to dive deep into the easing names and learn them by heart. I'm right and I know it- pff. . TweenMax.to(me, .1337, { seriousMode: 1, ease: Linear }) . I totally agree with you! But I am not a full time animator and honestly kind of struggled with the mental modal of easings at the beginning. Surely there are others that felt the same way. Just like you, I want the web to get richer in meaningful and immersive animations. And I am also truly amazed by what GSAP can do and how easy it is makes it to do it. And that's exactly why I took the time to tackle its (for me) biggest weakness in terms of "dragging non-animators-and-not-so-skilled-developers on the dance floor", convincing them that all these stunning CodePens are only cooked with water. If a clearer naming concept could help some people here, why not change them? That's why! Didn't think about that. Total deal breaker for my request. Absolutely agree. In the codepen-stackoverflow-forum-docs-slack-world this is sheer poison and clearly counterproductive to what I am trying to achieve with this. But I still hold on to my argument that really amazing results or maybe even the believe in being able to handle really complex, big animations, require fully internalizing all of GSAP, easings in general, GSAPs easings, what they do, how they play together, and especially their names. GSAP isn't a closed environment like After Effects (forget Plugins, please! ) – GSAP usually is an addition to a probably already complex webbing of dependencies.. CMS output, CSS methadology concept, maybe crazy React/Ember/VueJS4/AngularSSJ3/Nasa-MissionPluto.moon.js framework, which isn't necessarily second nature to everybody. And when a more intuitive and consistent naming could help even some people to dare to jump into animationLand, or just visiting the visualizer less frequent, I think it's worth a shot at some point in the future. The sole argument "who cares what they are named; just learn what they do and you'll be suprised how quickly you'll remember the names" just isn't enough for me, and doesn't pose a reason for not changing the names. And I think it's not enough for GSAP aswell. The whole reason why I get so invested in this community, typing 1.5 hours on a single post, is GSAPs obvious hunger for perfection; trying to marry convenience, execution performance and lowest possible filesize– this spirit flows through these four letters and infuse and infect people to tween their butts of; I want it to be razor sharp wherever possible, so all my muggle friends stop fearing easing and go find themselves a wand! So you convinced me to drop my weapons (for now >8))– But how about reorder the list in the ease visualizer? (Cmon! Gimme something here–) René PS: GreenSock, I like the overprotective father; but your babygirl has grown and prom will be there faster than you know. Gimme a call when you start 2.0.0 and we make GSAP great again! (too harsh? Who cares.. I'm from Germany) PSS: btw.. I still have not the slightest clue what the word "Tween" means, where it comes from or why it is fit to describe an animation. I was highly confused by it at the beginning– so much actually, that I skipped on GSAP twice. Now I just accepted it as vocabulary and learned what it stands for .. you and your names–
  5. Interesting Jonathan, but why can't I just "force" GSAP to use 3d-matrices right from the start? (I assume there isn't, because you would've already told me) And how do I know what the "right CSS properties" are? In my particular case GSAP decided to go with a 2d matrix
  6. Thanks for the quick answers, like always– I'm experiencing the issues on almost all devices sooner or later. When I restart my MacBook and only have Chrome the overall performance is fluid like Justin crying his river. But even then 1 out of 10 times the end has a little lag. But then on other devices, restarted or not, the performance of the ripple is insanely bad. I didn't see much sense in making a codepen example hoping that this codepen would produce the same lag. I'm sure the scale alone in CodePen would work great across everything. So I thought the living use case would make it easier for you to help me. But you are right; always refreshing and going the page along isn't ideal to debug for you guys. The CodePen ripple example Carl provided looks promising. I'll look into that before making a dedicated demo myself. Until then: Why is scaling (in what way ever) an performance issue when 3d rotations with transformPerspectives, transformOrigins with z values etc. pp. are working like a charm?
  7. Hah! Clickbait– What I really mean: Let's try to need the EaseVisualizer only for the actual visualization rather than as CheatSheet for the naming. https://greensock.com/forums/topic/13388-steppedease-to-step-immediately/ The conversation started elsewhere and deserves it's own thread in my opinion. Before I start: I believe there are good reasons behind why you handle the easing calls the way you do. I haven't looked at the SourceCode and woulndn't understand it, anyway. GSAP is all about making things more convenient and therefore some things even possible for the developer. I'm a GSAP user. And from the user-perspective I can say: The easing naming concept is really confusing, kinda inconsequent and arguably misleading. What I want to do here: Point out where the concept has room for improvement – Plead my case and suggest alternatives, hopefully convincing the Elders to implement the ideas. Let's start. SteppedEase & RoughEase GreenSocks reason to add "Ease" to "RoughEase" is that "Rough" alone doesn't indicate clear enough as an ease. But Power2 also doesn't shout in your face "I'm an easing!", right? Plus: Rough gets called with "ease: " beforehand anyway (correct me if I'm wrong) and therefore is more than clear to me. I mean; I'm writing "ease: " – What else is gonna come next if not an Ease? Even worse: The confusion you try to prevent, ultimately creates even more confusion, because SteppedEase and RoughEase are the only ones with an additional "Ease" in the object name. That leaves the user wondering "wait, was this the one with Ease at the end or not?" Furthermore: another .ease is required upon call, followed by a .config(). .easeOut, .easeIn, .easeInOut make sense to me and are definitely necessary. But since RoughEase only has the option to ".ease" and you need the .config anyway, why not just skip the .ease part and go straight to the .config? You already agree with me, because SteppedEase doesn't require an .ease. (just like CustomEase also doesn't) Power0.easeNone Power0 is consequent inside the "PowerX-world" and should stay supported. But I argue most users associate the desired easing with the word "Linear" which GSAP should add support for like "ease: Linear" (again since Linear doesn't take options, no additional .ease or even .easeNone is needed.) Although I know that linear easing still is an easing, but the users mental model may be that linear easing is no easing at all; so users would like to "disable the easing" > therefore I suggest adding a shortcut like "ease: none" or "ease: false" To consolidate the concept even more I suggest reordering the Easings in the EaseVisualizer, leaving us with the following, reordered, list of possible values for ease: // The Go-To guys Linear || false || none || 0 (+ legacy Power0.easeNone) Power1.easeOut / .easeIn / .easeInOut Power2.easeOut / .easeIn / .easeInOut Power3.easeOut / .easeIn / .easeInOut Power4.easeOut / .easeIn / .easeInOut // Some other "normal" eases Sine.easeOut / .easeIn / .easeInOut Circ.easeOut / .easeIn / .easeInOut Expo.easeOut / .easeIn / .easeInOut // going beyond the declared value Bounce.easeOut / .easeIn / .easeInOut Back.easeOut.config() / .easeIn.config() / .easeInOut.config() Elastic.easeOut.config() / .easeIn.config() / .easeInOut.config() // crazy config only eases Rough.config() (+ legacy) SlowMo.config() || SlowMotion.config() (+ legacy) Stepped.config() (+ legacy) // Custom Custom.create() (+ legacy) _ As much fun as GSAP brings to animating; fiddling with the easing is by far the most annoying thing in the process and I often catch myself thinking "naaah, I'll do the easing later" – That is sad; because what makes an animation truly amazing, believable and immersive, is correct easing. And if you want a perfect result I believe you need explicit easing for every tween. I'm sure you wizards know some magic to give the easing objects multiple names, leaving old code working. Nobody says "kick SteppedEase"! But provide a better alternative and from now on only propagate these new names. Closing argument: Even if the implementation would result in 4 more KB, users will benefit from it worth 200PB! More intuitive naming, writing the code faster, less fear of easing; all this results in more focus on the easing itself and therefore the actual animations, not wondering about what it was named, how to write it down or even worse: leave the editor and search the EaseVisualizer tab. If this wasn't enough to convince you.. Surely you'll listen to Shia– Sincerely, René from Kreativzirkel BONUS For the sake of writing even less as a developer, I throw the question in the room if it is a good idea to make the ease-direction optional with .easeInOut as a default. SUPER BONUS Since I find spend roughly 89% of my day on the ease visualizer, I'd say if you want to go full on "whatever the users might remember": It would be nice to support uncapitalized easing objects aswell, same for .easeout etc. MO-MO-MONSTER BONUS .Out and .out work aswell
  8. 1) Firstly.. .. I have a huge performance issue with getting plain circles to grow from zero to fully cover the page. (I am not expecting it to be super smooth on phones; I use stepped animation there; I'm talking performance issues on my fully blown late 2013 15'' MBPr – latest Chrome on El Capitan) http://beta.richmodis.de (not ready yet by any means!) Press "Ja" to enable snapscrolling. The performance issue mainly occurs in the "text-bubble-transition" seen from Panel 2 > Panel 3. I tried a lot of approaches: 1) svg circles 2) circles done with border-radius and assuring aspect ratio with an pseudo-element padding-top: 100% trick 3) images with an svg circle (embedded base64 style) And tried to animate it with 1) scale from 0 2) width from 0 The beta contains circle approach 3 (img referencing base64 svg) and animating the width. Every single approach has huge lags as soon as the circles come up. And I don't know why. The only reason I can come up with is that the Easing is just too fast for an animation spreading over the whole viewport. But then on the other hand, the bubbles, which are way more complex in shape etc., also cover a great portion of the viewport and also have pretty aggressive easing, are much smoother. Please help me, guys 2) Secondly.. .. I need some clever math to let the circles scale the circles just until the screen is fully covered, so the following animation can start immediately. (negative offsets don't help here, because I have to hide the div where the animation of the circles is happening in, with negative offset of the following animation would already animate when the overlay is still visible.)
  9. JS isn't my biggest strength, so maybe this is trivial– I need this in order to pause every timeline created. Or to reset all of them. Thanks!
  10. Funnily I came across xPercent 30 minutes later myself. Still don't fully understand how x / xPercent plays along with CSS's transform: translate() I updated the CodePen to xPercent. The yellow box is translated right 114% with CSS; When I tween it to xPercent 0, nothing happens. It appears xPercent ignores the current translate value. How can I take this into account? (of course without hardcoding xPercent: -114) http://codepen.io/katerlouis/pen/OpVxRj The core question isn't answered for me yet. I know that I can clear animated values with "clearProps", but I don't know how to animate back to them. It appears that I don't quite understand the _gsTransform concept. Still a bit hazy to me. Appreciate if someone brings light into this. <3
  11. I specify my whining: "Bummer, that this can't be done with a single Timeline object" 8)
  12. I will look into the beta later; But I'd rather think about how to solve the "paradoxon" faced with an immediateStart on reversed animations. I see that reverse() just "drags the playhead backwards". But when I specifically declare this Stepped animation to start immediately, wouldn't I want it to start immediately on a reverse, too? With y,x,y,x reversed it would start with a pause again: x,y,x,y and misses on the last frame. How about a super special case that breaks the general reverse rules this time? Instead of simply dragging the playhead backwards, the easing would need to change to a y,x,y,x? Like the tween wouldnt be a reversed "A > B" but a new Tween with "B > A" with a newly calculated SteppedEase(x, true). In my head this works great for the point A to point B translation; Now the wisdom and experience of the elders is asked to seek an answer to if this would work as a general concept.
  13. Just a wild guess, maybe it has something to do with the left: 0 itself. I am having a similar issue where x: 0 get's ignored after I set a percentage based value. What do the Elders say? http://codepen.io/katerlouis/pen/EWjwpj
  14. I have an element that needs to be positioned with CSS for first paint. (114% to the right) Then I want to animate it to x: 0, which is obviously not the problem. Now I want to animate the element back to where it came from without hard coding the 114% I fear due to keeping size small GSAP doesn't remember the "start values" of elements it animates for the first time, right? I could grab the whole transform property with jQuery, which doesn't help me when I use GSAPs 'x' property. And even if it worked somehow, transform can contain lots more than the x-translation, so it wouldn't be that clean. jQuerys .offset() function returns absolute pixels. But I want it to go back percentage. How would you implement remembering the start value of the x alone, so GSAP can easily animate back to it without hardcoding it?
  15. Here's an example of how .totalDuration() can be used to make a tween last dynamically over the duration of the whole timeline. The position in the timeline where .totalDuration() is called is crucial. But once understood, it is very useful. http://codepen.io/katerlouis/pen/KWwLLj
  16. Yeah, that helps Now I can sleep again ^^ But secretly I hoped it would be possible with a single Timeline. Bummer!
  17. That's what I mean by "immediateStart", GreenSock. The thread opener explained it pretty good (x,y,x,y,x) whereas immediateStart would be (y,x,y,x) With y,x,y,x reversing / yoyoing / looping would never show the starting frame again, that's right. But I've already had 2 cases where I needed an immediateStart on a SteppedEase right at the beginning of an interaction. Only thing I could come up with is pausing the animation upon call, put the playhead at the exact position of the first "y"-step and then go on. The customEase builder is great, but building your own SteppedEase there is a huge pain; correct me if I'm wrong. Plus: In my case I was still figuring out how many steps work best; also not so convenient with custom ease builder. Of course there are always workarounds– but GSAP wouldn't even exist when you guys would have been satisfied with workarounds So I'm just proposing again it would be a sweet thing to have in upcoming releases. <3 Thanks! Kater Louis from Kreativzirkel! PS: What is it with ease names? The concept feels pretty inconsequent– I almost always have to look up the names in the ease visualizer. "Was it ease: Stepped.config() or was it ease: SteppedEase.config()? It's ease: Power2.easeOut– but then again it's ease: RoughEase.ease.config()" Woooh so many combinations where to put "ease" and where not
  18. Cool! Glad I could help– It still bugs me that I can't get a version to work where the first ball doesn't wait for the last to arrive. At least not with a single timeline. I wonder what the Elders would do? Please share your wisdom and free me of this mindbug!
  19. Thank you very much! "but here's the basic idea" – You just made the thing; I wanted to do this myself :'( But hey! I still could add the other timeline methods; Woop Woop! I appreciate the effort and can tell you it works like a charm and is in production 8) Case Closed!
  20. Hey! I'm pretty new myself, but I tried to solve your case. I updated your CodePen to a working solution. Hope it helps http://codepen.io/katerlouis/pen/zZxWyp In my opinion you have no other choice than cloning the ball-elements in some way. I did it with a simple for-loop and jQuerys .clone() function. The magic you are looking for is GSAPs .staggerTo-function, which animates each element in a given selector and offsets their starting time by a specified value. I stored this value in the var `stagger` for more convenient edits. So there is no need to copy the timeline. You see that the first ball now waits for the other balls to arrive before the next step of the timeline starts. If this is not what you were looking for I'm sure there is a way to let each ball move continuously Sidenote: Your codepen bugs in my Safari 9. Anymating between left, top, right and bottom isn't very robust I think. With a bit more calculation I'd say you better go straight with x and y values. Hope this helps
  21. Very interesting. Is there a way to read out the steps asigned in SteppedEase.config(), so that the timeline can calculate dynamically? GreenSocks solution solved something I was looking for! "non-linear-stepped Easing", where the animated value is still transitioned with equal steps (x: 10, x: 20, x: 30...), but the timing of these equal steps are not linear. That creates a totally different perception of acceleration in stop motion. Amazing! I made a CodePen to illustrate what I mean; words words words :8 http://codepen.io/katerlouis/pen/gmbeMZ Using GSAP to make GSAP happening. We're in the matrix PS: I wonder why something like `immediateStart` hasn't been implemented in SteppedEase.config() yet?
  22. Carl has answered the question; But for better understanding for others that came here searching. - // wrong... .add(vorhang, "-=.5"); // only triggers the animation // right! .add(vorhang(), "-=.5"); // returns the tl object so GSAP can calculate timings correctly
  23. Thank you very, very much for this quick reply. You rescued the deadline :D such a subtle visual difference– easy to overlook for not-so-experienced GSAPpers (from grashopper, u know!? ) confusing that the function itself without the brackets also triggers the animation. It's also confusing that there are cases in JS where you can actually pass named functions with brackets as parameters (like in this case) and cases where you need to pass on parameters as another parameter in form of an array. Never the less, back to work. Thanks again!
  24. .totalDuration() on `tl` gives me 2.04, but should give me 4.24. Also `onComplete` is fired after 2.04 (I assume, since it is way too early). The timing calculation seems to ignore the added timeline at the end `vorhang`; but the animation `vorhang` executes. All I see though is the part of the animation that plays in half second negative offset. I definitely need this timeline to take `vorhang` into account. Code: var tl = new TimelineMax({ onComplete: function() { animationOverlay(false); } }); tl .set($layers, { opacity: 1, smoothOrigin: false, transformOrigin: blaseOrigin() }) .staggerFromTo($layers, 2, { scale: 0 }, { scale: function(i) { return 2 + 0.2*i }, ease: easing } , 0.01) .to($layers, tl.totalDuration(), { rotation: function() { return rand(7, 14, true); }, ease: easing }, 0) .add(vorhang, "-=.5") ; return tl; function vorhang() { var tl = new TimelineMax(); tl.fromTo(".vorhang-blau", 2, { scale: 0 }, { scale: .7, ease: Power2.easeOut, clearProps: "all" }, 0) .fromTo(".vorhang-weiss", 2, { scale: 0 }, { scale: 1, ease: Power2.easeOut, clearProps: "all" }, 0.2); return tl; } (sorry, no time for a codepen– )
  25. Little update! this here worked just fine: .to($layers, tl.totalDuration(), { rotation: rand(10,20,true) }, 0) Lets say the timelines duration is 6 seconds. When you edit above line to a position offset of `2`, the duration of this tween would still be 6 seconds. Great! Otherwise it would be Oblivion! Now I am looking for a way to ask for a labels position. How could I do that?