Jump to content

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

Robert Wildling

  • Posts

  • Joined

  • Last visited

1 Follower

About Robert Wildling

  • Birthday 12/11/1972

Profile Information

  • Gender
  • Location
  • Interests
    PHP, JavaSrcipt

Recent Profile Visitors

2,138 profile views

Robert Wildling's Achievements

  1. Excellent! Once again thank you for your support, @nico fonseca! Very much appreciated!
  2. Thank you very much for your help! I do set the zIndex, via JavaScript (as a "style" property), but not via GSAP. I thought that once a property is set somehow (be it via CSS or JS), GSAP picks it up? I remember that this was a problem once, because I had set a property that interfered with GSAP...
  3. Thank you very much for your quick response! And yes, of course I know Carl's video (however I thought my problem was related to the onCompleteParams method, not the scope...) I use the arrow function now as you suggested, and it works fine, thank you! May I nevertheless dig a bit: When I remove "callbackScope: this", the context in the callback function should be the tween itself, right (screenshot)? (Even though a "data" property is undefined, but "_pt" references the "almond" div). Do you happen to know, why it is still not possible to assign zIndex?
  4. Hi, dear GSAPers! I would like to change the zIndex of a div after animation has completed. It seems this is what the callback functions are made for, however, the `onCompleteParams` remains a riddle to me. This: const cb_animCompleted = function (params) { gsap.set(this, params); }; gsap.to(almondBox, { duration: 0.5, x: 50, zIndex: 0, onComplete: cb_animCompleted, onCompleteParams: [{ zIndex: 20 }] }); throws this warning in the console: Invalid property" "zIndex" "set to" 20 "Missing plugin? gsap.registerPlugin() Can you please help understand what I am doing wrong? Thank you in advance! gsap: v3.7.1
  5. Awesome! Thank you very much! This has been waaaaaay more insightful than I expected! Much like as if a light bulb was turned on Happy tweening!
  6. 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...)
  7. But as I mentioned: I need a way to kill an ongoing tween. How can I do that if that tween is not "reachable"?
  8. 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?
  9. 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...
  10. 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?
  11. 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?
  12. 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!)
  13. 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!
  14. @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.)
  15. 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?