Jump to content

Robert Wildling

  • Posts

  • Joined

  • Last visited

Everything posted by Robert Wildling

  1. No, Harvey is not failing at all! It works perfectly fine and I really do like the api it provides! But unfortunately the developer and also the company he works/ed(?) for, do not respond. Honestly, I have no clue, what could be improved with Harvey, so an update might just simply not be necessary. On the other hand, there is so much going on in the JS universe, that I kind of got accustomed that libraries receive changes on a more or less regular basis... Anyway, I was just curious, which solutions other people use and therefore shouted out the question. Thanks a lot [no idea how to cite your name!] for the hint about Paul's update and for the examples!
  2. For some totally unexplainable reason it just did not at all come to my mind that I actually could search for the topic! **headshake** Ashamed, but still very grateful I'll hunt down the links you share, @PointC! Thanks a lot!
  3. Hi, dear Greensockers! My question is actually not totally GSAP-related, but since here are the best JS coders, I dare to ask anyway. I hope this is ok with you! I repeatedly come into the situation, where breakpoints require different parameter settings for a tween. My current solution is a settings object with some parameters for each breakpoint and `Harvey`, https://github.com/harvesthq/harvey, a - IMO - wonderful JS lib that takes care about breakpoints, but which unfortunately not supported anymore. That's why I wanted to ask you, how you approach the breakpoint problem, if you write your own script or if you can recommend another library. Thank you!
  4. @GreenSock You just gotta have to LOVE Greensock! Thanks soooo much! I really wasn't expecting that! Hugs to the "guilty" person! May I comment on the collapse topic? I do not copy from the list, but the behaviour @OSUblake describes is familiar from other sites and admittedly not one that is welcome, if it is a source that needs to be used often. On the other hand, I am very much in the habit of using the browser search. And in the case of the collapsed vars, the search results are hidden, which is ... hmmm... well, not so useful, to be honest. Layout-wise, it also seems to be a bit unbalanced, when the left column with the list of all the methods is so very long that even the expanded list of vars won't surpass it in height. I suppose that documentation is just not the right place for having too much fancy animation stuff going on. As for myself, I like it to "just be there".
  5. @OSUblake Actually I do not! Thanks for bringing that to my attention!!!
  6. @GreenSock I wonder if there aren't more users who'd prefer an alphabetically ordered attribute list. Is there any chance to bring this topic to more attention? Or run a "public test" with a alphabetically ordered unhidden vars parameter documentation version?
  7. @OSUblake I do keep the callstack in mind, it just becomes quite obfuscated in certain situations once webpack 4 in dev mode did its job. I guess this would also be a scenario where loading from CDN and therefore separating between own and vendor libraries helps. Need to test that...
  8. You???? Missing knowledge????????????? Ha!!!! What do I miss then? I do understand, what is going on here. I just had hopes you had the golden key to unlock the universe... Thanks again for helping me understand!
  9. Thank you for you speed-light response, @GreenSock! i didn't even have time to brew a new cup of coffee... I guess you are the personified GSAP-principle: INCREDIBLY FAST! Ad 1: So there is a popularity counter somewhere? well, my personal favorite would still be alphabetically... Ad 2.1: I know this is wrong/weird/wanna-be-extra-smart/{fillInAsApproriate} thinking on my side. I had sth in mind that would "stringify" the reference input in case an error was thrown. So theirElementReference would indeed be that in the error console: Could not tween "theirElementReference"... maybe additionally passing along the reference as a string... well, that would be overhead. (That topic is definitely beyond my JS skills! So please forgive, if I do not make any sense and just forget about it...) Ad 2.3: I was actually thinking of the variable definition as in: `let myAnim = new Timelinemax(...)`, so "myAnim" could be thrown. But I wouldn't know what to do in anonymous cases, where only `TweenMax.to(...)` is used. Ad 2.4: "keep is small": I am totally with you!
  10. Hi, dear GSAP community, two general questions bug me since quite some time and today I dare to ask (even though they are probably totally stupid): 1. When opening the docs for, e.g., https://greensock.com/docs/TimelineMax/TimelineMax() to inspect the vars parameters, the params are actually not ordered alphabetically. And even though this is totally unimportant, I was wondering, if there is a reason for that. (In the tree on the left side, properties and methods are ordered alphabetically...) 2. Sometimes a dom element for a tween is not found, which throws an error message in the console saying sth like this: `Cannot tween a null target.` I was wondering, if there is a chance to make GSAP be a bit more specific about which tween target it couldn't find, since the parameter should be given as string, anyway; or at least the tween name; or from where it was called?). Or am I missing something? (In my case, the error is thrown, when I forget to implement a `if (document.querySelector('.someClass')) { ... }`. At that time, the code already run through webpack and is implemented in some CMS. I know, I should do code splitting and deliver code only there, where it is needed. But that's a different story...) I did search the forums, but was not able to find proper resources. I hope you can help me understand! Thanks!
  11. @Rodrigo Awesome!!! That was it!!! Works perfectly fine! Thanks a million times! It is amazing each and every time, how well thought out and stable GSAP is! A never-ending jaw-dropper!
  12. God evening, all! I have a webpack 4 setup, where the ScrollPlugin loads in development mode, but not in production mode. The reason is that the plugin is not loaded in production mode, but is IS loaded in development mode. My setup looks like this ```js import { TweenMax } from 'gsap' import ScrollToPlugin from '../../node_modules/gsap/src/minified/plugins/ScrollToPlugin.min.js'; import 'animation.gsap' import 'debug.addIndicators' ``` (This solution is also from somewhere in the forums here.) Unfortunately, webpack's tree shaking remove the ScrollToPlugin, probably also, because it is never defined anywhere, which makes webpack (and also VSCode) think that it is never used – that at least is my assumption! Please feel free to correct me on that! However, if I use `require([path/to/scrolltoplugin])` things work fine in production mode, too. *Magic* This seems inconcise... irregular... wrong... incomplete... I am surely doing something wrong, misunderstanding a concept here... Could you set my head straight, please? Do you guys have a different solution to that problem? Or: @GreenSock Do you think this needs an implementation change on the ScrollToPlugin side?
  13. @OSUblake Thank you for your clear answer!! And the slide!! To my knowledge, this is the first time that I ask about shadowDom... haven't done anything with it before. The "best practice" argument comes from many sources that say that an externally loaded svg can be cached. Which is a reasonable argument. And since I indeed use some of my svgs many, many times (and it is not just a straight line, but wild stuff), I went down that road... Well, I will look for a different approach now... PS: There are situations in this text editor, where the cursor keys won 't work. Any idea, what could cause that?
  14. Hi, fellow GSAPers! In my effort to adopt best SVG practices, I now switched to the "use" method of implementing SVGs. Unfortunately, it seems that I cannot access the implemented SVG to manipulate its path with GSAP. And google only spits out tutorials about how to add a shadowDom. My question: is there any way to access the shadowDom of <use> (which are of `mode: closed` according to the devConsole), get a path and animate it with GSAP? Things like this return null: `let pathConnectRoot = document.querySelector('.platine__info--connect use') // null` `let pathConnectRoot = document.querySelector('.platine__info--connect use').shadowRoot.querySelector('path') // error` (..which is given as an example here: `https://www.oreilly.com/library/view/modern-javascript/9781491971420/ch05.html`) Thank you! PS: I think this question does not require a codepen... right?
  15. @OSUblake Thanks a billion times! I actually knew that - no idea, why I did it nevertheless... stupid me! (Pen is updated with comments.)
  16. The above pen is a reduced one. The complete logo with additional animations is here: https://codepen.io/rowild/pen/ZqRdzw It shows that other timelines animate quite all right, but the parenthesis is a troublemaker...
  17. Hi to all! I would need your advise on the given pen, which does not animate. The idea of this little exercise is to learn SVG animation and also to follow along the coding practices outlined in the famous "Star Wars" pen presented in this article: https://css-tricks.com/writing-smarter-animation-code/ I am having trouble to understand, why my code is not working: This function function def_animateParenthesisRight() { console.log("animate parens right") let tl = new TimelineMax() tl.to(pt, .35, { scaleX: 1 }, 0) tl.to(pm, .35, { y: 0, scaleX: 1, scaleY: 1 }, 0) tl.to(pb, .35, { y: 0, scaleX: 1 }, 0) return tl; } encapsulates a timeline. It is then assigned to a masterTimeline: let masterTL = new TimelineMax({ paused: true }) masterTL.add(def_animateParenthesisRight(), 0) And 2 buttons call the `masterTL.play()` or `masterTL.reverse()` function, which should shrink, respectively enlarge the right parenthesis. But nothing happens... Why? Thanks for your feedback!
  18. @elegantseagulls Nice!!! Thanks for sharing!
  19. @Carl Thank you for clearing that up for me and for pointing me to that great article! Much appreciated!
  20. Hi, GSAP magicians, I am having trouble with animating a path of a SVG that is referenced as symbols. The codepen shows a left side, where the SVG is implemented "regularly" in the DOM flow. There, the intended animation works (the rectangle needs to be hovered). The same thing should happen on the right side, where the SVG is referencing a symbol instead. Does anybody of you guys know what I am doing wrong? The console shows that the original SVG is "copied" to a shadow-root - can "shadow DOM" be accessed anyway? Much appreciated! Thanks!
  21. Aloha - the Green Sock has again provided fantastic help and insightful solutions! Millions and millions of thanks! I am happy to say that I eventually found to a similar solution to what you did, @OSUblake. I am not so sure, if separate play and reverse functions are necessary, though, here is my thougth. Once this.logoAnimation is saved to Vue's method scope, I can call this.animation.play() and ...reverse() directly instead if this.play(). It saves some function definitions a la long... (pause() is great! I removed the play() method in the tween functions). Am I wrong? Or is this approach ugly? Or just a matter of taste? BTW: I put my methods (or the method call to the initAnims()) on enter and appear lifecycle hooks. Otherwise, my setup would throw an error, when called from a subpage directly... Good night! And millions of thanks again for your excellent help!!
  22. Sorry, I quoted from another post previously. Now I got the one i was actually referring to: @GreenSock said in 2014 that they might change the way how potential -1s (or more) time problems are handled. I was just wondering, if this happened, since we have 2018 now... Thank you!
  23. @OSUblake fantastic! Thanks a lot! But I wonder what would happen if I had to something like that for 50 timelines or so, in many more than just one child component? I followed your example and tried some variants, but either the `this` context gets messed up, or the new var gets reactive, or if a new var is defined during a life cycle method, then the DOM is not available... It is not easy to sync animations between and within child components from the root parent is, it seems to me. It would be great to have a structure like this, where all animation methods are saved to: (fake code, not working) methods() { allAnims(refs) { logoAnimation = refs.Logo.animateLogo(); sidebarAnimation = refs.Sidebar.animateSomething(); navMainAnimation = refs.NavMain.animateMenues(); }, play() { this.allAnims.logoAnimation.play(); }, reverse() { this.allAnims.logoAnimation.reverse(); } }, mounted: { this.allAnims(this.$refs) } Or even call the method with this.allAnims.animateLogo.progress(1).reverse(0) But my attempts fail... Any thoughts?
  24. @Carl Thank you for your excellent explanation. Could it be that your link leads to a wrong codeSandbox? The code you mention in the post is not in the example... Upon inserting it myself I of course see that it works like a charm!
  25. Quick question: It is late 2018 - is this still valid? Or did GSAP come up with a different solution, as @GreenSock vaguely points out?