Robert Wildling

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!

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!

@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!

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?

@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?

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?

@OSUblake Thanks a billion times! I actually knew that - no idea, why I did it nevertheless... stupid me! (Pen is updated with comments.)

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

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!

@elegantseagulls Nice!!! Thanks for sharing!

@Carl Thank you for clearing that up for me and for pointing me to that great article! Much appreciated!

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!

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!!

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!

@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?

@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!

Quick question: It is late 2018 - is this still valid? Or did GSAP come up with a different solution, as @GreenSock vaguely points out?

Demo: https://codesandbox.io/s/n34pvjxyxj Hi, fellow GSAP'ers! The topic of playing a timeline in reverse keeps troubling me. The Demo above is one, where, within Vue, a parent component calls function on a child component (using $refs). As the console output shows, the functions are indeed called, but the animation is not played in reverse. I do not understand why, because: - the timeline is returned to a var, right? - the staggered animations use `staggerFromTo` , even though I assume that using any of the other two should eventually work, too What am I doing wrong here (again)? Do I misunderstand the idea of having the timeline saved to a variable (here: animateLogo)? Are reverse animation on timeline using a stagger feature not possible? (I doubt that! It's GreenSock!) Thanks you in advance! PS: the actual GSAP-related code parts are kept as short as possible. Please ignore the other stuff, which is just there to wrap the letters... (no, I am still not using SplitText... shame on me!)

I understand. So there is not right-click options as there is with "active", "focus", "hover" etc to set a state. Thanks for your responses!

EDIT: While adding some Vanilla javascript solutions and found out, that I do not need the CSSRulePlugin to achieve, what I intended. So the GSAP question is answered. But... I still don't know, how to use DevTools to check the "checked" status... would great, if you could drop a hint! Thank you!

Hi, fellow GSAPers! I wonder if you could tell me, whether it is possible to change a :checked value (or is it in fact a pseudo-class?). I did find some entries here and studied the codePens, too, but it seems the CSSRulePlugin is made for :before and :after? In the example pen provided I tried several options, but to no avail. And since I touch the subject, please allow me 2 related question: 1. Is CSSRulePlugin integrated in TweenMax TimelineMax or not? I checked the node folder, and the file is there, but it seems it has to be included separately? (I am still using v1.20) 2. This is not GSAP related, but I hope you can clarify this for me anyway: how can I inspect the :checked value of a checkbox in the Chrome DevTools? (I did google, really!) Thank you!

@Dipscom Well, the intention was to use the "normal" timeline for the appear hook, and the reversed for the leave hook. Since each has its own callback (onComplete, onReverseComplete), the "done"s could be fired accordingly. But the setup of the timeline has to be initialized at some point (see "appear"), otherwise the reverse version in "leave" is not triggerable. methods: { buildUI(el, done) { this.tl_intro = new TimelineMax({ paused: true, // needs to be paused onComplete: done, onReverseComplete: done // this one won't work }) [...] // do not play the timeline yet! return tl_intro } }, appear(el, done) { // here the buildUI is initialized, so that this.tl_intro is available later // cannot do this in beforeAppear, because there is no "done" callback "available" this.buildUI(el, done) // Now play the timeline this.tl_intro.play() }, leave(el, done) { // Call the reverse timeline, done won't be triggered, though // "el", but especially this "done" cannot be passed to another callback this.tl_intro.reverse(0) } What happens in appear, looks mega-ugly!!! But, just to make clear: this is only a theoretical and only meant for discussion (from my side at least)!

@Dipscom A theoretical question: the `done` callbacks from `appear` and `leave` actually have different context, right? If so, setting a timeline's `onReverseComplete` to `done()` during the `appear` transition (using the `appear`'s `done` callback) would not make much sense, since the timeline's reverse() is triggered from the `leave` transition hook, whichs `done` callback has its own context ... is that correct or BS?

Que diabolica la risa... ?

Got it: I forgot a the "return" in the TweenMax, the "()", when calling the function, and the initialisation of the timeline needs to be done in mounted() (not created(), because in the latter the DOM is not ready yet. "mounted()" fires after the transition hooks and therefore is at some point a problem... The last pen is updated. OK, done here. Thanks again for your patience and help! My next post: the working result Happy tweening!