Search the Community
Showing results for tags 'feedback'.
Found 3 results
-
Hey everyone, I've been working at improving my GSAP skills and was wondering if someone would be willing to have a look at a set of custom radio buttons I've created and give some feedback on how I'm using the library. You can see the pen below https://codepen.io/jdillon/pen/LYwKWJq/fbd9c2387f616c27582516bf1a24cebd. Essentially, I'm animating several SVG rect elements using elastic easing when a radio button is checked, and then applying an animation to a subset of the rect elements that runs every 1.5 seconds while the radio button is checked: if (isChecked) { const randomNodes = nodes.slice(0, 10); this.randomNodesAnimation = gsap.to(randomNodes, { duration: 0.7, ease: "elastic.out(1, 0.1)", x: reverse ? "-100%" : "100%", stagger: 0.01, repeat: -1, repeatDelay: 1.5 }); } else if (this.randomNodesAnimation) { this.randomNodesAnimation.kill(); } I'd like to know if this is a suitable approach to achieve this. There is also a minor issue that occurs if you spam click or tap (this issue is easiest to reproduce on mobile) the radio buttons where some of the rect elements don't finish animating - or maybe the rects that are leftover on Option 2 hadn't started animating when Option 1 was clicked. I would appreciate any feedback or advice, thanks!
-
Hi people, I've been trying to enhance my skills regarding GSAP and SVG animations. Inspired by the beautiful [Toggl's web app](toggl.com) I've tried to reproduce a neat effect available there, but using a slightly different approach. I've grabbed a great little monster SVG from a collection and took the challenge of animating the eye of this monster reactive to the mouse hover event on the parent container. I've had first tracked down all the min and max values to translate X and Y axis in order to roll out all the monster's eye globe and then applied a calculation to transform the 0%-100% from the mouse position on the container to the min/max values to Y and X possible translations. The result was satisfying. This is my first sharing post and any feedback regarding best practices, best performance, or simply a better way to achieving that would be very much appreciated. @Edit: For some reason the pen is not being correctly loaded, so here is the link: https://codepen.io/junglebadger/pen/dLXrew
-
Hey folks, I could use your help as people with unique insights into what "worked best" or what you found "most important" during your first encounters with GSAP. We are looking to revamp / gut our Getting Started article. When it was first created GSAP for JS was in its infancy and we needed to do a lot of explaining about what GSAP is and does. It turned into a monster of an article that is quite intimidating to try to absorb. We created the Getting Started video to help people fast-track to the most important on-boarding aspects: Load GSAP, create a tween, mess around with different properties. It definitely helped a lot of people. However, some people don't like investing in watching a video or have language problems. We also added the Jump Start to act as a "feature tour" of sorts, but we are feeling that it is also quite dated right now. So the challenge here is how do we make the Getting Started page easier to absorb for people touching GSAP for the very first time. The goal is NOT to make them experts on the whole API, it is to make their first 2 or 3 hours pleasant without any major roadblocks. My question is: What are the top 5 features or concepts that you would want to see as someone using GSAP for the first time. What works best for you as a learner of something new. Thanks!
