Jump to content

GreenSock last won the day on May 20

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on May 20

GreenSock had the most liked content!

Community Reputation

7,658 Superhero

About GreenSock

Contact Methods

Profile Information

  • Gender
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

47,573 profile views
  1. GreenSock

    wiggle path of SVG

    Looks like setting start:0 and taperStart:0 improves things, right @mikel?
  2. Oddly enough, I think it's actually doing precisely what it's supposed to be doing. Whenever GSAP senses an HSL value, it switches to animate in HSL so that it can keep those values "pure" (if you animate HSL values in an RGB way, it looks very different and is typically undesirable). But of course those animate around the color wheel differently (it's NOT just taking the red, green, and blue and animating those linearly). Again, this is all by design. Here's a demo that shows the HSL values and then their converted RGB counterparts: https://codepen.io/GreenSock/pen/67ccc31471f41af5a36d3a7b9d209a75?editors=0010 (Crack open the console to see). It's using ModifiersPlugin to just intercept things just before they're applied. See what's happening? The HSL values are indeed animating exactly as they should, and then the browser converts them back to RGB which is fine. Again, this is merely a side effect of how HSL values animate compared to RGB. Does that clear things up? If you don't want to animate things in HSL, you could convert them into RGB before feeding them into the tween. This page might be useful: https://css-tricks.com/converting-color-spaces-in-javascript/
  3. I don't really have time to pull it all apart, but I don't see anything obviously "wrong". You might want to try removing the canvas stuff (just for testing), especially the globalCompositeOperation = 'lighter'. It also looke like you've got a bunch of calls to particleTwo() and some drawing stuff that might be slightly problematic (not sure). I'd be curious about removing your calls to drawTwo() just to see how that affects things.
  4. Sorry to hear about the trouble, @Bradley Lancaster. I don't have any specific tools outside Chrome's dev tools and watching the frame rate and I think there are some CPU usage things there too, but it's tied to your particular system. In other words, it might be 8% on your powerful system, but on a cheap phone it's 90%. It's all relative. I'm curious - do your banners use SVG? That can be pretty CPU-intensive to render.
  5. Yep, it's an optimization based on whether or not there are multiple targets. Glad things are working well in the new version. Cheers!
  6. Ah, very interesting. Good catch. It looks like those two values are inverted. I can update the next release which you can preview (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js In the mean time, you could edit the TweenLite.prototype like this: TweenLite.prototype.invalidate = function() { if (this._notifyPluginsOfEnabled) { TweenLite._onPluginEvent("_onDisable", this); } var t = this._time; this._firstPT = this._overwrittenProps = this._startAt = this._onUpdate = null; this._notifyPluginsOfEnabled = this._active = this._lazy = false; this._propLookup = (this._targets) ? [] : {}; com.greensock.core.Animation.prototype.invalidate.call(this); if (this.vars.immediateRender) { this._time = -0.00000001; this.render(t, false, this.vars.lazy !== false); } return this; } Just drop this in once after you load GSAP and it should resolve things. Thanks again for the reduced test case. Very helpful!
  7. I'm not a React guy (@Rodrigo is our resident expert, and he authored that article you linked to), but my guess is that your problem is that you're creating the tween in the componentDidMount(), but then you're playing that same tween again and again in the componentDidUpdate() method. Remember, the first time a tween renders, it internally records the starting/ending values so that it can very efficiently interpolate on each "tick". Your updates are having no effect. Instead of just play()-ing that same tween instance in your componentDidUpdate(), I'd create a new one and feed in the new x/y values. The new tween will overwrite the old one anyway. Does that help at all? If you're still having trouble, it'd help a lot if you provide a reduced test case in codepen or stackblitz or something like that. Happy tweening!
  8. I'm having a very difficult time understanding your question. Your example code assigns the same timeline instance to a bunch of objects in a "car" array. Literally, they're all pointing to ONE timeline instance. Perhaps that's a problem (I have no idea because I don't know what you're trying to do). Your second example code just has several to() calls and the position parameter isn't used, so they're sequenced by default (one-after-the-other). If you want to position them so that they all start at the same time in the timeline, then simply use the position parameter to define the time you want them to start. For example: tl.to(obj, 1, {x:100}, 0); //<- the last parameter, 0, is the position. tl.to(obj2, 1, {y:100}, 0) ... If you still need help, please provide more details about what you're looking to do and/or provide a codepen demo. It's very difficult to troubleshoot based on a small excerpt of code pasted in here. I'd really like to help you, but I'm not sure how because I don't understand what you're asking.
  9. Here's a fork: https://codepen.io/GreenSock/pen/56d8637f74c4afdc9fd02829b15682e3?editors=0010 Is that what you were looking for? (well, I tweaked the timing a bit and added a "y" tween just for fun).
  10. Howdy, @DeltaFrog. Yeah, if I understand your goal correctly, it should be pretty easy with SplitText. All you've gotta do is load the SplitText file (and GSAP, like maybe the TweenMax.min.js file) and write your animation code in a <script> tag. Does that answer your question? Is there something in particular you needed help with (GSAP-related)?
  11. Cool animations, @Killerwork! The CPU problem is likely caused by the complexity of the SVG and how much work it is for the browser to render all those pixels, especially on Apple devices that have super high-resolution screens. The great thing about SVG is that it's resolution-independent...but that's also the BAD thing about it. The device must fabricate all those pixels dynamically. Some of the toughest things to render in SVG are gradients, clipping paths, and strokes. You've got all of those going on. To be clear, this probably has nothing to do with GSAP. I'd guess that all of GSAP's work accounts for less than 2% of the CPU load. If you need better performance, you may need to switch to <canvas> or swap some of the more complex graphics out for raster (pixel) images. I wish I had a simple setting that'd suddenly cause everything to render silky-smooth on all devices.
  12. Glad you figured it out. Yeah, CustomEase is a perk for folks who set up a (free) GreenSock account. It helps us foster connection with our users. Hopefully it's clear that we value community around here - it's one of the things that sets GreenSock apart. Happy tweening!
  13. Welcome to the forums, @PIBC-QingYe. I didn't quite understand your question. Are you trying to understand how to control when each timeline plays inside of a master timeline? The position parameter is the key. See https://greensock.com/position-parameter You can have total control of exactly when things play. Overlap as much or as little as you want. If you still need help, please provide a reduced test case in codepen so we can see what's going on in context. If you're not sure how to do that, see Happy tweening!
  14. Great. Hang in there through the learning curve - you'll be glad you did. Trust me - it'll "click" at some point and you'll be like "oh, this makes a lot of sense now." Enjoy!
  15. Welcome to the forums, @mosk. And thanks for being a Club GreenSock member! There are actually a lot of ways to accomplish this. You don't need a loop at all. Here's one way to do it: https://codepen.io/GreenSock/pen/11be77c0a93fbec853c7692a96b19985?editors=0010 The pertinent code: var mySteps = 7, durationPerStep = 1, pixelsPerStep = 200, tl = new TimelineLite(); tl.to("#square", durationPerStep * mySteps, {x:pixelsPerStep*mySteps, ease:SteppedEase.config(mySteps)}) .to("#square", durationPerStep * mySteps, {y:pixelsPerStep*mySteps, ease:SteppedEase.config(mySteps)}, durationPerStep / 2); Does that help?