Jump to content

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Dipscom

  1. Hello! You have to draw your path in a counter clock-wise manner. You can either write the SVG path yourself. Or the drawing software used to create the SVG to edit the current path by reversing it. In Illustrator is under: "Object > Path > Reverse Path Direction".
  2. CodePen is a haven for that sort of examples. You can find anything you can think of and a bunch of other stuff you didn't even think yourself. Here's a quick search result: https://codepen.io/search/pens?q=scroll reveal&page=1&order=popularity&depth=everything&show_forks=false Disclaimer: We don't work for CodePen, we don't get commission from them. They're just a bunch of super nice developers who created a lovely comunity and a great product. Sounds very much like GSAP, you say? :D
  3. I do think mattsrinc is onto something though. Fair enough that you do not want to mention any particular service but, I think saying that one should always have a default arbritation system setup would be benefitial. If only for a beginner to be aware of that.
  4. Hi xpo_greensock@knor, It will be hard to troubleshoot without having the whole context in which the code is operating. Could you setup a simple demo in CodePen or JsFiddle? Or somewhere else that we are able to see the live code? Having said that, if all you want is a border around the selected element, wouldn't it be simpler to just have a border set with a transparent color and then, on selection, you toggle the color to full black?
  5. Hi chiho! I hope I understood your problem correctly, let me know if that's not the case. I think you might be adding a bit too much code in your attempts and are now getting a little bit lost in the forest. See the fork I made of your example pen with some of the extra stuff removed for clarity. Hopefully, this will help you achieve your goal.
  6. My personal experience is being drafted to work on some project as the animator only to start working on it and be put in charge of the whole stack... End up spending 90% of the time developing everthing, 9% debugging and only 1% on the animation. So sad... Maybe, one day, I'll learn webdev correctly and will be able to do more animation. Or, maybe, I should learn to stop changing industries and focus on a couple of types of development. Not a new one each time...
  7. And that, everybody, is efficiency.
  8. I would say the idea, in paper, is very nice. But the ramifications should be considered very carefully. Would these jobs postings be paid to appear? Or would they be free? If they are free, who is going to curate against bogus offers? Would GSAP be, in any way, responsible or answerable to any transaction or agreement that is made via the forums? I personally, think opening a new section and labeling it as "Wild West" to make sure GSAP does not take any responsibility over it save from stopping spammers and scammers could be a good addition to the forums.
  9. Would love to but I cannot, sorry. Too many plates spinning at the moment. Tap out.
  10. I really don't see how that would be possible. The whole point of the restriction is to stop annoying users. No sound is to be played unless the user actively interacts with a trigger - click, tap event. Do you think you can find this example? The best way to solve this mystery would be to examine the source.
  11. I can confirm what GreenSock has reported. It's a closed path, not a stroke. I've quickly swapped out the fill colour for a stroke and drawSVG did its trick. Obviously it looks wrong as it's not a line but a super thin polygon. If you amend your SVG to not be closed paths, all should work as desired. As for the debugger, that's quite odd. Something during the installation of your repo might have gone wrong and I have a broken copy of it. Downloading git repositories while tethered to a mobile phone, riding a train with patchy signal might not be advisable.
  12. Oh no, I can't either... Too many plates still spinning. Would love to but, honestly, do not have the time to dedicate to this. Over to @Sahil...
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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).