Leaderboard

Correct. The browser calls requestAnimationFrame right before it's about to paint, so responding to the event before that is almost always pointless as it could get called again. I know Chrome tries to optimize events so that they fire right before the animation frame gets called, but that's Chrome. And then you have Safari and Edge which actually call requestAnimationFrame at the wrong time, but that probably won't be an issue as long as you're not manually updating element styles. Edge says it's fixed, but it hasn't shipped. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15469349/ https://bugs.webkit.org/show_bug.cgi?id=177484

I was about to respond to your other post... https://greensock.com/forums/topic/18743-cant-get-draggable-rotation-to-work-on-svg/?tab=comments#comment-86814 First, I had no problems using imports on your demo, so I'm unsure why you were having problems. So here's the problem. When you press on a draggable, it takes control of the rotation, so anything that was animating the rotation will be overwritten. To fix it I would add an onRelease callback to your draggables. Inside that callback, create a new rotation animation. Since the rotation is mostly likely going to be different, you should use relative values. const rotateDeg = rotateDir === "right" ? "+=360" : "-=360"; And I'm no react expert, but I probably wouldn't put an animation on the state object. An animation is not a state.

Hi, This is the simplest and laziest possible solution for this. Is missing the click handler for the image cards, but the main idea is to show how to animate this in React using GSAP and to confirm what I said in the previous response that neither Transition Group or React Router are needed for that particular part of an app: https://stackblitz.com/edit/gsap-forums-react-wyz64a?file=index.js Here's a full screen view which is better than the smaller split in the editor view: https://gsap-forums-react-wyz64a.stackblitz.io/ Now keep in mind that I'm using flex in order to reduce the complexity of the code (again, simple and lazy). But this could be done using elements with an absolute position, bottom and right values of 0, run a loop for the initial positions and use some similar logic to advance the elements. Also I didn't include the handler if the user clicks on an image card, but that's basically playing with the index of the element being clicked (that's why every element has a data-target attribute with the index position of it). Hopefully this helps to clarify how to achieve this. Happy Tweening!!!

Yup - if your SVG is set to preserveAspectRatio="none", your images in the SVG will get funky when squished.

I'm not sure I follow that completely, but it sounds like you'd want to set: vector-effect="non-scaling-stroke" More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect Regarding CodePen demos, you can use CodePen safe plugins. The easiest way is to fork this demo. Hopefully that helps. Happy tweening.

It's a little tricky, but could be done. You can't animate from a solid color to an image, but with some opacity tweens you can fake it. To start with a solid color and morph to a background image, you could use a clip-path (or mask) on the image and morph it too. Maybe something like this: Another option would be to use a couple images in a pattern. Hopefully that gives you some ideas. Happy tweening and morphing.

Hi @Dylan Cristy Welcome to the forum. Since these are clickable you need to set dragClickables to true: Draggable.create(`#${this.props.bandName}`, { type: "rotation", dragClickables: true }); dragClickables: Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true. More info: https://greensock.com/docs/Utilities/Draggable Happy tweening.

Okay, I just re-read your question and I think I understand what you're asking. You want to set a specific drawSVG percentage and then increase the radius of the circle, but not have the stroke move during the radius animation? You mentioned it looked like the stroke rotated as the radius animated. That's because the path length is changing. You can update the drawSVG percentage during radius animation via an onUpdate call. Does that help at all? Happy tweening.

HI Craig- I figured out the problem. I had only copied over the plugin file to my project js folder- once I moved the entire "uncompressed" folder to js/gsap/ everything seems to now work even though I am only referencing the CDN TweenMax and the local plugin in my HTML file. Thanks!

It kinda sounds like you're trying to use the ES module directly in a browser that doesn't support ES modules(?) Maybe just try using the standard (ES5) files from the "minified" folder in your downloads. That won't have that "import" statement at all. It's plain vanilla ES5 stuff.

Hi @Five&Done Welcome to the forum and thanks for joining Club GreenSock. Sorry to hear that you're experiencing problems. The drawSVG plugin should work just fine locally while using TweenMax from the CDN. Are you loading TweenMax first? If you could paste a copy of your code or a demo that shows the issue, we'll see if we can spot the problem. Happy tweening and welcome aboard.

Hi, I'm actually trying to get a demo similar to the GIF you posted. In the mean time there are certain things that don't add up in your question, that in any case had to do with how the question is formulated, is just some React concepts in it that don't match the animation in the GIF file. First, IMHO, I see no need to use either Transition Group or React Router for this demo. Keep in mind that router works with the url in the browser's address bar and a bunch of objects and methods in order to change the url based on user interaction and keep a history object to go back and forth just like regular navigation. Router normally mounts and unmounts a specific component as a result of the url change. I don't see that happening in the GIF. Second, Transition Group is normally used for CSS animations (forbidden language in this lands ) and create animations in a declarative way that's very similar to the way you actually write a React app/component. When used with GSAP, transition group normally is good only for animations that result in the animated component being mounted before the animation starts (when you animate a component in) and unmounted after the animation is completed (when you animate a component out). This is an extremely simple example of using transition group with GSAP: https://codesandbox.io/s/yvye9nnw As you can see when the animation hasn't started the component is unmounted, you click the button and the component is mounted before being animated, then the in animation (to put a name to it) is completed. Then when you click the button again the out animation starts and when is completed, the component is unmounted. I think this approach is far more simple and best suited for what you're trying to achieve, since the images are always present in the DOM so there's no need to mount/unmount them. It basically uses the ref callback to get access to the DOM node and then use that in a GSAP instance, at least that's the approach for the demo I'll create a little later: I hope that in the mean time, this helps to clarify some concepts and give you a better concept of how to work with GSAP and React. Happy Tweening!!

A fairly simple way to do that would be adding one tween to that timeline. // this targets all socialLinks including the one you just clicked on exitSocialTL.to($(".socialLinks a div"), 0.55, {color:"yourColorHere"}); // this overwrites the above tween to only target the one you clicked on exitSocialTL.staggerTo(targets, 0.55, {color: "#cd2026"},.05, 0); Does that make sense?

Oh, I see. I wouldn't import from "gsap" anymore. import { TimelineLite, Linear } from "gsap/all"; // Or import { Linear } from "gsap/TweenLite"; import { TimelineLite } from "gsap/TimelineLite"; Check out the docs for more info about importing https://greensock.com/docs/NPMUsage And this thread.

Thanks @OSUblake! Yeah, for some reason when I try to use imports I get a "_gsap.TimelineLite is not a constructor" error in my animations.js file. You are right about state, I am just used to storing stuff in state, but I could just make a class property called "rotation" and store the animation there. And yes, the relative values for rotation seem to have fixed the problem. As far as the behavior, I am already using the onPress to stop the animation (indirectly*), but I don't want it to start up automatically on onRelease, it should only start up if the user clicks/touches a different band to pause that animation. So in my demo, when it loads, all three bands are animated and rotating, but once you start interacting with it, only two bands will ever be animated, whichever one you last touched will be draggable (and standing still, if you are not actively dragging it). * The onPress invokes a function on a parent component (that was passed down through props) to set the state of the parent component, which is keeping track of "which is the currently paused band?". That information is also passed down to all the bands via props, and they use that to know if they should be paused or not.

I just read this, and I don't think I fully understand the behavior you described, so I'm unsure if you need the onRelease callback. The important thing is that you create a new animation using a relative value.

Thanks Jack!

Hi and welcome to the GreenSock forums, I moved your post to a new topic. You had originally replied to a thread that was over a year old. In the future please post new topics unless your question is directly related to another recent discussion. I looked at your demo but had trouble understanding what it was supposed to do. Your demo only rendered a few black circles at the bottom of the screen and yet there was nearly 300 lines of js code. It would really help if you could produce a simplified demo that clearly illustrates how one simple element is supposed to transition through the first, second and third state. Perhaps once that works correctly you can implement it on more elements in your larger project. Please keep in mind that we really have to keep our support focused on the GSAP API. If there is a question about GSAP, let us know and we will be happy to help. It is another issue though to look at a complex project that we've never seen before and try to figure out what is wrong and how to fix it. That can take hours and that just isn't something we have the resources to accommodate.

Oh this time I'm really, really really tired... I was thinking the plugin was public, so yes I have the file ! But It's not 100% my fault, the directory "bonus-files-for-npm-users" let me think that contain file for node/npm only ^^ But you designate npm as package manager only ? That works really fine now, thanks and sorry for SPAM. My first "good" day here @Carl thanks for support everything is ok with my email/password and i will try to change email in months because It's my professional account

Hello @Sahil, many many apologizes for my late reply. I was not at home the last few days. You are right, I looked up the docs. I did not use mouseenter and mouseleave cause I thought they were pure jQuery related, but they are not obviously. Thank you so much for that hint. So they are safe and ready for use in production just because of you two guys Thanks!

Great example as always @OSUblake . I was wondering about one aspect of it, let me know if I'm understanding it correctly. if (!requestId){...} is throttling the animation of the tl's playhead to only execute when the browser is ready to paint a new frame so the scroll event listener doesn't fire the function too frequently?

You can go through following thread where I have explained how you can move points based on mouse position. Now think of those blobs made of points, you will have to keep track of their original position by creating array or by creating objects for those points. And then you can animate them using same calculation that I have explained. To reduced movement based on how far mouse is, you can take some large distance like a diagonal and compare it with current distance between mouse and original position to determine the movement. You can create it using canvas or svg, just minor difference in how you keep track of your points. You already have example with canvas, following is example by @OSUblake using svg. Once you have figured out how to do that using SVG, you can easily use your blobs for masking. You will just have to move your target element inside the mask. And no, if you replace those plus signs with circles, it will create cloud like shapes instead like blobs.

Oh, but they are. If you know what a percentage is, you're golden. What's 100% of 5? 5 What's 50% of 5? 2.5 What's 10% of 5? 0.5 That's a multiplier, and that's all I'm doing in with the durations in that thread, but I don't do ScrollMagic, so I can't give advice on how to convert it over. However, @PointC has a demo that might be useful.

Happy to help. I'm glad to hear things are starting to click for you. As long as you're having fun with each() loops, here's a bit more info. All the animations don't have to be the same. Sometimes you may want that, but you may also want some variety. You can still have each() do the heavy lifting for you. Using each element's index allows you to create different animations. Here's a version where you can use the index and each 'y' position animation is different. You can also create entire animations and/or properties in arrays and plug those into the tweens based on the index. Here's a version showing the basics of how that's done. Hopefully that gives you some more ideas about what can be done with loops. I'm glad you're now obsessed with GSAP and moving from lurker to a more active status. It really does get more fun as you increase your forum participation. Have fun and happy tweening.

ha...that's great! So have I. Just don't steal my navigation for my website! LOL ?

This is an amazing thread. I've learned so much from going through all the examples. @PointC you are the goat.

The "?" and ":" are part of the ternary operator. It's basically a shorthand if/else // ternary tl.reversed() ? tl.play() : tl.reverse(); // if/else if ( tl.reversed() ) { tl.play(); } else { tl.reverse(); } More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator Calling the makeItWork() function twice isn't absolutely necessary. It's just a habit of mine. The jQuery hover() method is shorthand for mouseenter and mouseleave so it takes two handlers. In this particular case we want the same function called for both, but you may want different functions called for each event. I'm just in the habit of putting them both in even when they're the same, but in this case it would work fine with one. More info: https://api.jquery.com/hover/ Hopefully that helps. Happy tweening.

You should check out the examples i provided for the scrolling event. But for smooth scrolling you can try and use ScrollMagic, which is a scrolling management tool that uses GSAP as its animation platform. http://scrollmagic.io/ https://github.com/janpaepke/ScrollMagic Also @OSUblake did a simple scroll like magic with less bloat But some others in the forum might be willing to share there code of something similar