Jump to content

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

Robert Wildling

  • Content Count

  • Joined

  • Last visited

Community Reputation

20 Newbie

1 Follower

About Robert Wildling

  • Rank
    Advanced Member
  • Birthday 12/11/1972

Profile Information

  • Gender
  • Location
  • Interests
    PHP, JavaSrcipt

Recent Profile Visitors

1,789 profile views
  1. 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!
  2. 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...)
  3. But as I mentioned: I need a way to kill an ongoing tween. How can I do that if that tween is not "reachable"?
  4. 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?
  5. 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...
  6. 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
  7. 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
  8. 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!)
  9. 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!
  10. @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.)
  11. 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 ti
  12. @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!
  13. 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 u
  14. 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 d
  15. No way - look at that! Never seen that before! It's a miracle!!!