A7DC
A7DC's Achievements
4
Reputation
-
Legends... both of you! Thanks guys ? Edit: Such an obvious solution, can't believe I didn't think of that lol!
-
My MacOS Safari version is Version 10.1.1 (12603.2.4) and iOS is on 10.3.2 I'm downloading webkit now to see if the issue is also on there too.
-
Yup, this JSFiddle seems to work on Safari and respect the overflow visible rule: http://jsfiddle.net/nSUEs/1/ ?
-
Hey Jonathan, are you certain that's the case? I've already tried increasing the specificity of the selectors and using !important. I still get the same results on Safari. Is it different for you?
-
Hey, thanks for the replies Craig and Johnathan. Unfortunately there's a bug in Safari where the overflow: visible rule isn't honoured, so the SVG is still clipped regardless of whether you set the overflow to visible or not. Johnathan, your fork also shows this, both on latest MacOS and iOS Safari. Does it appear clipped to you also? So it looks like the solution really, is to go with changing the size of the SVG (as Craig recommends) so that it has more breathing room to animate. The problem with this approach, however, is that you've then got to mess around with all the spacing and position of the SVG which doesn't exactly scale well. I'll continue to search for a better solution, but I think Craig's idea might have to suffice for now. It's a shame, you'd think Apple would be on to something like this. The bug has been around for years it seems.
-
Hi everyone, Noob issue here I imagine, but it appears my SVG is overflowing it's 'bounding box' while scaling... I've searched online and can't seem to find anyone with a similar issue. Any ideas what I'm doing wrong? Thanks
-
It appears this CSSPlugin might be able to achieve this actually, seen in this Codepen. I'll report back here if it helps me solve my issue! Edit: so it works OK in Chrome, but in Safari (OSX) the animation stutters - especially when you slow down the animation. Is this a bug?
-
Hi everyone! This is my first time using GSAP, and as a learning experience, I'm trying to create a clone of the Twitter heart animation, seen here. I've came to a stumbling block, however, when it comes to step 6 on the above link (the hollowed-out circle). My initial plan was to simply create an SVG with a transparent fill-colour and then animate the width of the circle, but stroke-widths aren't animatable in GSAP (and it appears anywhere), so does anyone have any suggestions of how to create this step? The centre of the circle needs to be transparent, so the "hacks" that have came to mind so far won't suffice. For example, creating two circles, with a smaller white one on top of a larger one to fake the hollowed-out centre (if that makes sense?). That won't work because the SVG will need to be transparent to fit on photos, for example. Does anyone have any ideas of how to solve this problem? Thanks!
