Jump to content
Search Community

ceindeg

Members

  • Posts

    15

  • Joined

  • Last visited

 Content Type 

Posts posted by ceindeg

    Draggable Throwprops "swipe" not working on Safari

    in GSAP

    Posted

    Hey there, hoping you can help. I'm getting feedback that my codepen  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?

    See the Pen jOEOBzY by clkdigital (@clkdigital) on CodePen

    Gsap drag "snap" first item issues

    in GSAP

    Posted

    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

    Gsap drag "snap" first item issues

    in GSAP

    Posted

    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

     

    and a video of me demo-ing the issue with the codepen

    https://youtu.be/VGX_R40FVZA

     

    Thanks!

    See the Pen jOEOBzY by clkdigital (@clkdigital) on CodePen

    DrawSVG & MorphSVG Mask animation iOS issue

    in GSAP

    Posted

    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? 

     

    image.png.cc112f63a7d5eaff3f26a5a53a221920.png

     

    All help much appreciated!!

     

    Thanks

    Louisa

    See the Pen GdWLxy by clkdigital (@clkdigital) on CodePen

    Issues with drawSVG stroke-dasharray mask animation in IE EDGE only

    in GSAP

    Posted

    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:

    See the Pen ZWEqdK by PointC (@PointC) on CodePen

     again it works fine in all other browsers, just Edge!

     

    Any help will be much appreciated. I'm scratching my head here.

     

    Thanks

    Louisa

    See the Pen bvLOJj by anon (@anon) on CodePen

    Easing in staggerTo with cycle function

    in GSAP

    Posted

    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. 

×
×
  • Create New...