Robert Wildling

I very much appreciate your help, Rodrigo and Blake! Really! And I apologise for standing too close to the tree and not seeing the forrest! Could it be that you just want to tell me "don't define menuTween on the data object, instead just declare it in methods"? (I can promise you that I do nothing else but trying and testing since days on this scenario... I just removed the menuTween from data, and yes, as you both said: it still works – But I am still unsure if this is what you mean...)

But as I mentioned: I need a way to kill an ongoing tween. How can I do that if that tween is not "reachable"?

OK, I think I understand what you mean. The reason for doing so is that I need a way that can potentially kill a tween in case the user clicks a menu item before the animation has finished. Is there a better way to do that?

Hmmm... I still do not see the place where I add a gsap instance to the object returned by the data object... My methods look like you recommend and I also attach gsap to vm.menuItems / this.menuItems (depending on the life cycle). Where do I need glasses? Sorry for being so short-sighted...

Thank you very mich, Rodrigo! – My "unusual setup" is a result of simply not knowing it better :-). It turns it that it was the wrong parameter (which I thought is meant for "delay"). Removing that is enough to make it work, there is no need for $forceUpdate neither the "resetNav" hack and not even gsap's reset property and kill() methods. I updated the codesandbox example. It should no be less unusual, right? I am not sure, though, what you mean by not adding the GSAP instance as a reactive property. Are you referring to the "this.menuTween" property? If so: I did that, because it is theoretically possible that a menu can be clicked while the onload animation is still going on. And to catch that problem, I need a reference to the tween that is outside of Vue's navigation guard functions. That messes up the "fade out" animation... or do I misunderstand you?

Codesandbox (didn't know how to reproduce it on Codepen, sorry!) https://codesandbox.io/s/vue-and-gsap-listanimation--lhvk1 Hi, all! I am not sure at all if I my problem is GSAP or Vue-related. If this is the wrong place, please let me know! The demo, that uses GSAP within Vue, shows a list (a menu) that stagger-animates into view. This happens on initial page load, in `Start.vue`, which is the first component that is loaded by the Vue router. In the `beforeRouteEnter` navigation guard, within "next", the elements of the menu are collected, then gsap sets some x and y values (moving the items to the top left) and eventually the animation starts. The tween is assigned to the variable `vm.tween` in order to be able to kill it should a user be too fast and choose a menu before the animation stopped. beforeRouteEnter(to, from, next) { next((vm) => { vm.$forceUpdate(); const menu = vm.$refs.menu; const menuItems = menu.getElementsByTagName("li"); gsap.set(menuItems, { autoAlpha: 0, y: -32, x: -48 }); // Assign to var in order to be able to kill it later vm.menuTween = gsap.to( menuItems, { autoAlpha: 1, duration: 1.5, ease: "elastic", stagger: 0.09, x: 0, y: 0, force3D: true, onComplete: next, }, 0.65 ); }); }, So much for the onload animation. After clicking a menu, an animation starts to fade out and "drop" the menu items step-by-step. After that there is a lot of killing going on in "resetNav", before the new page loads. beforeRouteLeave(to, from, next) { const menu = this.$refs.menu; const menuItems = menu.getElementsByTagName("li"); this.menuTween.kill(); gsap.to(menuItems, { autoAlpha: 0, duration: 0.1, ease: "power2.in", stagger: -0.05, x: 32, y: 16, force3D: true, onComplete: this.resetNav, onCompleteParams: [next], }); }, methods: { resetNav(next) { this.menuTween.kill(); gsap.killTweensOf(this.menuTween); gsap.set(this.menuTween, { clearProps: "all" }); next(); }, }, So far so good. But now come the troubles: When I click on the "Back to Home link" link, I would expect that the onload animation would be shown again. But instead nothing happens. And I have no idea why! All those killings should have removed any inline styles and repositioned the items. Which is probably a useless step anyway since the component is deleted. What is wrong with this code?

Thank you for your gsap-ly-fast answer, @ZachSaucier! I didn't think of the attr plugin – awesome!!! (I should have mentioned, that I am aware of the other solutions, and I also know how to do it with native JS. I was just wondering, how GSAP approaches that topic. Now I know! Very much appreciated!)

Hi, dear GSAP afficionados! I was trying to find a way to set the value of a dataset attribute? But so far I failed, because I do not know, how to set something that does not have a key-value pair. The idea is to get the height of an element before hiding it. That height value should be saved to a `data-original-height` attribute, so that at a later point, another animation can pick up that value and create an exact "show" animation tweening to its exact height. (Of course the has to be updated on media queries and probably window.resize...) Thank you!

@PointC Thank you very much! That was very help- and insightful! (And thanks for the restart advice! I keep that in mind! Currently, though, there is no user interaction, just onload and onunload animations.)

Thank you, guys, for kicking my few lonesome little gray brain cells! You are awesome! May I just ask for a professional feedback at what I came up with now. it seems I can get the code working, when I define the variable for the timeline to be created beforehand, as an empty timeline, so-to-say. Then, a call to the "buildsecondTimeline" function would setup all the gsap needed. Fantasy code: // Define empty timeline beforehand: const timelineToBeBuild = gsap.timeline() // the onComplete of this function calls buildTimeline to create the second timeline. const firstTimeline = gsap.timeline({ onComplete: buildSecondTimeline }) // second timeline needs to be "wrapped" into another function, // otherwise it is executed right away const buildSecondTimeline = () => { timelineToBeBuild.to([...]) .add([...]) // This return is not necessary... // return timelineToBeBuild } // Call `timelineToBeBuild` directly btn.addEventListener('click', (e) => { timelineToBeBuild.progress(1).reverse }) I edited the codepen accordingly: https://codepen.io/rowild/pen/abvMWpx?editors=1010 It seems to work. I just wonder, if that is the way to go? Or are there still pitfalls I am not aware of?

@PointC Thank you! The fact that the timeline is created after a click on a button here is only due to the fact that this is a reduced example. In my scenario, the timeline is build after an onComplete call from another timeline, which is necessary, because beforehand DOM elements are added that are not available right away. Of course: if there is a better solution I am all ears!

Thank you, @ZachSaucier , for your quick and helpful response! The reason, why I setup the timeline within a function, is that there is stuff going on before this timeline is build (like text is wrapped in spans...). Elements are simply not available before this process is finished. So I put everything into a function and into another script (also to save space). This very function is then called from an onComplete event of another timeline. I only need it during page build-up. Well... that's what I thought. Now I would also like to use it in its reverse manner before unloading the page... hmm... I am also confused about the "(0)": It is clear to me that a timeline jumps to the beginning, when a zero is passed to the `play()` function. But I consequently thought that, when passing a 0 to the `reverse()` function, it would automagically jump to the end of the timeline. But that does not exist, right? (I am aware of the `progress(1)` function and also tried it - honestly! But since my whole setup doesn't work, I tried reverse(0), too...) Any idea how to build a timeline from an `onComplete` call? Without using a function? Or maybe better: with using a function properly?

I am quite a bit embarrassed to have to ask this question again, but I am so totally stuck that I hope you find some patience with me... hopefully! it is about reversing an existing timeline that is saved to a variable, quite like this: ```js const mainTl = () => { const tl = gsap.timeline({ paused: true }) [...] return tl } ``` While this works, when called directly within the flow of the code: ```js mainTl().play(0) ``` the same function as well as `mainTl().reverse(0)` won't work, when called from a button. I did read the documentation and search through the forum here, but my light hasn't gone on so far. Can someone please switch it on? Thank you in advance!

No way - look at that! Never seen that before! It's a miracle!!!

Hi! I have to admit that I am not familiar with what ends up in a cheatsheet or not. I just found out today that `clearProps`is missing and simply wanted to ask, whether that property would be something to mention in the gsap 3 cheatsheet (if so, then probably under "Miscellaneous", right under `getProperty`) or not? Thank you!

Thank you both for your answers and support! CSS variables is indeed something I didn't think about! Great idea!

Dear GSAP community, I would like to ask for your advice concerning the CSSRulePlugin's usage in a for loop. From what I found out, it seems to be required, that the css rule, that the CSSRulePlugin is supposed to access, needs to be present in the stylesheet in exactly the same way. So writing something like let rule = CSSRulePlugin.getRule("slide0 .headline:before") requires .slide0 .headline:before to present in the CSS stylesheets. It will not work, when the style is defined differently, like .slides .headline:before . But in a slider the amount of slides is various (and they are usually generated via a for loop using data coming from a CMS), so I cannot predefine each and every .slide0, .slide1, .slide2 ... (well, I could, but I would guess that this wouldn't be considered the best approach). I did think about just using ".headline:before", which would give me an array of all available headlines, but that would also mean that the border width of all those elements would be animated, even though only one slider is visible at the moment. How can such a problem be solved? What is your approach? Or what would be your recommendation for me?

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!

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!

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!

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

@OSUblake Actually I do not! Thanks for bringing that to my attention!!!

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

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

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!