Jump to content


  • Posts

  • Joined

  • Last visited

ceindeg's Achievements


Newbie (1/14)



  1. 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!!
  2. @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?
  3. @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 :-\
  4. 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.
  5. @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...
  6. Hi Craig, I mentioned in my post I'm already using the MorphSVG plugin so that wouldnt be the issue.
  7. 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
  8. 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
  9. 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.