Leaderboard

A physics engine usually just calculates stuff for you. How stuff gets rendered is entirely up to you. The reason you see canvas being used is because it's very fast and has very little overhead. If you were to use SVG or HTML with a physics engine, there's a good chance that it might not run that well. The simplest solution might be animating the control points on a curve. This thread is a good place to start.

There is a difference between TimelineLite and TimelineMax. From the docs: TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), addCallback(), removeCallback(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future). More info: https://greensock.com/docs/TimelineLite https://greensock.com/docs/TimelineMax A timeline is a container for tweens and other timelines. If you have several tweens that you want to sequence, a timeline is the way to go. If you just have a few tweens that you want to start at the same time, you may want to just use tweens. It's really dependent on what you're creating and how you want to control it. Happy tweening.

If I understand your questions correctly, I would think a delayedCall would work well. Does that help? Happy tweening.

It's ok that you're new. Everyone needs to start somewhere. This project may just be a bit ambitious at the moment. I always suggest starting slow and taking small steps. I looked over the demo a few times and I really don't think its something I'm able to decipher and fix, however I have one suggestion. I see a few cases where you are using "-=1" as the position parameter on the first tween in a timeline var timeline3 = new TimelineLite() .to('.eqz', 1, { transform: "scale(3)", ease: Power4.easeNone }, "-=1") .to('.againME', 0.5, { autoAlpha: 1 }, "+=1") .reverse(); That isn't good as it tells that tween to be placed at a time of -1. I think you mean to use "+=1" or no position parameter at all (same as 0).

No canvas?? I'm surprised @OSUblake didn't write up a 17 paragraph lecture about the awesomeness of canvas and post 29 of his demos as proof. ? If you do want to see cool canvas demos, check out Blake's CodePen profile. His work is amazing and educational. https://codepen.io/osublake/ Happy tweening. PS @WILDmonkeyDESIGN Welcome to the forum and thanks for joining Club GreenSock.

Thanks Craig. I really like what you did with the image morph, so I'm going to see if I can't get to grips with that and look at tweaking the design accordingly.

Thanks for the demo. Its always good to work with a reduced test case, so I removed all the extraneous stuff. I'm able to see that on initial page load, sometimes, you will see a big black bar (as if the image is being pushed down), however when you press the "run" button in codepen it renders correctly (small, equal height bars on top and bottom of image). Still looking into why this is happening. As for your flare, isn't that just part of the image? https://greensock.d.pr/USv5cV

ahh... o.k. I thought that was a bit odd clicking a close button and adding a delay. I get it now. In that case, I would just add that delayed call to the #ylw-btn handler and set the delay equal to the tl.duration() + 5. Something like this maybe. Does that help? Happy tweening.

How about this? Is that what you needed? Happy tweening.

Compressing images usually has the biggest effect on file size. There are 2 sites that can compress PNG's really well. I find the easiest way to compress JPGs is to do it right within Photoshop. www.tinypng.com www.compresspng.com TinyPng is really easy to use, just drag and drop your PNG files and download the compressed version. There's also a paid Photoshop plugin so you can export the compressed PNG's without opening a browser. CompressPng gives you more granular control over how many colours to include in the image.

Sorry, TextPlugin is for DOM elements but fabric.js is a totally different beast (canvas). They're not compatible.

You're welcome. Keep in mind that using React Router will show only one image at the time unless you mimic this code: https://reacttraining.com/react-router/web/example/modal-gallery At that point you'll have to update all the images positions and start mounting and unmounting components before starting the animation and it could get a little messy. My advice would be to create the gallery similar to the demo I made and wrap that in a <Route> tag, like that you'll be able to check the location object from the API and update the image based on that. That will also allow users to bookmark the URL of a specific image. Happy Tweening!!

In terms of the license, it sounds like you'd probably need a "Business Green" one. If it's only you who ever touches GSAP-related code, then you're fine with a 1-developer license. Or if you've got others who will use GSAP, snag the appropriate multi-developer one (up to 5 developers, or up to 20 developers). If you never resell stuff to multiple clients, you don't technically need any special commercial license. Thanks for caring enough to ask. Let us know if you need anything else. Happy tweening!

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

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

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?