GreenSock last won the day on July 7

GreenSock had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on July 7

GreenSock had the most liked content!

Community Reputation

6,103 Superhero

About GreenSock

  • Rank

Contact Methods

Profile Information

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

Recent Profile Visitors

45,606 profile views
  1. GreenSock

    Interpolating using staggerTo: from one array w/ values to the next

    Since staggers expect the first parameter to be an array of targets, you've gotta handle things a bit differently. I whipped together a "staggerArray()" helper function for you (customize as you see fit): var a = [0, 0, 0, 0]; staggerArray(a, [10,20,30,40], {duration:1, stagger:0.5, round:true}); //vars accepts: duration, stagger, round, as well as any typical vars for TimelineMax (like onComplete, onUpdate, repeat, yoyo, etc.) function staggerArray(start, end, vars) { var tl = new TimelineMax(vars), proxy = {}, duration = vars.duration || 0, stagger = vars.stagger || 0, proxyUpdate = function(original, proxy, i) { return function() { original[i] = proxy[i]; }; }, v, i; for (i = 0; i < start.length; i++) { proxy[i] = start[i]; v = {}; v[i] = end[i]; v.onUpdate = proxyUpdate(start, proxy, i); if (vars.round) { v.roundProps = i + ""; }, duration, v, stagger * i); } return tl; } Here it is in action: Does that help?
  2. GreenSock

    MorphSVGPlugin Uncaught Error: Mismatched anonymous define

    Ha, that was a fun read. Glad you figured it out, and thanks for reporting back. I know what it's like to have those "don't punch the screen" reminder moments Happy tweening!
  3. GreenSock

    Reset state of elements to before .addPause() is triggered

    Is there any way you could create a more reduced test case without all the steps necessary? I tried clicking on the "This triggers the alert overlay" button and immediately got a JavaScript error: Same thing when I click on the perimeter overlay button. Maybe I'm totally misunderstanding the directions. I read your question about 4 times and it's still pretty fuzzy to me what exactly you want to happen or how that corresponds to the 60-ish lines of code. It looks like you've embedded a function call into your timeline, and that function creates a whole new/different timeline that infinitely repeats. So every time you play that first timeline again, it's triggering that function call which creates another timeline again...and again...(each time) and you're likely getting overwriting or odd starting positions based on the timing of clicks. That's not a problem with GSAP, though - that'd be just a logic issue in the code. For example, if the infinitely repeating animation is halfway through one of its iterations when that function gets called and the [redundant] animation is created, it'd start from the current values at that time (which are halfway through an iteration). See what I mean? Just looking at the code, I get the strong impression that there are just some logic issues and there's likely a much cleaner way to structure your animation logic but I'm not entirely sure how to advise you because I don't understand all the goals and requirements. Again, a very simplified example of just a part of this would be super helpful, and then you can build up from there. In other words, try baby steps first rather than attempting to wedge every ounce of functionality into the logic in the first place.
  4. GreenSock

    Reset state of elements to before .addPause() is triggered

    Ironically, the "/latest/" CDN link you're using,, is really old. CDNJS dropped support for "latest" years ago, so it's way out of date. Please use the most recent version, 2.0.1. I'm running out the door, so I don't have time to wrap my head around all the steps and what might be happening, but I figured I'd tell you about the version thing and see if you can give that a shot and let us know if you still run into the problem.
  5. GreenSock

    MorphSVGPlugin Uncaught Error: Mismatched anonymous define

    First of all, thanks for being "Shockingly Green" Welcome to the forums. I don't think I've ever seen that error before. Hm. Can you post a reduced test case that demonstrates the issue so that we can see it in context? Sounds like a RequireJS thing. Which MorphSVGPlugin file are you using - the ES module or the standard ES5 one? (which directory did you take it from?)
  6. GreenSock

    SVG layout trashing issue

    It looks like you must be doing percentage-based transforms which isn't supported in browsers natively (at least according to the SVG spec from what I understand), thus GSAP must perform those calculations. Do you really need to use percent-based transforms? Maybe try doing the conversion initially yourself and feeding in px-based values instead. GSAP could, of course, just do the initial conversion and never query getBBox() again, but that would break if the size of the element changes at all during the tween. See what I mean? So GSAP must take a cautious (reliable) approach rather than just assuming that the size won't change. But if you, as the developer, know that you're not going to change the size during the course of the tween, you could just figure out the value in terms of px (or SVG units actually) and feed that in instead. See what I mean?
  7. GreenSock

    Using plugins in Codepen Projects (NOT Pens!)

    Done and done. CodeSandbox was already whitelisted (for at least 3 months). Now Stackblitz is whitelisted as well. Good suggestions, guys.
  8. GreenSock

    Using plugins in Codepen Projects (NOT Pens!)

    Aha! It looks like codepen is using a different domain for that content. I just updated the plugin to allow that one (whitelisted it). You should be good-to-go now (after clearing your cache). Better?
  9. GreenSock

    Text scrolling on window resize

    Is this the effect you're after?:
  10. GreenSock

    Performance Issues only using translate3d

    Also, there's a known Chrome bug (Mac only) that can cause 3D transforms to take unusually long to render (only noticeable under heavy pressure). Again, this has nothing to do with GSAP, but if you're on a Mac it may be making this perform even worse. The biggest issue is probably the very expensive filter and the amount of pixels you're asking the browser to push around on every tick. A PNG of the element already blurred is gonna perform WAY better than having the browser do the blurring for you with a filter. Canvas would likely also be smoother as well (maybe PixiJS?).
  11. GreenSock

    Animation lags with video playing in the background.

    Performance optimization is a pretty huge topic, so it's very difficult to know exactly what's causing the problems on your particular page. In general, the biggest problem tends to be the browser's graphics rendering, so make sure you're affecting the smallest number of pixels possible, that the bounding box for those changes is as small as possible, and that you're not animating things that could affect document flow (like top/left, margin, etc.) If you still need some help, feel free to post a link or a reduced test case so we can see what's going on. Happy tweening!
  12. GreenSock

    Convert anime.js

    I didn't quite understand what you meant. There's something else you want? Can you give more details? That function should work for almost any value - just pass in an array of values.
  13. GreenSock

    Updating SVG Path Positions Via Wiggles... Again

    That's because you're using point objects to draw the paths, but you're animating actual elements. You're not reconciling the two sets of values. In other words, when the first element moves (by animation), you're not updating the corresponding point's x/y values. You could probably just use the element's _gsTransform object directly instead: It's probably best to have a single "source of truth" for the data rather than splitting it apart as point objects and elements. I hope that helps.
  14. GreenSock

    Importing Plugins in Nuxt.js

    First of all, thanks for joining the club, @Sixtus. As I stated above, I'm not at all familiar with Nuxt, but are you using the files from the "bonus-files-for-npm-users" directory in the download zip? If you're still having trouble, it may help if you create a reduced test case and provide it here so that folks can see what's going on.
  15. GreenSock

    applybounds for parentNode

    Yeah, this is definitely isn't a trivial task, but I took a crack at it for you: A few things to note: I simplified a lot of the code using some boilerplate functions for creating SVGs and setting attributes. I used a liveSnap to implement the bounds manually. It was simpler to just use a Draggable for the overall group, and use the center, line, and outer edge elements as the "trigger". That way, the bounds are applied to the overall group very easily. This whole thing would have been super simple if it wasn't for the custom logic necessary to limit the outer circle based on its radius in relation to the edges. That was the tricky piece - definitely an edge case. I sure hope that helps. Hopefully you'll see enough value to join Club GreenSock