Leaderboard

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.

I don't know about cdnjs, but you can get the latest version on jsdelivr like this... https://cdn.jsdelivr.net/npm/gsap@latest and on unpkg like this... https://unpkg.com/gsap Just note that it's probably not a good idea to use a "latest" version with production code as it could break in the future.

Generally, I will use GSAP to set() almost every property that I plan to animate. It's easier for me to do that instead of looking through a lengthy stylesheet. Plus you'll never have any conflicts. Of course, there are many properties that will never be animated and I always leave those in the CSS. Happy tweening.

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!!

Hi and welcome to the GreenSock forums, I don't use React at all so I'm not sure how to help with this. We really try to keep our support focused on the GSAP API. In most cases I would recommend that you focus on the animation you want to achieve and then later on add the additional complexity of whatever framework you are integrating with. Rather than killing a tween I'd like to have it still visible and clickable which would start the slide and expand animation. Not sure what you are getting at here. Tweens aren't visible or clickable, I'm guessing you are referring to the elements you are animating. Without knowing more I would suggest that you don't animate the opacity or change the visibility of the thing you want to move and click. GSAP does not hide things when tweens are killed. I'm not really sure what type of advice you are looking for to help you get the demo you posted closer to the video you shared. Do you have a specific question related to GSAP? Is there another demo you can share that is closer to the result you are looking to achieve?

On second thought, it does look like you were able to log in - Its a bit early in the morning here. Just to be clear, Draggable is in the utils folder and ThrowPropsPlugin is in the plugins folder

Hi WebDynamix, I sent you an email yesterday explaining how to log in with your new password. I did not get a reply. We checked out server records and confirmed your account is set up properly and that multiple activation emails were sent to your original address. I am worried that emails from greensock are not getting to you. Please check your spam folders and make sure the greensock.com domain is whitelisted in your email app and on your mail servers. We definitely want to help you get things sorted.

Hi @WebDynamix, Thanks for getting Club membership. We would be happy to help. Are you saying you downloaded files but it doesn't have ThrowProps Plugin? Please visit your Dashboard, there you will find links to download files as per your membership. In your case you will need to download "GSAP with Shockingly Green bonus". And sorry that you are facing issues, rest of our team is from USA, they will look into it once they get online.

Okay - those examples are both using canvas. The website you referenced is using SVGs and morphing so I'm still unclear on the effect you're after here. But it looks like you found a couple pens that should get you started and keep you busy. If you have GSAP related problems or questions as you progress, we're happy to help. Happy tweening.

Hi @liamb Welcome to the forum. It looks like they have a handleMorph() function which is cycling the morph between 3 shapes. They also have a registerMorphMove() function that grabs the mouse position and changes the scale, rotation, x and y positions of the morph mask in response. That's how they get the nice fluid feel to everything. I'm not sure I follow exactly what you're asking. Are you asking how to set up a SVG mask? Or is it more about the morph and the mousemove event and handler? Happy tweening.

Another benefit to JS GSAP setting up styles, I often have an initialization function that sets everything in the beginning. If I need to call that function again, it is quite easy to 'reset' everything on the fly. In CSS, I don't even know how you can truly 'start over' during runtime. Thanks!

Looks good! You can do this instead of using bind if you're using Babel or TypeScript. I think it's cleaner, and it should technically run faster. class ScrollAnimations { constructor() { // 'this' will work without the use of bind this.el.addEventListener('scroll', this.onScroll, false) this.rAF = requestAnimationFrame(this.run) } onScroll = () => { ... } run = () => { ... } } And here's a simple of example of how you can use the scroll position with a timeline.

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.

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!

It depends on what you're creating. If it's just a few tweens on a timeline, then returning the timeline from a function may be a bit of overkill. The biggest advantage to creating timelines in functions is that it's modular. It's quick and easy to make changes and you aren't buried in a wall of code. Check out this article by @Carl for more in-depth information. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.

I am experiencing a bug in a larger project so I made a codepen to hopefully highlight my problem. I have a div wrapped inside an outer container div. In CSS, I want to hide the container with display:none, and I want to shrink the inner div to 0.5 scale. Then in GSAP, I want to show the container by setting it back to 'block', and have the inner container realign via a from tween. But when I combine a display toggle, with a scale, with a FROM tween, the scale of my inner div gets ignored. I can't seem to work through the logic on why this is? If I don't start with display:none in my CSS, the .05 scale is correct. OR if I change my last tween from a FROM to a TO, the 0.5 scale is also correct. But a FROM tween on the 'x' position causes the 'scale' to be ignored/dropped/overwritten? the JS code copied here for a quick glance: var tl = new TimelineMax(); tl.to('#outer', 1, {x:100, display:'block'}); tl.from('#inner', 1, {x:100}); (I know there are other ways to hide a div until you are ready to show it, like alpha, opacity, autoAlpha, but in this particular case, is this a bug or just a conflict in the way I am approaching it?)

Great suggestion, PointC. Jimmi, The reason for this is because some browsers will not report transforms when they are inside a parent with display:none or perhaps they themselves have display:none. Please see this demo below in a webkit browser and open up the console. You will see no style.transform reported. If you remove display:none from the #wrapper rule, then it will work.

Have you tried using GSAP to set the scale? TweenMax.set("#inner", {scale:0.5}); Does that help? Happy tweening.

Here's a helper function to respond to media queries. function installMediaQueryWatcher(mediaQuery, layoutChangedCallback) { var mql = window.matchMedia(mediaQuery); mql.addListener(function (e) { return layoutChangedCallback(e.matches); }); layoutChangedCallback(mql.matches); } Example usage... installMediaQueryWatcher("(min-width: 600px)", function(matches) { if (matches) { TweenMax.to(".red", 1, { x: 200 }); TweenMax.to(".blue", 1, { x: 0 }); } else { TweenMax.to(".red", 1, { x: 0 }); TweenMax.to(".blue", 1, { x: 200 }); } });

Happy to help. That's how we roll in the GreenSock neighborhood. Let us know if you have any more GSAP problems or questions. We're here to help. Happy tweening.

@iuscare Actually mouseover and mouseout bubbles so every time you mouse over or out on child elements it will trigger your event listener on parent. Instead mouseenter and mouseleave do not bubble so if you move your mouse on child elements, it won't trigger the event.

Hi CarpeDiem You can use that shape as a mask or a clip-path. Here's a pen I made a while back to demonstrate basic usage of a mask in SVGs. http://codepen.io/PointC/pen/KzmXYK That should get you started in the right direction. Happy tweening.