Dipscom last won the day on May 21

Dipscom had the most liked content!

Dipscom

Moderators
  • Content count

    1,139
  • Joined

  • Last visited

  • Days Won

    37

Dipscom last won the day on May 21

Dipscom had the most liked content!

Community Reputation

1,854 Superhero

2 Followers

About Dipscom

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    London

Recent Profile Visitors

7,184 profile views
  1. Let it never be said GSAP fourms isn't value for money. Wait for Black Friday, we'll be doing some crazy deals: Ask one question, get three answers, five jokes and a CorePen example snippet.
  2. Rotating and translating svg along arc

    Had a stab at it again this morning during the train journey. The props are an issue because they stop the bundling if they are not present. I commented out to stop the error. Still having issues with the debugger in Chrome as it always freezes the page on that same line of the script mentioned earlier. If I push past the pause in the debugger I can see what you are referring to: GSAP exists and works, the plugins are there but for some reason they are not producing any effects. Obviously, Jack has been working on improvements and now dropped an update that might just fix it all for us. See if this new version solves your issues. If it doesn't, check if you're having the debugger freeze as well, that needs to be solved before we get to look into any GSAP issue.
  3. Rotating and translating svg along arc

    Cloned your repo, installed and already ran into problems. There's a couple of props you marked as required but you are not passing them into the component. There's something triggering the debugger in chrome, so it freezes the running of JavaScript. It's on line 132 of 'abstract-xhr.js' - No idea what's that or what is meant to do. Finally, I forgot to charge the laptop during the day. Only have 11% of the battery left, I doubt I'll be able to look any further into this tonight. By the time I get home, there will be time only to have dinner and a wash before bed.
  4. Rotating and translating svg along arc

    Hello Tomer, I got your invite - I shall try to have a look on my way home today (which will be soon). Hopefully it will be something simple. Stay tuned.
  5. I'd say the answer to this question is in your other thread. Go check it out, you'll have a two-for-one deal there.
  6. Hello! I have managed to spend a bit of time on this. Diaco's original pen is quite useful and a rather neat trick he's got there. The catch is making sure you are using the same type of curve for the Bezier and the SVG you are drawing. In this case, it's "Cubic". It will be wise to read the following pages to get yourself familiar with the Path attribute in SVG and GSAP's BezierPlugin: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths https://greensock.com/docs/Plugins/BezierPlugin Now you can just drag the knob sideways to get it to slide along the path nicely. I also feel this fixes your continuity issue, where you were saying the knob wasn't sitting exactly where you expected it to be. Here's my fork of Diaco's pen: Now if you want the dragging not to be just a straight line, you know it will be a rather complex set of logic for you to achieve that. And I don't think I'll have enough spare time to write the logic for you.
  7. transformOrigin not working in css-grid

    Hi @ghost666, Sahil has given you the solution to your problem. What you want to do is, as he said, shrink the other columns, not grow just increase the width of the third column. By the way, you probably don't want to use GSAP just to add classes to your elements. You can toggle that without GSAP - As a rule of thumb it's actually better to animate either with CSS transitions/animations or with GSAP, not both. They'll be fighting for control and causing all sorts of headaches. It really looks like you don't even need GSAP for what you are trying to achieve, simply a :hover pseudo attribute and some transitions and classes.
  8. I'm a still a bit fuzzy about the continuity but I think I got what you want with the dragging. It's going to require a bit of logic to keep track of the progress of the drawing and make the necessary adjustments to the dragging of the knob. Having said that, it sounds like an interesting problem to tackle. Right now, I cannot, but I might have a stab at it later on.
  9. Rotating and translating svg along arc

    I've dabbed with React in the past and have had a play with create-react-app as well. It is possible to get it working. I don't remember from the top of my head (it's been over a year) but, half the headaches I had was to do with the linting of the code, not GSAP or React. It wouldn't build because of the linter. There are several threads discussing React and GSAP here, I'm sure enough of them will be with create-react-app, maybe you can dig something out from there. As for using drawSVG, if no one else throws an example you can follow here, I'll try and put something together for you once I have a moment.
  10. Rotating and translating svg along arc

    Which route do you think you want to go with? Just rotating the SVGs around a common center or usnig the DrawSVG plugin? Either will probably yield some result, the difference will be how much prep work you will have to do in order to get it working.
  11. Do not assign TimelineMax() to variable. Is correct?

    All it means is that a new timeline will be created every time you trigger the click event and it will not be held in memory. So, unless you're passing in new parameters every time, there's no particular reason to do so. You can create the timeline once and only replay it on click. Having said that, there's nothing really bad or wrong by creating a " throwaway" timeline like that. Performance-wise.... Unless you are triggering thousands upon thousand of clicks or looping and creating thousands upon thousands of calculations on that one click, there's no real perceivable difference in performance.
  12. Rotating and translating svg along arc

    I'll follow the master's advice and suggest you'll be a lot better off by just setting your SVG up in a way that you only rotate your elements around the root SVG center using svgOrigin (read about svgOrigin here in this blog post: https://greensock.com/svg-tips).
  13. Hi there! I am reading this thread but finding it very hard to picture what it is that you mean by " continuity" . What in Diaco's example does not fulfil your needs? Another question: When you stated that you wanted the mouse pointer should be "in sync" with the draggable knob, do you mean you want to lock the mouse pointer to the location of the draggable object? If that is what you want, you will not be able to achieve it. You cannot take over the mouse pointer. The best you can do is fake it by hiding the mouse cursor and then adding a fake cursor on top of the draggable object, locking that fake one onto the position you desire.
  14. I have no experience with angular, is there any significant change from one version to another? It really sounds like it's an issue with the bundling of your project rather than GSAP.
  15. Hello! Videos can't autoplay with sound on. Set your video's muted property to true and it should work as you have it. Video with sound can only play if the user interact with it in a meaningful way. A click or a tap. Mouse hover are not classed as intentional interaction as one can easily hide nefarious code to play annoying sounds in such interaction without the user wanting it.