Leaderboard

Hi @Em Karimifar You should always let GSAP handle transformations you plan to animate. When you change the transform attribute, it's going to conflict with the matrix GSAP is going to set with the blinking. It's also going to mess up the transform origin. Is there a particular reason you're using text for circles? The alignment is a little funky. I would use regular circles, and wrap them in a <g> element. There's a problem with that animation. Depending on the screen dimensions, the eyes might move only a little bit, or too much. Assuming your SVG maintains the same aspect ratio, this version will clamp the eye movement on the x-axis to the width of the SVG, and the movement on the y-axis from 10% to 50% of the SVG height. And here's a good thread that shows how to work with mouse coordinates inside an SVG.

Hi, as @elegantseagulls mentions, performance in React is tied to the React side of the code and not how you create your GSAP animations. Resource demanding animations will create performance bottlenecks in Wordpress, Joomla, React, Angular, Vue, etc. same thing on the other side of the coin, a React app with poor performance does not depends on the animation side of it, regardless of the tool you use for that. The mantra around here is: test, test, test and then test again. So just jump into it and create your app and see how it goes. If you run into some issues, post back and we'll help you through. Happy Tweening!!!

We built our site (and others) in React (https://www.elegantseagulls.com/), and haven't run into any performance issues. There are a lot of variables that go into performance, so without seeing the setup it's tough to give a clear yes or no.

Yeah, just rotate the text.

If it's not going to change, I prefer to paste the SVG code into the HTML. Most code editors allow you to twirl it up and hide it while working so even if it's 100's of lines long, you don't have to stare at it as you scroll up and down your code. If it's dynamic and the needed SVG will depend on some user interaction, then yes, you'll probably want to inject it. It sounds like yours won't be changing though so I say paste it and call it a day. Just my two cents. YMMV.

Pasting the SVG code will work well. And if it's not a maintenance hassle, should give you better performance than an 'injector'.

Hi @zozo, the reason for this trouble is a clash between what is being set in CSS and what is being overridden (due to specificity). In the CSS you have .disk{ transform: translate(-50%, -50%) } Which of course is perfectly valid. But what happens when this is run ... tl.fromTo(".disk", 2, {rotation:0}, {rotation:360, ease:Linear.easeNone}); is that the transform matrix is taken over. So, to keep -50% and -50% in the calculations, you can just set those as properties in the fromTo and let the mediaQuery handle it from there, like so Hope this helps!

Hey all, I wanted to ask if anyone else was feeling intense pressure from outside your agency to switch from (I assume) either hand-coding or animate CC to using Google Web Designer. It seems as though, with the move away from the DoubleClick brand into a more holistic platform in DV360 that they're trying to force us to use their WYSIWYG animator instead of being free to author banner animations however we see fit. I've tried GWD in the beta about 4-5 years ago, and I hated it, I know its improved since then, but so have I and I feel so much more flexibility being able to write code from scratch.

@Carl Thankyou for your time. This is exactly what i want! I will remember this for the next times. Thankyou for your help!

Hi and welcome to the GreenSock forums. Thanks for the demo. Very helpful. Its a bit unorthodox to use the same tl variable for multiple things. It looks like you are assigning tl a value 3 times. Makes it a bit confusing. That aside, from what I understand if you want to play an animation when you click a button you just need to pause() the animation when you create it and then play() it when the button is clicked. to pause the timeline when its created you can do that in the constructor like so var tl1 = new TimelineMax({paused:true}); tl1.staggerFromTo('.overflow', 1, {opacity: 0, y: -350}, {opacity: 1, y: 0}, 0.05); in the demo below the red text will animate when you click the start button.

An easy way would be to put the images into the SVG and give them each a unique mask. This thread/topic has strayed pretty far from GSAP support. If you need general consulting or complete projects, you may not yet have seen GreenSock has a new Jobs and Freelance section. You may want to offer a gig over there. There are lots of talented people around here that may be available. https://greensock.com/forums/forum/15-jobs-freelance/ Happy tweening.

Yea, you might be right and it is just a marketing effort, I feel like there has been definitely a push and promotion of GWD as the recommended tool when authoring banners for Google platforms, during their recent efforts in GMP launch days etc.

@OSUblake Awesome! exactly what I was looking for! Thanks a lot

Ok, all working now. Thanks again for your help, Jack. Another shoutout to Jack and team for such an awesome library!

Yep, here's an effect using a uniform wiggle: You can easily tweak things like timing, number of wiggles, etc. Some other CustomWiggle demos that might be useful: If you don't want to use CustomWiggle, you could loop through some random values oscillating back and forth, but that's a bit more cumbersome. Is that what you're looking for?

There's no need to do anything special - GSAP was designed to clean up after itself and remove internal references to animations after they're complete so that they're available for garbage collection.

Stop setting transforms in your CSS for stuff that you plan to animate. That includes dragging.

I assume you meant something like this, right?: Happy tweening

Yep, I'd agree with @OSUblake. Technically, though, I personally favor CustomEase when creating very nuanced movements because (at least in my experience) when I try to recreate an effect using a bunch of sequenced to() values it just doesn't quite feel as fluid. That's not because of anything in GSAP - it's just the nature of the beast. Like I've seen lots of attempts at doing an Elastic.easeOut or a realistic bounce with squash/stretch using straight-up CSS keyframes and it looked really weird. With CustomEase, it felt natural. In terms of raw runtime performance, the CustomEase one is likely the best but there's a bit more up-front work to create the ease itself and cache the values. Once they're built, though, it's very fast to actually get/set the values during the tween. I optimized the snot out of it Again, performance-wise I doubt you're gonna notice any real-world difference in any of them. Rendering performance in the browser is typically 99%+ of the load on the browser especially with SVG. Happy tweening!

Wait I thought xPercent was equivalent of translate and that GSAP will take in account any prior CSS declarations. But in OP's example I noticed that GSAP would calculate translate in matrix and would reset the position of element using xPercent, so if you resize the element will just get offset from the expected position. So I tried to add translate plus default matrix to css declaration to FORCE gsap to calculate from it's current position and not reposition element in matrix but it behaves same. Personally I would expect GSAP to respect my css declarations because in practical use, I will want my element to stay hidden while scripts are loading. Here is how I would get around it by animating x to zero along with xPercent so I will be able to hide elements using CSS.