Popular Content

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

  1. 7 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. 6 points
    This is what happens when you tell CSS and JavaScript to animate the same thing.
  3. 6 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.
  4. 5 points
    Hi, like this ... Happy tweening ... Mikel
  5. 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.
  6. 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.
  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. 4 points
    svgOrigin doesn't support percentages. It needs pixel based values. In your case you'd want the center of your SVG. svgOrigin: '37.5 37.5' Does that make sense? Happy tweening.
  10. 4 points
    Hi @flowen As @mikel mentioned, you need a stroke for DrawSVG to work its magic. Handwriting is a bit tricky to get right as you need an open path. I wrote a couple posts about the technique. Maybe you'll find some of the information to be useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Hopefully that helps. Happy tweening.
  11. 4 points
    Yes, the site you referenced is using TweenMax. The demo @mikel gave you is a fantastic starting point... if not an end point of what you need to do. GSAP is an animation engine, which means you are still required to write code to tell it what to do, as such it is virtually limitless in its flexibility and complexity of use. Its not like fancybox or some jqueryplugin that automagically takes a few DOM elements and spits out a fully functional widget or slideshow for you. Reading the getting started article should definitely help explain how it works.
  12. 4 points
    Hi @Tompy and Welcome to the GreenSock Forum! I'm glad you got it sorted, let us know if you have any additional help. Happy Tweening!
  13. 4 points
    I'm not sure if there is a question here. Your pen is using jQuery to toggle classes and CSS transitions. Are you asking how to do the same thing with GSAP? You can toggle classes or you could just animate the x position of those elements If you're just getting started with GSAP, I'd recommend the learning section here: https://greensock.com/learning Happy tweening.
  14. 4 points
    Hi @sudarat, Less refined, not fully flexible and not perfectly calculated ... Here just a simple starter kit: good luck ... Mikel
  15. 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.
  16. 4 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?
  17. 4 points
    @Devotee007 Not really GSAP issue, it was because your container didn't have position.
  18. 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
  19. 3 points
    GSAP has quite literally changed my life (for the better). Thanks @GreenSock! Awesome post, @PointC!
  20. 3 points
    Great explanation. It all makes perfect sense now. Thanks very much. I'll do the separate tween thing. GSAP is fantastic.
  21. 3 points
    Not that there's anything wrong with using the pathDataToBezier() method for what you're doing there, but I just wanted to point out the svgOrigin property in case you weren't familiar with it. For orbits like that, it's a handy feature. More info. https://greensock.com/svg-tips Happy tweening.
  22. 3 points
    I think this is what you meant to do, right? It looks like you were creating some fromTo() tweens (which have immediateRender:true by default) and THEN running the pathDataToBezier() and aligning things in that different position. It was a timing issue. I reorganized things to run that initially, and set the xPercent/yPercent/transformOrigin on the necessary elements. Make sense?
  23. 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.
  24. 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.
  25. 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.
  • Newsletter

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

    Sign Up