Popular Content

Showing content with the highest reputation since 10/15/2018 in Posts

  1. 6 points
    Hey fellow GreenSockers, I just wanted to give a big thanks and shout-out to Jack for creating and maintaining the amazing GSAP for us. I know he likes to thank the moderators for volunteering our time in the forum, but we need to send that thank you and positive energy back to the top too. I can’t imagine how I would accomplish my web animations without GSAP. Most of this stuff would be super difficult with plain JS and virtually impossible with **shudder** CSS animations. To illustrate my point, here’s the shameless self-promotion part. My recent demo (4 smashed into one actually) included a rolling square on one menu. As I was working on it, I wondered how I would even roll a square without smoothOrigin? If you could somehow make it work, it wouldn’t be easy. And that feature is just baked into the cake with GSAP! It’s crazy how much use I get out of the DrawSVG plugin too. No getTotalLength() browser inconsistencies. I just calculate some percentages, drop in a couple tweens and I’m done. With the core tools and amazing plugins, how can anyone look at this platform and not immediately join Club GreenSock? It’s astounding how much faster and easier the work is with GSAP. Not to mention that it’s so much fun. The web truly is a more interesting (& animated) place because of GreenSock. Thanks for being awesome Jack!
  2. 5 points
    Hi, like this ... Happy tweening ... Mikel
  3. 5 points
    @Hector18 Is this what you'd be looking for? I simplified the animation to use StaggerTo as well, so that you could see that functionality.
  4. 5 points
    This is what happens when you tell CSS and JavaScript to animate the same thing.
  5. 5 points
    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.
  6. 5 points
    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.
  7. 5 points
    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.
  8. 5 points
    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.
  9. 5 points
    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!!!
  10. 4 points
    Hi @sudarat, Less refined, not fully flexible and not perfectly calculated ... Here just a simple starter kit: good luck ... Mikel
  11. 4 points
    Hi Sudurat, Welcome to the GreenSock forums. Its very difficult to give general advice on responsive UI animations like that without having some understanding of your level of experience and what you have tried. This is why CodePen is so helpful, it gives us a clear starting point in directing you. I think CodePen is working fine, so its probably best to give it another shot. Directions on using GSAP with CodePen can be found here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ The first thing that comes to mind when seeing the site you referenced is this pen by @OSUblake Click the small squares: That isn't something a beginner is going to build out on there own very quickly and it will probably require a solid foundation of CSS / HTML / JavaScript. Getting it to work right makes use of the FLIP (first, last, invert, play) technique which on its own requires reading a few blog posts. The GreenSock part of it is actually quite small. I would strongly suggest you start with a very basic CodePen and get something to animate and grow when you click it. From there perhaps we can give some suggestions on what to do next or help you if you get stuck with that. Unfortunately we don't have the resources to give a lot of general web development advice or walk you though building complex UI interactions. We are happy to help with any questions related to GreenSock, of course.
  12. 4 points
    @Devotee007 Not really GSAP issue, it was because your container didn't have position.
  13. 4 points
    @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
  14. 4 points
    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.
  15. 4 points
    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.
  16. 3 points
    Probably not. If you can't change the markup, then you're going to have to manually calculate the scroll amount.
  17. 3 points
    It looks like the problem is that you've got CSS transitions applied. So every time GSAP changes a property, CSS transitions say "wait! don't do that yet...I'll take 2 seconds and animate those in". So GSAP was doing exactly what you told it to do, and the onComplete was firing appropriately...but your CSS transitions were taking another 2 seconds after that. See what I mean? I'd strongly recommend avoiding CSS transitions/animations if you're going to use GSAP to animate things.
  18. 3 points
    I was a little confused about the end result here too. Most of the time you'll probably want one SVG for your animations like this. If you have multiple elements that interact with each other, it makes everything pretty simple and scales together nicely. That's not to say you can't make things work with multiple SVGs, but there aren't too many cases when it's necessary. Just my two cents. YMMV. Happy tweening @jo87casi and welcome to the forum.
  19. 3 points
    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?
  20. 3 points
    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.
  21. 3 points
    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.
  22. 3 points
    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.
  23. 3 points
    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.
  24. 3 points
    Pasting the SVG code will work well. And if it's not a maintenance hassle, should give you better performance than an 'injector'.
  25. 3 points
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up