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. Welcome to the forums, @Leonardo Brito. I didn't quite understand your question. If you need some help, could you please provide a codepen? That'll greatly increase the likelihood that you'll get a quality answer. If you're not sure how, check this out: Also, I noticed that you're wrapping your CSS-related properties in a "css:{}" object which is totally fine, but also completely unnecessary because GSAP will do that for you automatically. Also, it's much better to use the shortcuts like x:0 instead of transform:"translateX(0)" and xPercent:-100 rather than transform:"translateX(-100%)". Also, I'd recommend against animating "left" and "top" properties, and instead animate "x" and "y" (transforms) because they're typically more performant and the browser offers sub-pixel rendering for those. Happy tweening!
  2. Well, there isn't really a way to resurrect an animation back from the dead. You killed it! Maybe just recreate the timeline when you need it again, or only pause() the tween instead of killing it(?)
  3. Yeah, I doubt that anyone would notice a performance difference in the real world. I'd slightly favor the clear() approach, though, because it keeps the instances to a minimum and doesn't have to worry about overwrite logic internally. ?
  4. Welcome to the forums, @Macrossyiu. I read your post a few times and I'm totally lost. I may be missing something obvious, but I just don't understand your question. Can you re-state it? Do you have a GSAP-specific question we can help you with?
  5. Hm, sorry to hear about the trouble. It's really difficult to troubleshoot blind - can you provide a reduced test case, perhaps in codepen? Are you getting any errors in the console? Did you load the GSDevTools file? To learn how to create a codepen demo, see:
  6. Hi @namjoonforpresident. It looks like you're trying to animate the "fill" of an <object> (which won't work). I'd recommend placing the <svg> inline so that you can have access to its contents. Then you can target any individual <path> (or whatever). If you still need some help, I'd highly recommend following @PointC's suggestion and post a codepen demo. It greatly increases your chances of getting a solid answer Happy tweening!
  7. Glad you got it working! If you're loading them directly into the browser (via a <script> tag), yes. Happy tweening!
  8. I have added some code to make it compatible with PIXI 5.0.x - you can preview it (uncompressed) at: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin.min.js Does that work well for you?
  9. There are 3 CustomEase files in the download: bonus-files-for-npm-users/CustomEase.js //ES Module, typically for use with modern bundlers src/uncompressed/easing/CustomEase.js //standard ES5 file, useful for troubleshooting and older bundlers src/minified/easing/CustomEase.min.js //compressed file, for use directly in the browser. For your situation, I recommend the last one.
  10. Is the path to your local file accurate? Are you maybe using the wrong file (ES module instead of ES5)? Is there a reason you're not using the minified file (CustomEase.min.js)?
  11. Hm, this isn't terribly helpful - we need to actually see it in context. An excerpt of code just in the <head> doesn't do it. For example, are you using the ES Module CustomEase.js file or the ES5 one? Is there a reason you're not using the minified one? Also, I definitely wouldn't recommend putting your JavaScript code in the <head> because the browser processes things from top to bottom, so none of the actual elements that you're trying to animate will even exist yet when that code executes. See what I mean? I'd recommend putting it at the end of the <body> tag. If you still need some help, please provide a reduced test case (ideally in codepen). If you're not sure how, see:
  12. First of all, welcome to the forums @AnSVG. Looks like a pretty cool animation! It's difficult to pull everything apart and decipher all that code and I don't even really know what I'm supposed to see in that animation, but from your description it kinda sounds like it could be an overwrite issue. If a tween begins that affects a property on an object that's already being controlled by a different tween (so they're fighting over the same property), it kills the other one. Perhaps that's happening here? You can, of course, set overwrite:false on any tween or even TweenLite.defaultOverwrite = false to do it globally, but just beware that'll allow conflicting tweens to persist (and fight). Does setting TweenLite.defaultOverwrite = false resolve things for you?
  13. I don't notice any obvious issues in the code. But again, it's really difficult to troubleshoot blind. If you still need some help, please provide a reduced test case that reproduces the problem and we'd be happy to take a peek. I wonder if maybe you're using the wrong kind of file, like the ES Module instead of the minified ES5 one.
  14. Ah, it looks like Pixi changed some things in the new version, 5.0.x. If you swap in 4.x, it works well: https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.min.js I'll have to research what they did to move their API around.
  15. Hm, I wonder if there's a typo in your code? You mentioned "CodeEase" but did you mean "CustomEase"? It's very difficult to troubleshoot blind - perhaps you could provide a reduced test case in codepen?
  16. Glad you got GSAP working well, @JMischka. As for ScrollMagic, that's not something we authored so we don't officially support it here, but there are plenty of people around here who use it, so perhaps one of them can chime in. I haven't used ScrollMagic myself, so I'm not the best person to offer advice. You can definitely load it from a CDN, but I'm not sure about the npm stuff or compatibility with build systems. Last I heard, its author was planning to jump back in and make some updates after a while of not touching the project, so that's good news. Happy tweening!
  17. I noticed a few problems: Your #p1pathB <path> had a typo - there was no "d=" before the path data string. That's a syntax error. You forgot to load ScrollMagic It looks like you're just using #p1pathB as a reference for the end values, but you had it nested inside of the <clipPath> element. I'd take it out of there. Here's a fork that doesn't use ScrollMagic, but just shows the path morphing: https://codepen.io/GreenSock/pen/9d91bcd8b9beb1d39a900235bc928a96?editors=0010 Does that help?
  18. You guys are having way too much fun with this Love it.
  19. Actually, @PointC's answer triggered an idea for me and after some research I discovered the problem with your pen. You're gonna laugh. Your <svg> element has the wrong namespace. You used xmlns="https://www.w3.org/2000/svg" but there shouldn't be an "s" in the protocol. It should be xmlns="http://www.w3.org/2000/svg". The wrong namespace made it impossible to call getBBox() on your SVG <rect>! Weird, I know. None of this has anything to do with GSAP. But since it failed to return a getBBox(), GSAP decided it's not a normal SVG element and it applied the transforms via CSS styles rather than the transform attribute. And Firefox ignores CSS transforms applied to masks. So fixing that namespace allowed GSAP to see that the element is indeed an SVG element, and apply the transforms to the attribute, making it animate properly Phew!
  20. Very nice indeed, @PointC and @Shaun Gorneau
  21. I'm not seeing the same numbers as you, but either way I question the validity of that report. It shows detached nodes from jQuery too (I removed GSAP completely). Nobody else has reported any such problems, and GSAP has been vetted by the biggest companies on the planet so it's hard to believe that it has a big memory leak issue and nobody noticed. I'm not saying it's impossible that there's a bug - I've seen plenty of those in my time I'm just having a hard time tracking down any problems or validating what you're seeing. I wish I had a great answer for you.
  22. Welcome to the forums, @H34disd34d! Thanks for being a Club GreenSock member. It's very difficult to troubleshoot a live web site with thousands of lines of code that we didn't author. I'd suggest creating a reduced test case in codepen and we'd be happy to take a peek. Sometimes the exercise of breaking it down to the simplest thing and building it up from there can really help you to discover the problem on your own, actually. But of course we'd be glad to help if we can - it's just not feasible to do that on a live site like this.
  23. From the docs: So are you all set now?
  24. A few more questions: Are you saying that you think GSAP itself is internally keeping references to DOM elements, even when those animations are killed? Do you see the same results when animating it without GSAP? If so, can you provide a reduced test case comparison? Do you get the same results if you use GSAP's API directly (not going through jQuery)? Like TweenMax.to(...) instead of jQuery.animate(...) Is there a direct correlation with the number of animations? In other words, you mentioned 12 detached elements at the start, then 24. If you add another 10 animations, does the count get affected accordingly?