GreenSock last won the day on January 19

GreenSock had the most liked content!

GreenSock

Administrators
  • Content count

    11,486
  • Joined

  • Last visited

  • Days Won

    323

Everything posted by GreenSock

  1. Do Javascript files need to be embedded?

    Excellent, glad you got it solved. Happy tweening!
  2. Do Javascript files need to be embedded?

    No no, if you load your SVG as an external asset like that, GSAP can't access the elements inside of it (for security reasons - it's a browser thing). I thought you were trying to embed the SVG inline in the HTML - that's what I'd strongly recommend. It is technically possible to do it as an external asset by either linking to GSAP from within your SVG or just injecting the SVG inline dynamically after it's loaded, but it's easier to just inline it from the start (at least in most cases). If you're still having trouble, it'd be super helpful if you could provide a codepen demo so that we can quickly identify the issue(s). Cheers!
  3. SVG Animations With No JavaScript

    There are a ton of browser inconsistencies and "gotchas" when animating SVG with CSS. For example, transform-origin issues: https://css-tricks.com/svg-animation-on-css-transforms/. There are many, many more that GSAP solves under the hood. Another example, IE and Firefox both have bugs that affect progressively drawing SVG lines, measuring path length, and Safari can leave rendering artifacts in certain cases. I'm curious: why did your client disallow JS for the animations? I'm biased of course, but I think it's a pretty bad tradeoff to dump JS for buggy (and headache-prone, verbose) CSS. Are they concerned about security or something?
  4. Do Javascript files need to be embedded?

    Looks like the problem is that you're loading GSAP **after** your JavaScript is attempting to execute animations. In other words, when you call TweenMax.to(...), there is no such thing as TweenMax. So just move your <script> tag that loads GSAP above your SVG. Also, there's no reason to have your animation code literally inside the <svg> element, wrapped in CDATA. You can just tuck that at the bottom of your HTML, after loading GSAP. I don't think it's "wrong" to do it the way you're doing it - just seems unnecessary and adds a little extra code.
  5. ScrollTo Plugin not working when cloning node

    No problem at all. Happens to the best of us.
  6. ScrollTo Plugin not working when cloning node

    Looks like you've just got an error in your code - your querySelector() isn't finding anything because you're missing a "#", thus there's a runtime error being thrown when you try to call cloneNode() on a null object //BAD: document.querySelector('wrapper') //GOOD: document.querySelector('#wrapper'); Does that help?
  7. Animate CC Delayed Call on gotoAndPlay

    It's probably just a scope issue. Since you're trying to call gotoAndPlay() on the "this" object, it should actually look like: TweenMax.delayedCall(3, this.gotoAndPlay, ["seq2"], this); Does that help?
  8. Do Javascript files need to be embedded?

    Nah, GSAP typically just needs to be loaded once on the web page. In most cases, people inline their SVG (embed it in the HTML) which ensures that it can easily tap into GSAP without any security issues, and there are fewer server requests (faster). Are you trying to embed JS inside each SVG file and loading it into <img> nodes or something? I believe it's possible to load JS into an SVG with a link too (similar to a <script> tag in HTML). It'd help if you had a demo or something we could peek at. But no, it's very unlikely that you'd need to embed TweenMax in a bunch of SVG files. I can't imagine a scenario that'd require that.
  9. GUI for GreenSock

    You might want to keep an eye on this one: https://spiritapp.io/ (we aren't directly involved in that, but it looks interesting). We've heard of a few other ones that may be in the works from others, but nothing solid yet.
  10. _doc.visibilityState on node.js

    Excellent! Thanks for letting us know. Nice to hear from such a long-time user
  11. _doc.visibilityState on node.js

    Ah, I think that may be a node-specific thing that's resolved in the next release which can be previewed (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - is that better?
  12. Dynamic Length Timeline

    Yeah, sorry about that - I put that 1000-second limit on GSDevTools to avoid situations where crazy long (like infinite) timelines couldn't really be controlled intuitively (imagine dragging 5 pixels and that making the timeline shoot ahead by thousands of seconds). I didn't really think folks would intentionally go beyond 1000. You should be able to simply set a "maxDuration" vars property to override that if you'd like, like GSDevTools.create({..., maxDuration:5000}); Does that help?
  13. startDrag bug in chrome touch events

    Hm, I tried reproducing this in Chrome and Safari but had no luck. You're saying that if I press/drag "Trigger" multiple times, it only works properly the first time but on all subsequent drags, it jumps back to the start and then stutters? Can anyone else reproduce this? @Sahil what version of the browsers are you testing it on?
  14. Apply bezier to scrollTo()

    Hm, I'm a little fuzzy on what behavior you're looking for. Would you mind offering some more specifics? Do you want it to go down to one anchor, smoothly go back to another spot, then another, etc.?
  15. Like @Dipscom, I can't seem to reproduce the problem at all either. Any idea how to make it happen? Might you have an extension installed that might be doing something weird?
  16. DrawSVGPlugin with Ionic3

    Hm, seems to work fine: Have you tried this import instead?: import DrawSVGPlugin from "gsap/DrawSVGPlugin"; If that doesn't work, I'm not quite sure what might be the problem in your setup. Are you getting any errors in the console?
  17. Path comparison with MorphSVGPlugin?

    Hm, I can't think of an easy way, no. Technically there's a pathFilter() method that'd spit back the two shapes with matching numbers of anchors in a cubic bezier-based string which I suppose you could loop through and try to compare stuff, but I don't see a simple way to deliver what you're asking for. Maybe figuring out the total distance that each corresponding point must travel between the two shapes, but even that isn't a perfect way to do this (in my opinion). You'd have to figure out the center point for each shape and offset all the measurements accordingly (otherwise, if one shape is in the upper left corner and the other is in the lower right, the distances are artificially far because I assume you just want to know the overall shape differences, not the absolute distance that each anchor travels). I wish I had an easy answer for ya. Maybe someone else has an idea.
  18. rotationY ios 10 safari 3d bug

    Yeah, that actually has nothing to do with GSAP. It's just how Safari renders things in 3D. Unlike other browsers, it attempts to render the intersecting planes in 3D, and it ignores z-index (in that regard). In your example, one thing you could do is just push the header way forward in 3D space using transform: translateZ(100px).
  19. Stagger groups of paths

    Sure, you could just wrap that in a function and reuse it like this: That way, it's much easier to tweak that animation in just one spot. There are a bunch of ways you could do this actually. Does this help?
  20. One of GSAP's specialties is dealing with transforms. It solves all kinds of problems (browser differences, bugs, SVG quirks, as well as always delivering a consistent order-of-operation). There's actually a lot of work involved in parsing an elements initial transform state (the browser reports it as a matrix() or matrix3d() string, so GSAP must pull apart all the components like x, y, scaleX, scaleY, rotation, skew, etc. from that). It caches those values in order to maximize performance. Typically when someone is using GSAP, they just let it handle all the transform stuff, so this strategy works great. However, it sounds like you're trying to use GSAP for editing/animating the transforms and then you're manually altering them directly (outside of GSAP), thus when GSAP uses its cached values it isn't delivering the results you wanted. Don't worry, there's an easy fix - you can force GSAP not to use its cached values by adding parseTransform:true to your next tween. However, I strongly recommend just using GSAP to do ALL of your transform-related stuff because it'll maximize performance, minimize bugs that you run into, and save you some headaches. So instead of directly setting transforms like element.transform = "matrix(1,0,0,1,0,0)", I'd do TweenMax.set(element, {x:0, y:0, scale:1, rotation:0}). Does that help?
  21. Block Reveal Effect with GreenSock

    Sure, GSAP can do everything anime can do plus a lot more. And GSAP is faster too. It looks like the demo you provided leverages some other helper classes pretty heavily, and anime was only used for small portions. Here's a fork where I swapped in GSAP for the anime code: The structure of things seemed a bit convoluted so I may have missed something, but it appears to work just fine with my edits. Is that what you were looking for?
  22. SVG Rotation bug(?) - Apple specific

    Excellent! Thanks so much. Glad this resolved things. Happy tweening!
  23. GSDevTools blinks end of timeline on start

    Oh, one problem I see right away is that you're loading a very old version of GSAP. GSDevTools requires 1.20.3 or later. Please update and then if you're still having trouble, let us know.
  24. SVG Rotation bug(?) - Apple specific

    I believe the problem is actually caused by the fact that for <circle> elements, Apple makes the origin of the stroke at a completely different spot than all the other browsers. It has nothing to do with rotation or a bug in GSAP. It's just an annoying choice Apple made. You can resolve it by converting the <circle> to a <path> so that the coordinates are explicit about where to start. MorphSVGPlugin has a super convenient method for doing this, so all you'd need to do is add this line to the top of your JS: MorphSVGPlugin.convertToPath("#progress"); But I noticed you're not a Club GreenSock member, so you don't have access to MorphSVGPlugin. I ran the conversion for you and got this, which you can just swap in for your <circle> instead (thus you wouldn't need MorphSVGPlugin): <path class="st2" id="progress" d="M589,319 C589,468.1,468.1,589,319,589,169.9,589,49,468.1,49,319,49,169.9,169.9,49,319,49,468.1,49,589,169.9,589,319z"></path> Does that help?
  25. GSDevTools blinks end of timeline on start

    Hm, would you mind providing a reduced test case (perhaps in codepen or jsfiddle) that demonstrates the issue? It's just tough to troubleshoot blind. Happy to help, I just need a little context.