Jump to content

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,628 profile views

Robert Wildling's Achievements

  1. I am trying to find out how, in Vue (here with Quasar 2 / Vite 2) transitions between layouts can be solved. The stackblitz example has to layout "contexts", `home`and `main`. A very important factor is that the routes all have a `meta.layoutKey`, which is set on the `router-view` component as `:key`, so reload only happens, when this context changes. If such a change is detected, the `parent` var in the pinia store is set to true in `router.beforeEach()` – that way a transition can be initialised. Transitions works - kind'a... but there is a flickering happening, when "main" is revisited. I assume this has to do with things like (e.g.) `vue-if="navItems"`, where gsap's `.set(obj, { autoAlpha: 0 })` is set just not right away... How can I solve this? Stackblitz Example: https://stackblitz.com/edit/quasarframework-vy4eiw (The Readme of the example also contains the problem description. Please understand that I really worked hard to strip down the example; but it needs a certain amount of features and files, otherwise this whole layout transition problem cannot be show-cased. Thank you in advance, if you take your time to look at this!)
  2. Yes, Jack, you are totally right! I actually wanted to mention that, but than I was so overwhelmed with the result that I forgot all about it! Thanks for bringing it up!
  3. @SteveS I posted an update before I read you comment. Yes, makes very much sense what you say. Thank you again! Also thank you again, @tomcatbuzz, for participating and finding solutions! 👍
  4. @tomcatbuzz I appreciate your feedback, but, as written above, I am not using API mode, but script setup, and the things you refer to (onLeave etc) have to be used on a page, where the route-view is defined (a layout page, e.g.). The code I have to deal with, however, lives in a component that is loaded and unloaded. Meaning the router-view does not have access to that component's DOM (well, it does at some point, but that would make things really complicated). It is not a difficult or unusual setup and it is totally ok to be done on router guards. All that I want to know (and where I obviousely make thinks complicated, even though it shouldn't be, since it would be short, very readable and performant code) is if there is a way to call a router guard's "next()", when using "tl.reverse()" on a "globally" defined "tl". @SteveS Thank you for your input! I have not tried yet what you suggested (pause, reverse...), but shouldn't "tk.reverse(0)" - "0" being the indicator to play the tl from the very end - do all that automatically? When the animation starts, it is only played forward, so a"onReverseComplete" has not yet been fired... unless something else it happening that I do not know about... UPDATE: @SteveS Indeed, your suggestion is the solution. Added this: onBeforeRouteLeave((to, from, next) => { tl.pause() tl.reversed() tl.eventCallback('onReverseComplete', () => { console.log('reverse complete') next() }) tl.timeScale(2).reverse(0) } Thank you! 👍
  5. Thank you for your feedback, @tomcatbuzz and your example! Very nice! (Are you working in a Three.js project there?) However, I really want to know a solution for my setup, which uses router guards.
  6. Building a separate animation for the "onLeave" animation is one way to go and would solve the callback problem. However, I would like not to create extra code and instead use the existing timeline in `reverse` mode. But, as mentioned, this does create a callback problem, for which I am seeking a solution...
  7. Hi, GSAPlers! Let me start by apologizing for not providing a codepen. I do not know how to setup a vue 3 / vite project on codepen. (I think this is only possible in the pro version?) And I spent my day so far to try to get a codesandbox working, but to no avail (I have to admit that I have never been successful on codesandbox). All I can do is provide a github link for those who are willing to download and have a look into it on their local machine (which, of course, i do not expect, but at the moment it is the most I can do): https://github.com/rowild/jvds-vue3 That said I think the problem itself might not even need a codepen. This is what I have: In a Vue 3 Composition API ScriptSetup & Vite & GSAP project, a timeline is created. Items are added to the timeline in the `onMounted` hook and eventually `play`ed. The result - appearing letters - works fine. Once the enter button is clicked, a new route is called. But before that the timeline should be played in reverse (letters should disappear), which to my knowledge happens in a "Vue Router Guard", `onBeforeRouteLeave`, which comes with 3 params (`to, from, next`). `next` would eventually fire the route change, and it should be called, when the animation is completed, in this case, when `onReverseComplete` is fired. // <script setup> import { ref, onMounted } from 'vue' import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router' import gsap from 'gsap' // [...] const tl = gsap.timeline({ paused: true, onComplete: () => { console.log('TL onComplete invoked')}, onCompleteScope: this }) /* Life cycles hooks */ onMounted(() => { tl.set('.letter', { opacity: 0 }) tl.set('.line', { opacity: 0, scaleY: 0 }) tl.set('.intro-container', { autoAlpha: 1 }) tl.to('.letter', { autoAlpha: 1, duration: 0.5, stagger: 0.035 }, 0) tl.to('.line', { opacity: .7, scaleY: 1, duration: 1.25 }, 0.25) tl.to('.btn-ui-show', { autoAlpha: 1, duration: 0.5 }, '>-.5') tl.play() }) /* Router Guards */ onBeforeRouteLeave((to, from, next) => { console.log('IndexPage onBeforeRouteLeave'); tl.eventCallback('onReverseComplete', console.log('reverse complete')) tl.timeScale(1) tl.reverse(0) }) However, I have no idea how to properly implement that event callback. While the reverse.played animation works fine, the callback in the shown solution is called right away instead of at the end of the animation. Assigning the `onReverseCallback` in the timeline setup (where there is also `onComplete`) won't work, because there is no access to the router guard's `next()` function. How can I solve this problem? Thank you!
  8. @Greensock No, I have not installed inertia yet. And my last post was indeed only a question concerning the docu. I looked at your changes in the docu – and I must admit I am still a bit confused. "snap" (like "onThrowUpdate" and "onThrowComplete") is now on the main list level, but other functions, that are only available with inertia, are only listed within the "inertia" list level. This seems a bit arbitrary. Wouldn't it make more sense to either put **all** functions on the main level OR **group all inertia-related functions** within the inertia list level? Or maybe even put the inertia API below the main "Config Properties" as a separate list? Just thinking out loud... personally I would prefer a separate "Inertia Config Properties" section below the "Main Config Properties" that has a comment like "Only available with inertia"; ideally with a jump menu above the "Main Config Properties". Or in the "Main Config Properties" "inertia" could be mentioned, but the text would say sth like "See below" or maybe offer a jump link... What do you think?
  9. @Greensock I started experimenting with "snap", which I couldn' get to work yet ("liveSnap" works, though). This is a very minor issue, but since I didn't know, where to post it, I do it right here: While reading through the api: https://greensock.com/docs/v3/Plugins/Draggable I realised that there is no "snap" under "Config object properties" (main text). Also, "inertia" is not listed alphabetically. The same is true, when clicking in "Draggable.create", where I can find "bounds", "edgeResistence", "liveSnap" etc, but no "snap" (and inertia before "t"). To y understanding "snap" is only available with "inertia", right? If so, shouldn't "onThrowComplete" and "onThrowUpdate" also go into the "inertia" block ONLY? (Currently they are on both "levels"). (The anchor link on "See the snapping section" does not work either.)
  10. Excellent! Thank you very much, @GreenSock, this is incredibly helpful for me! (I think you are not `@ J a c k`, right? Sorry for that. I'll fix that in the previous posts.)
  11. @GreenSock Thank you very much for the "quickTo" example! (Indeed, I thought it was just meant as a replacement of ".to"... will look into the docu now.) Draggable's "onDragEnd" only fires, when the mouse button is released. What I am asking is, if there is a way to detect a "onMoveEnd" without releasing the mouse button. In my example this would mean: - drag the sprocket - move the sprocket - stop moving the sprocket, but do not release the button (because I might continue moving after a while) -- if that happens, invoke a function that causes the pedal to move to it's proper position The reason, why a user might not release the mouse button, has to do with the (not yet implemented) idea that at various positions there will be some kind of reactions (e.g. some item, that is only a dot, but expands, when the sprocket is at a specific angle...) But OSUBlake already mentioned that I have to be implement some kind of check on my own. May I ask you for your advice on the "timeline" solution?
  12. @OSUblake @GreenSock Thanks again for your feedbacks! Sorry for not posting the link to the demo again; it is still in the first post (which I adapted): https://codepen.io/rowild/pen/eYVmJdE There I added the "quickTo", which I cannot get to work. And yes, when talking about "onMoveEnd", I actually mean Draggable – sorry for being so unclear! About my performance question: since I cannot get "quickTo" to work, I define the tween that is frequently called in "onDrag" as extra timeline and invoke "resume()" on it (I now also can call this tween from "onDragEnd"): function pedalOnDragReaction(rotation) { const tl = gsap.timeline({ paused: true }) tl.to(pedal, { duration: 0.5, rotation: -rotation, overwrite: true }) return tl } const handleOnDrag = (rotation) => { pedalOnDragReaction(rotation).resume()} } Draggable.create(bikePedal, { type: "rotation", onDrag: function () { handleOnDrag(parseInt(this.rotation % 360, 10)); }, onDrag: function () { handleOnDrag(parseInt(this.rotation % 360, 10)); }, [...] }); https://codepen.io/rowild/pen/bGLpbQe?editors=1111 It seems to work - but is it an improvement performance-wise?
  13. Thanks for bringing "quickTo" to my attention! However, in my case it does not work. No idea, what I am missing... I do not know what you mean by "you could just use an onComplete on that tween to know when it's done". When using "onMove", when is there an "onComplete" event fired? I might have been unclear in my question: I am looking for an "onMoveEnd" option, one, that detects that the mouse is not moving (but it is still clicked). UPDATE You mention that I create a tween every time there is a movement. Is there a better way?
  14. I played around with what was suggested here and stuck with the getBB approach (couldn't find a way how to use the MotionPathPlugin to find the angle point for the sprocket). Meanwhile I applied Draggable (new for me, and extremely exciting!). Out of curiosity: I was wondering if there is a "onMoveEnd" functionality? "onDragEnd" is fired, when the mouse is released, but in this case I was playing with the idea to react to the sprocket's "onMoveEnd" motion and let the, e.g., pedal swing a bit (which does not necessarily mean that the user stopped dragging it; (s)he might just be waiting...) The codepen in the first (updated) post would still be my "plaground" for reference... Thank you! PS: I implemented a function in "onDrag" that updates the rotation of the pedal. That seems to pretty much seem to do what I need. I only wonder: is this the proper way to go in terms of performance?
  15. Wow! That was quick! Thank you so much! I will study your solutions!