Leaderboard

Hi @greentoe GreenSock's JavaScript files do not track users, nor do they employ any type of cookies. Cloudfare hosts the most popular JavaScript libraries, on a free, public CDN. GreenSock has nothing to do with that, other than being popular. Does Cloudfare use cookies? Yes. Are all cookies bad? No. Cloudfare uses cookies for security purposes and they cannot be disabled. Privacy Badger is complaining about the cfduid cookie. https://support.cloudflare.com/hc/en-us/articles/200170156-What-does-the-Cloudflare-cfduid-cookie-do- https://support.cloudflare.com/hc/en-us/articles/200169506-Can-I-disable-Cloudflare-cookies- If that's still issue for you, you can use your own self hosted GreenSock files instead of Cloudfare. I would ask whoever created your theme on how to do that. It shouldn't be too hard. I'm not familiar with Wordpress, so I really can't advise on that.

Seconding what @Carl said! Tip: It might be helpful to use labels to your timeline to sync up your animations and avoid overwriting/overlapping timelines (https://greensock.com/docs/TimelineLite/addLabel()). Using labels makes it so you don't have to add a negative delay to start two+ tweens at the same time, and it will make your synced up tweens/delays much easier to read.

Hi and welcome to the GreenSock forums, Thanks for the demo. Its very helpful but in the future please make some effort to reduce it to the bare amount of code. Right now the duration is 30 seconds long. Fortunately we can speed it up with timeScale() but if you can get the problem to occur with 2 messages that's fine. We don't need to see all the messages. When you have an animation that doesn't play the same on multiple iterations it is usually due to overlapping tweens causing an overwrite. You were using negative position parameters on the ball tweens which means a new ball tween was starting while another was playing. Since the ball tweens are the issue you can set overwrite:"none" on them To test if an overwrite is the problem, you can add this to your code: TweenLite.onOverwrite = function() { console.log("overwrite") } More info on overwriting can be found here: https://greensock.com/docs/TweenLite/static.onOverwrite Also, I noticed you have onComplete callback set on your timeline. Timelines that repeat infinitely (repeat:-1) will never complete.

I got the same result using vanilla JS, but I don't know if it is a bug. @GreenSock will have to verify that one. I wouldn't expect it to work because you're trying to animate objects with different types in the same tween. Elements will use the CSSPlugin to set x, while a regular JavaScript object doesn't need any plugins. I've accidentally done that a few times in the past, and I've learned that it's best not to mix different object types.

Hi @svyar Your coordinates were out of bounds, but it looks like you were able to figure it out. Not sure what type of effect you were going for, but you might be able to learn from this.

Oh, and by the way, that codepen by Sarah Drasner wasn't working properly because it was using a really old version of GSAP that didn't support complex string parsing. If you update to 2.0.2 you'll see that it works fine.

Can you provide a simplified CodePen demo for this? It's much easier to see what's going if we have some code to interact with.

Welcome to the forums, @jo87casi. It'd would be super amazingly helpful if you provided a codepen that showed a reduced test case. I know you provided one from Sarah Drasner, but that wasn't exactly what you're doing, right? It's just really difficult to troubleshoot blind. It'd be best/easiest if your animating element was in the same SVG as the motion path so that everything scales together. If not, you're gonna have to write CSS and/or JS to ensure that they scale in identical ways. Remember that the path coordinates are fixed values, so you can't expect them all to dynamically shift around based on scaling, so it'd be best to just make sure that transforms are applied to the container in exactly the way you'd do with the motion path. See what I mean? Also, I noticed you're using MorphSVGPlugin but it doesn't look like you've got a Club GreenSock membership - are you just trying it out on codepen or something? If so, that's totally fine. Just curious.

Yeah, I can totally see why you'd think this is a bug and I suppose it sort of is, but one could argue that it's a bug when it DOES work As @OSUblake said, you're doing something very unusual here in that you're animating completely different types of objects, but remember that technically in order to animate CSS properties you've got to define them in a "css:{}" object so that CSSPlugin takes control of those. However, there's an "autoCSS" feature that senses when the target is a DOM element and then it automatically creates and wraps those "css:{}" values for you (to minimize typing...it's a convenience, as it's so incredibly popular to animate CSS on DOM elements). In your demo, if you had the plain object AFTER a DOM element, what was happening is that GSAP noticed the DOM element and pushed the "x" value into a "css:{}" object as a convenience, so your vars looked like this: {css:{x:200}} Thus by the time it go to the standard object it was trying to animate CSS properties of a plain object (doesn't make sense). Of course a solution for us would be to never edit the original vars object (create a copy for each and every target), but GSAP is HYPER optimized for speed an minimal memory consumption, so that was a design decision we made. A solution would be to keep your arrays homogenous (don't mix plain objects with selector text or DOM elements), or you could technically define BOTH values x: and css:{x:} like this: TweenMax.fromTo([ this.$refs.circle, this.$refs.triangle, this.$data ], 1, { x: 0, css:{x:0} }, { x: 200, css:{x:200} }); But that seems a bit odd to me readability-wise. My personal preference would be to use a different tween for the generic object. Does that help?

Thanks for the responses. I'm excited to learn more about React as there is a lot a like about it. Just wanted to make sure it and GSAP played nicely together before I become too invested. Thanks again.

It's in @Rodrigo's signature, but in case you missed it: His GSAP & React - Getting Started blog is helpful when learning too: https://greensock.com/react

@Devotee007 Not really GSAP issue, it was because your container didn't have position.

@somose138 I don't have any experience with react. Though @Rodrigo has written a guest blog post on how to use GSAP with react. I am sure you will find it helpful. https://greensock.com/react

Wow! That was fast! Thank you very much for your eye opening answer.

@PointC You are a star! Is quite your fault to be honest, you push me to far with your suggestions and I get to try to make thing to big for me! But I'm learning and I learned a lot from you! Thanks, for your support and 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.

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

Hi all, I've tried to find if anything like this has been asked on the forum before but wasn't able to find anything--I hope to benefit from everyone's expertise here! I'm using a WordPress theme called Border by Pixelgrade for an art website, and it uses TweenMax and TimeLineLite for some of the theme's animation work. When I (and visitors) visit the site, my browser's privacy add-on shows that there is one tracker active on the site, namely the GSAP libraries being loaded from CloudFlare. (See attachment.) Is there anything I can do about that? (I have tried to figure out if I can self-host the two JavaScripts on the shared hosting platform that I use, but it appears beyond my technical abilities to do so.) If there isn't something I can do about but to keep loading it from CloudFlare, how can I find out what kind of tracking GreenSock and/or CloudFlare employ? Is there an attempt to place cookies? What information is being collected about my website visitors? What happens with this information? I wasn't able to find any such privacy-related information on the GSAP website or forums. As many of you I'm sure have seen, European data protection regulations prescribe an approach to data collection that is both minimalistic and transparent. I have to and want to abide by these regulations, and as such I'm trying to either disable all tracking, or fully inform my website visitors in cases where I can't. Many thanks in advance for your help! Greentoe

Is there some reason you can't put the SVGs into the same wrapper like this?:

To use Draggable with Angular 6 you might need to install types from green sock npm install --save-dev @types/greensock And in component import Draggable as import { Draggable } from "gsap/all";

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.

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.

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.

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

Not sure if this helps, but my Studio Dynamic has URLs based on geo, and they are in the Google Sheet imported into Studio.

Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!