Jump to content
GreenSock

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!

GreenSock

Administrators
  • Posts

    13,198
  • Joined

  • Last visited

  • Days Won

    409

Everything posted by GreenSock

  1. Do you have a reduced test case that proves this? I can't imagine why a browser would not use its cache in a scenario like this, but maybe you can show me the evidence you're looking at so we can better understand? Are you loading the GSAP file from a CDN? In all my years of doing this (and GSAP is used on over 8,000,000 sites), I don't think I've ever heard someone bring this up before. I wonder if there's a setting on your particular browser that's disabling the cache? What you're doing with hijacking the child iframe's jQuery (and GSAP) smells like a potential security violation, but that's not my area of expertise.
  2. Are you loading the image from the exact same URL? I'm also confused by "uploaded 2 times" - did you mean "downloaded"?
  3. If you're pointing to the same URL to load GSAP, the browser will only load it once anyway because it'll tap its cache for it. There's no point in trying to manipulate iframes like that (unless I'm misunderstanding your question).
  4. Yep, @Wipeo is correct - all CSS properties should always be camelCased. It's invalid JS to have a dash in there (JavaScript thinks you're trying to subtract from a variable).
  5. Yikes! Would you possibly have a reduced test case that doesn't have almost 1,000 lines of SVG? Maybe a simple Rectangle? Sorry, I've just got a VERY full plate right now and don't have much bandwidth to try to pull apart all the variables, sift through mountains of SVG data, etc.
  6. Yes, @PointC is right-on and I just wanted to add a couple of minor things: SVG doesn't have anything like z-index. It literally depends on the order of the elements in the DOM for stacking order, so you can get the effect you're after only by re-ordering things in the DOM dynamically. Totally possible, but @PointC's recommendation is probably easier and possibly more performant. Sine.easeIn, Sine.easeOut and Sine.easeInOut eases are probably perfect for this type of thing. Other easeIn/easeOut/easeInOut pairs could look nice too, but Sine waves are literally EXACTLY what drive this type of effect in the real world.
  7. Hm, would you mind providing a reduced test case in codepen that demonstrates a scenario where this would be useful? The tricky thing here is that transforms could be applied on the element and/or any of its ancestor elements, and they all stack up, so it wouldn't be as simple as "factor in the transforms". It would need a way of knowing how far up the chain you're asking it to go, you know? Again, I think it'd help me a lot to se a very simple reduced test case that shows a practical example if you don't mind. Same goes for the fill issue. The convertToPath() function is intended to just convert the coordinates and attributes over which, in most cases at least, would ensure styling also gets applied accordingly but I'm sure there are some edge cases (like CSS with selectors like "circle {...}"), but hopefully that's a pretty easy CSS fix. Once I see a demo in codepen, perhaps that'll provide additional understanding for me. Thanks!
  8. Yep, I think @OSUblake was right on regarding the extra M0,0 command at the end, but I can add some code to MorphSVGPlugin to sense that condition and just throw those values away. Thanks for your thoughtful and thorough post, especially the reduced test case
  9. Love hearing that! @mikel offered a great solution. Here's another example of basically the same idea: https://codepen.io/GreenSock/pen/8586b002d06797032bb34a647adc01b2
  10. Ah, okay. Yeah, I'm not sure what else to suggest Let us know if you discover a great tool for that.
  11. Hey @Jon Pierce. Welcome to the forums! By default, GSAP uses requestAnimationFrame which is standard in all browsers (except ancient ones, in which case GSAP falls back to setTimeout()). The whole point of requestAnimationFrame is to ensure that it's perfectly synchronized with screen refreshes. So unless the WebView in the Android app isn't using that (which would be very surprising to me), it should all be synced up nicely. Do you know if the device you're testing on supports requestAnimationFrame? Typically when there's jank, it has nothing to do with GSAP specifically because it's so highly optimized and updating its values accounts for a very small portion of the overall load - it's almost always related to graphics rendering in the browser. So, for example, if you're animating 100 SVG elements, GSAP might take up 0.5% of the overall CPU load to do its work, and 99.5% is the browser actually fabricating all the new pixels for the resolution-independent SVG elements, firing events, doing any document reflows, etc. You could certainly experiment with actually setting force3D:false just to see if it helps anything. Usually it's best to leave force3D:"auto" or true, but in some rare cases the browser may actually do better with it disabled (Chrome on the Mac currently has a bug that actually can decrease rendering performance with 3D layering enabled). Another thing you could experiment with is setting TweenLite.ticker.fps(30) or something to set it to a lower-than-normal value just to see if visually it helps you. I kinda doubt it will, but it's worth a shot.
  12. @Antoniopf, you've got a lot going on with various 3rd party tools that could be the source of the problems. We know for sure that GSAP works great in IE11, so it's highly likely that there's some other conflict on that page that's not related to GSAP but it's too difficult to troubleshoot remotely on a live site with so many variables, other libraries, etc. If you can show us a reduced test case where GSAP (alone) isn't working in IE11, we'll jump on that immediately and offer solutions. We definitely want to make sure GSAP is bug-free.
  13. How about this, @Donatello666? https://codepen.io/GreenSock/pen/c1e94141d09fc2aaf6f3ba93f68aed99?editors=0010 TweenMax.staggerTo(".box", 2, { stagger: 0.5, x:function(index, target) { return target.getAttribute("data-x"); } });
  14. @Bradley Lancaster that's pretty weird - what's the source of that problem? Are you saying that your software actually spits out malformed SVG strings? I've heard great things about SVG OMG.
  15. It wouldn't be a true "repeat" if it wiped out values and used new ones. But @PointC gave a great solution, and here's another alternative: https://codepen.io/GreenSock/pen/482b8b02df7d5f3b970861163bdb17a0?editors=0010 TweenMax.to("#box", 2, { rotation: "+=120", transformOrigin: "50% 50%", onComplete: function() { this.invalidate().delay(2).restart(true); } }); Does that help?
  16. I think you might be looking for the offsetY property. That should make it pretty easy Docs: https://greensock.com/docs/Plugins/ScrollToPlugin scrollTo:{y:"#category-content", offsetY:100, autoKill:false}
  17. Very interesting - it definitely seems Vue-related. If I remove Vue from the equation, it all works as expected. From what I can tell, the issue gets introduced as soon as you load CSSPlugin which enables the "autoCSS" feature, wrapping all the non-protected properties into a css:{} object in the vars (protected ones are things like onComplete, overwrite, etc.). If you set autoCSS:false on your first tween, it seems to resolve things too. I wonder if Vue is somehow swapping things out from underneath GSAP. Very odd indeed.
  18. Excellent, I'm so glad to hear you got your question resolved. Thanks for the kind words, too! Happy tweening (and dragging)!
  19. I'm not at all familiar with Vue or what it may be doing to tinker with the GSAP objects, but you mentioned a "shallow" watch for changes and I wonder it something is happening with Vue copying things but only in a shallow way, so that the vars.startAt doesn't actually get properly copied over (deeply)? I'm totally guessing. There isn't any "magic" going on in GSAP - it's relatively straightforward, so any weirdness here sounds like it'd be Vue-related (and again, I'm totally unfamiliar with that). I wish I had a better answer for you.
  20. Doesn't matter - as long as you provide a reduced test case in codepen, you're fine. Please just make sure it's the absolute minimum test case, not your whole page. The fewer variables the better
  21. Ha. Well, there's an input field specifically for a codepen URL when you create a topic, but you can just paste a URL anywhere in your answer too.
  22. Welcome to the forums, @Xristi! I'm not entirely sure I understand the question - do you have a codepen demo we could look at? Or were you asking us to build something for you? I don't have the time to build something custom for you, but we'd be happy to help with any GSAP-specific questions. Have a great weekend.
  23. Hm, I'm not sure what could be the problem there, @mosk. I'm not aware of anything substantially different about those. I doubt this would help, but have you tried putting ".js" at the end of the import files? Maybe try making sure they're in the correct directory structure, like /vendors/utils/GSDevTools (notice "utils"), and the main TweenLite (and other non-plugin) files one directory up? I'm totally guessing at things here.
×