Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Lars Ejaas

  • Content Count

  • Joined

  • Last visited

Community Reputation

6 Newbie

About Lars Ejaas

  • Rank
  1. Thanks a lot ZachSaucier! -webkit-tap-highlight-color: transparent did the trick! You truly are a magician: That would honestly have taken me literally forever to debug!
  2. Hi First of all: I am SO impressed with GSAP 3 - it's just SO impressive and intuitive to work with: thanks! I have implemented GSAP 3 and the draggable plugin in a browser extension I am working on, that includes a Jog Dial. However, I am having an issue, where I get a square-shaped box on top of the dial when i rotate it on my win 10 touch screen. I get no issues when I rotate it with the mouse, but when I use my finger on the touch-screen I get a transparent gray overlay when I press the dial. I am thinking that this is some sort of CSS issue (and hopefully an easy fix). I have the newest GSAP 3 + draggable min. files included in the extension. I cannot replicate the issue on codepen - but I got a LOT of CSS going on in my extension, so it is really hard for me to find the origin of the issue. I made a small GIF of the issue here: https://i.imgur.com/PU93y7z.gifv I hate to ask about something that probably is just a "quick" fix - but I am a bit stuck debugging this - anyone seen anything similar?
  3. Thanks Mikel! elegantseagulls was so kind to introduce me to the SVGOMG tool already. But I must admit that my Pen was made kind of fast to show the JavaScript. I am still working on my first GSAP animation - where this technique is implemented. Maybe I should even share the final result when I am done ?
  4. Hi everybody I just wanted to share how you can animate an SVG signature with a clipping path. I took me some time to get it right, and didn't really find a good guide to this - so thought I would share it. Browser support will probably be better using the DRAWsvg plugin. But if you want to do it without the plugin - this is the way to do it: https://codepen.io/lars-ejaas/pen/mdbobdj ONE IMPORTANT NOTE! It is very crucial that you make sure that the inline SVG DOES not contain any STROKE-dasharray or STROKE-dashoffset data under "style" for the clipping path: Otherwise the animation won't work! just manually delete the data under <STYLE>
  5. Thanks for your quick answer OSUblake. I definitely got some things to work from now. It is hard not to be a bit hyped by all the cool things you can do with GSAP. Now I just need to get going and start coding ?
  6. Thanks a lot elegantseagulls SVG OMG really looks like the "missing tool" - thanks! I am still thinking that it might actually be the easiest path to simply include the JavaScript code directly inside the SVG - as long as I place the SVG inside <Object> tags it seems to work really well. This way it will also be a lot easier to make small changes to the SVG afterwards
  7. Hi again Sorry for all the questions: Still trying to get my "head wrapped around" doing this the best way... Is there any reason why most people use inline SVG? I have played a bit around with including the JS code directly in the SVG. This way everything is included in the image - and one can simply insert the image/banner on the page as needed. Quick example: https://traderrookie.com/images/blackboard_includingJS.svg I have tried it in Firefox, Google Chrome, Safari and Internet Explorer so far - seems to work fine...
  8. Hi everybody I am all new to GreenSock animations - so please bare with me if the questions already have been answered. I have actually used quite a bit of time trying to find the answers myself I primarily work with Joomla CMS, and InkScape for SVG's. I have made a few small animations with CSS, but would really like to take the webanimations further - so this is why I have started looking into GreenSock In Joomla I keep hitting content-limits on making inline SVG's so I need some way to inject SVG's to the DOM and still be able to access paths, groups and so on for animations. I know some javaScript, but my knowledge is somewhat limited - and JQuery doesn't really make much sense to me. 1. Can anyone help with best practice for injecting SVG's to the DOM? Am I doing this right? I have made a pen where I have included one of my SVG's in <object>tags and some JS to access the script (I made the JS without JQuery dependency because I still have limited knowledge to get this working). It works on my own homepage in all major browsers, but I am new to CodePen and can't really get it working over here? (I tried visualizing in the HTML how I included the .js files on my homepage). https://codepen.io/lars-ejaas/pen/qBWvqgy 2. Anyone with experience with exporting SVG's from inkscape for web? I have tried Save As > Optimized SVG - but the layers tend to "jump around" a bit and making the SVG useless. Not sure what I am doing wrong? Inkscape's native SVG's work allright, but it would be nice to be able to limit the size on them somewhat... Sorry for the long post - I hope some of you might be able to help a bit - thanks