ceindeg

Hey there, hoping you can help. I'm getting feedback that my codepen https://codepen.io/clkdigital/pen/jOEOBzY and more specifically the throwprops / inertia part (i.e. "swipe" functionality) of it isn't working on Safari MAC. It's working great for me on PC. Can anyone confirm if it's working for them on a mac? The "swipe" part? Apparently all you can do is click and drag on Safari. I've tested on iOS and works fine. Unfortunately I don't have access to a mac to test desktop Safari. *UPDATE* just had confirmation the issue is not as descibed - but the fact that swipe doesn't work using a TRACKPAD! Any ideas how to get GSAP draggable working using a trackpad? Is it even possible?

That's much better thanks!!!

Thanks makes sense. I tried removing minDuration and it has improved things slightly but still bounces away from first slide onto second a lot of the time.

Hi @ZachSaucier thanks for the reply - I'm not exactly sure how that would apply to my codepen? Is this a fix your suggesting? Also, if you try out my codepen on a mobile (my android) it's actually quite difficult to get back to the first slide sometimes. It just bounces back to the second one. I don't have a screen recorder on my mobile to show you, but it seems like the same issue I'm having on desktop. Any ideas for a solution? I think if there's a way of only snapping in the same direction as the user drag that would solve the issue... Thanks Louisa

Hey So having fun with Draggable, but experiencing issues with my snapping - specifically snapping to the first item. So, if you drag nice and slowly between items it snaps nicely between them, slowing to a stop. However, if you drag hard/quickly and release it "bounces" off the bounds and ends up on the second one instead of landing on the first one. I know the issue is with my settings but I'm not entirely sure which one to target to stop the issue. I've been playing around for hours and not getting very far so if anyone can point me in the right direction I'd be very grateful. Also, I'd really like to stop "reverse" snapping - i.e. if the user was dragging left it should snap to the next left one rather than reversing direction (even if the one on the right was technically closer). Here's the codepen https://codepen.io/clkdigital/pen/jOEOBzY and a video of me demo-ing the issue with the codepen https://youtu.be/VGX_R40FVZA Thanks!

Jack that works like a charm!! Thank you so much. I already had a tiny rotation on the mask tween to fix an IE/Edge bug... If only IE & Safari could use the same bug fixes that would make it easier!!

@PointC thank you that's so nice! I've got an iPad 4 and it doesn't play on that... Safari or Chrome. I wonder if I've found a GSAP bug? I can't see anything amiss with my code?

@PointC thanks that's really interesting, my iPad is really old and doesn't play it (not overly worried about that) but it definitely doesn't work on iPhones - even new ones :-\

I've create a new copdepen with a single shape / mask animation This also doesn't render at all on iOS... any ideas? MorphSVG plugin definitely incuded and the issue persists.

@Carl thanks for pointing that out I didn't realise! I've now verified my email so it should work. @PointC Thanks for the spot - I had included the MorphSVG code into my original code I just forgot to include it in my codepen. I've now added to my codepen https://codepen.io/clkdigital/full/GdWLxy/ but the problem persists. Even in full screen mode the charts don't render...

Hi Craig, I mentioned in my post I'm already using the MorphSVG plugin so that wouldnt be the issue.

I'm experiencing an issue with an SVG mask animation in iOS only. Happens in iOS Safari & Chrome. I'm using the MorphSVG and Draw SVG plugins to create the animation (see codepen -sorry the html is a mess - it's generated dynamically so I've done a copy/paste) On iOS the animation doesn't run at all, in fact nothing shows up. It works fine on Android, also works on all desktops and I'm totally baffled. Any ideas? All help much appreciated!! Thanks Louisa

AMAZING!! Thank you what a life saver

Hi I really hope someone can help, I've got a pie chart animating perfectly in all browsers EXCEPT IE Edge. It even works in IE10 / 11 fine. Just Edge I'm having issues with. It doesn't render anything. If I remove the tween animation then it renders fine, so the issue can't be with the mask - it's got to be with the tween. I've researched the forums and seen other code pens (by other devs) using the same concept that don't work in Edge edge either, here's one example: https://codepen.io/PointC/full/ZWEqdK again it works fine in all other browsers, just Edge! Any help will be much appreciated. I'm scratching my head here. Thanks Louisa

Here's my code... .staggerTo(".card-container", 0.3, { force3D:true, cycle:{ right:function(index){ return index * rightmulitplier + "%"; }, ease: Elastic.easeOut } }, 0.00001, 2); Have I set the easing in the correct place? It doesn't seem to have any effect at all... Also as an extra question - the animation is pretty jittery which (as I understand it) is caused by animating the "right" value rather than setting the X value. However my layout needs to stretch from the right edge so is there a way to animate the "x" from the right? e.g. x: right 20% etc. Sorry for the lack of codepen, the work is confidential so I can't share it.