Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

GreenSock last won the day on July 24 2019

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. Tough to say without seeing it in action (reduced test case), but I was a little confused by the fact that it seems like you're trying to drag AFTER onRelease (wouldn't onRelease discontinue dragging?). Are you perhaps dragging in such a way that some other element ends up going BETWEEN the dragging element and the pointer?
  2. Yeah, something odd is happening in your environment. You can look at the GSAP source code and see that lazyTweens gets defined as an array ([]) in the file itself, before any rendering happens, and obviously "push()" is a valid method on any array...so why in the world would lazyTweens be undefined? I've literally never seen that before. It's like something in your environment is messing with properties/values on the GSAP objects. There are almost 3,000 mentions of "prototype" in your minified JS file (excluding GSAP) which makes me nervous like perhaps they're messing with how Arrays/Objects work (that can throw everything off). Again, it's virtually impossible to troubleshoot on a live, compressed site. I wish I had more ideas for you. Have you asked the Storyline folks? I'm seeing other similar errors that are unrelated to GSAP: app.min.js:3 Uncaught TypeError: Cannot read property 'request' of undefined at e.onVolumeChanged
  3. Yeah, that actually didn't help much because all your other source is still compressed. Plus I was able to figure out which line it was failing on anyway (when you first posted), and the only explanation I can think of is something else is altering GSAP from the outside. Actually, it looks like there's a completely different error that's totally unrelated to GSAP that fires FIRST, which probably halts JS execution, thus the lazyTweens array never gets created: Uncaught ReferenceError: callFunctionFromScript is not defined at HTMLScriptElement.Script1.script.onload I'd recommend digging into that first. Fixing that may resolve the other stuff.
  4. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. This includes removing skewType. Please see the GSAP 3 release notes for details. By default, CSSPlugin uses a skewType of "compensated" which affects the skewX/skewY values in a slightly different (arguably more intuitive) way because visually the object isn't stretched. For example, if you set transform:skewX(85deg) in the browser via CSS, the object would become EXTREMELY long (stretched) whereas with skewType:"compensated", it would look more like it sheared in 3D space. This was a purposeful design decision because this behavior is more likely what animators desire. If you prefer the uncompensated behavior, you can set CSSPlugin.defaultSkewType = "simple" which affects the default for all skew tweens, or for an individual tween you can set the special property skewType:"simple". Watch the video Demo: skewType compensated vs simple See the Pen GSAP skewType comparison by GreenSock (@GreenSock) on CodePen. Remember, if you hit the 360 button you could crash your browser as explained in the video.
  5. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Learn to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites. In this course, you'll learn to create immersive graphics and make them alive with animations! https://frontendmasters.com/courses/svg-essentials-animation/
  6. Sure, here are some links: https://developers.google.com/web/tools/chrome-devtools/rendering-tools/ https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
  7. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. This course from Egghead.io will walk you through the features of Greensock, including how to: animate an element, manually control an animation, and animate between CSS classes. https://egghead.io/courses/create-amazing-animations-with-greensock
  8. Yeah, if it's all compiled/minified into a big blob with other stuff and the licensing is clear, that should be fine (assuming your project doesn't actually compete with our offerings, like if it'd make it easy for people to just grab your free thing instead of getting the proper GreenSock license/tool, that'd kinda suck).
  9. Good question. Obviously it would be pretty bad for business if folks started sharing the bonus plugins for free in open source projects. I appreciate you saying that you would just point to the bonus files as external dependencies (rather than actually including the files). Sounds fair enough. Folks with a "Business Green" license are allowed to distribute the bonus plugins as a part of their Work Product as long as they make it clear to their users that the GreenSock files are subject to their own license and can be used solely as a part of the [unedited] Work Product. And of course we'd sure appreciate if only the minified files were distributed. We've never sued anyone and our entire business model relies on the honor system (see https://greensock.com/why-license). We extend a lot of respect and trust to our users in the hopes that'll be reciprocated. Thus far, it has worked pretty well; we're blessed to have amazing customers. We don't burn a bunch of hours trying to hunt down violations. Fortunately, our fantastic community tends to "have our back" and gently self-corrects when necessary. We try to focus our attention more on delivering solid tools and friendly support (like in these forums). Thanks for asking the question - it shows that you're exactly the type of customer we love serving. Glad you're a Club GreenSock member! Happy tweening!
  10. Yes, autoAlpha uses visibility:hidden because it performs better (doesn't affect document flow) but you can easily get the behavior you want like this: TweenMax.to(".target", 2, {opacity:0, display:"none"}); Does that help?
  11. Welcome to the club! I'm not totally clear on what you're trying to do, but I assumed you wanted to make the drawer close completely if/when the user drags UP on it (at whatever velocity), and leverage ThrowPropsPlugin to match momentum. Here's a fork: https://codepen.io/GreenSock/pen/72b9a589498447674b829089180e60db?editors=0010 And you can set an ease on the Draggable (it only affects throwProps tweens that it initiates). Does that help?
  12. Yeah, it's SUPER difficult to troubleshoot a live site like that with tons of minified JavaScript and various things happening. Profiling showed a massive hit with an anonymous function somewhere, so it's almost surely unrelated to GSAP. I wish I had more to offer, but if you still need some help, please provide a reduced test case with uncompressed code (ideally in a codepen).
  13. Yeah, that's probably exactly what I'd do. I might try to make the function a little more reusable so that I could pass in the length as well as the number to exclude, like: var boxes = document.querySelectorAll("div"), newNumber, i; for (i = 0; i < boxes.length; i++) { newNumber = getRandomInt(boxes.length, newNumber); boxes[i].innerHTML = newNumber; console.log(newNumber); } function getRandomInt(length, exclude) { var random = Math.floor(Math.random() * length); return (random === exclude) ? getRandomInt(length, exclude) : random; } Alternatively, if you just want to grab a random element that's not the previously selected one, you could slap a new property on the actual array (or NodeList) to keep track of things and leverage something like this one function: function getRandomFrom(array) { var selected = array.selected; while (selected === (array.selected = Math.floor(Math.random() * array.length))) {}; return array[array.selected]; } (this isn't useful for this case, but I thought I'd share in case it's helpful) Lastly, if you want to randomly pull values from an array one-by-one until they've all been pulled (almost as if when you pull one, it's no longer available to be pulled again until ALL of them have been uniquely pulled out), here's a fun function I just whipped together: function pullRandomFrom(array) { if (!array.eligible || array.eligible.length === 0) { array.eligible = array.slice(0); //make a copy, attach it as "eligible" property array.eligible.sort(function() { return 0.5 - Math.random(); }); //shuffle } return array.eligible.pop(); } All you've gotta do is feed the array in each time and it keeps track of things for you. That was a fun exercise. Thanks for the invitation, @PointC
  14. Yeah, totally - I think it's entirely legit to do what you described especially for simple stuff when you know the quantity of points matches. No need to load MorphSVGPlugin if you don't really need the features. And like I said, I can't imagine you'd ever notice a performance difference for simple stuff anyway. Happy tweening!
  15. I don't think the brackets have anything to do with the error. I guess you could try targeting something else that doesn't require the brackets just to prove my theory. This wasn't a very reduced test case - it's still using a ton of minified JS code (including TweenMax.min.js instead of the uncompressed TweenMax.js file). Unfortunately, I don't think I can troubleshoot it in its current state. I really wish I had a great answer for you. It definitely seems like something is messing with GSAP from the outside.
  16. Hm, I'm not sure what to say - I don't see where you're cloning anything and I don't see an error in the codepen. It would make sense, though, if you'd get a pointercancel event if you're cloning an element and it goes in front of the element that you initially pressed down on. Maybe try setting pointer-events:none on the cloned element?
  17. Yep, and remember that you can define an ease for the staggers, so if you want them to start out small and get larger, you could simply use a Power2.easeIn, for example. .staggerTo(".class", 1, { autoAlpha:1, stagger: { amount:3, ease:Power2.easeIn } }); Happy tweening!
  18. Hm, those GSAP files do indeed define a default export. You are using the ES module version of the GSAP files, right? You definitely are if you simply did an npm install - I'm just a bit concerned about those error messages but maybe I'm reading them wrong. You could also try: import { TweenMax } from 'gsap/TweenMax'; import { Draggable } from 'gsap/Draggable';
  19. Good question. I doubt you'd ever really notice a real-world difference. Technically-speaking, there's more up-front work that MorphSVGPlugin has to do because it converts the path into cubic beziers and figures out the best shapeIndex (maps which point in the start shape to which point in the end shape the sequence should begin). So you're technically taking a performance hit up front there, but on the other hand, the actual animation part is probably a bit more efficient in MorphSVGPlugin because of the way it can merge the values together into the final string is more efficient. You could simply define shapeIndex:0 to have it skip the work of figuring it out automatically. You can also precompile (see the docs). The standard "complex string" tweening in AttrPlugin essentially busts the value apart into an array where any numbers that change get isolated, and then Array.join("") gets called to do the merging on each tick. When you get a lot of values in there, it's more challenging for browsers to do the join() because it's gotta convert numbers to strings and figure out where to chop the decimals, etc. If I have to choose to get better performance on the first render or on every render thereafter, I'd typically choose the "every render thereafter", thus MorphSVGPlugin is likely a bit faster. Again, I doubt anyone will notice unless you're tweening some CRAZY complex shapes. Also, if you use MorphSVGPlugin, you get access to other features which might come in handy, like rotational morphs (type:"rotational") as well as different mapping algorithms. Here's a sneak-peak of a video we'll be releasing in the next few weeks (unlisted for now): I hope that helps!
  20. That's pretty tough to diagnose on a live site like that which is only loading the minified files. I'm not at all familiar with storyline (hadn't heard of it until now). Based on that error message, it almost seems like something outside of GSAP is monkeying with its properties, like by changing TweenLite._internals.lazyTweens to be null/undefined! I've never seen that before, and I'm pretty confident there's nothing inside GSAP that would do that. There are just too many moving parts and obfuscated code to troubleshoot that URL you provided. Can you isolate things further and remove as much as possible, and use uncompressed JS files? This sure smells like something outside of GSAP is causing the problem but I can't say for sure.
  21. Yep, that sound right to me. This is definitely a PIXI question, not a GSAP one. We really try to keep these forums focused on GSAP-related questions, but I quickly forked your demo and added a clear() and restructured just that ticker method that draws things. I'm not sure it's the "best" way, but it appears to work: https://codepen.io/GreenSock/pen/49e3047bdf930137a338d9542fc91891 Does that help?
  22. Oh, one very minor thing - you could make it slightly shorter like this: OLD: function morphIt() { TweenMax.to("path", 1, { morphSVG: shapes[count], onComplete:morphIt }); count ++; count = count > shapes.length - 1 ? 0 : count; } NEW: function morphIt() { TweenMax.to("path", 1, { morphSVG: shapes[count], onComplete:morphIt }); count = (count + 1) % shapes.length; } NEW (Alternate): function morphIt() { TweenMax.to("path", 1, { morphSVG: shapes[count++], onComplete:morphIt }); count %= shapes.length; } ?
  23. Yeah, that error message just meant that the path data didn't make sense...it sounds like you figured out that it was because the initial path was completely empty. Indeed! Nice solution as well. I love it when we provide multiple solutions and people see how you can approach things from various angles. ?
  24. Yep, @PointC's is the simplest solution. If you need a function, here's something rudimentary: https://codepen.io/GreenSock/pen/0a44d5baf1c7e3f9fcc0708d49391aad?editors=0010 If you need to go back to the beginning shape, just tack an extra tween on the end accordingly. Is that what you're looking for?