Lars Ejaas

@mikeland @GreenSock - thanks a lot for helping out! Sorry for taking so long to respond!I Got "stuck" with other projects and didn#t get to finish this animation before today. This is the result, a bit different than my initial idea, but I like how it turned out in the end ? https://codepen.io/lars-ejaas/pen/zYqjmvZ

Thanks Mikkel! That seem to resolve the "sticky" problem when the arrow is turning - brilliant! I have made a new codePen with the updates. https://codepen.io/lars-ejaas/pen/GRZEymr?editors=0010 The initial animation is perfect. But I still do not understand why the Tl_menuUpDown behaves this odd when I click the arrow?

I am working on a GSAP animation and am close to finished, but I simply can't get it working as intended. The idea is, that the initial animation will run (click the "movie play" icon to restart the animation) and after that it is an interactive menu. The canvas should scroll op and down when clicking on the arrow. Problems: - when clicking the arrow, the arrow and string should pull down slightly (Tl_pull) and the canvas roll-up. On the top, the Tl_pull should work in a similar way and then fire the canvas roll down animation. But right now the Tl_menuUpDown.reversed version is behaving oddly (the canvas is just rolled really quickly to the top) and then the Tl_pull timeline is fired afterwards!?? - Look at the initial animation. Canvas is rolling down and the string is "rotated" out to the viewer (part of the Tl_menuUpDown animation) and the arrow is turned 180 degr. (as it should). But the string should stay there only very briefly and then roll down again immediately - it stays "stuck" at the top - can't figure out why? I initially had a Tl_menuUpDown.to line (I have commented it out) but the arrow didn't turn? I am unsure how to avoid the "sticky" effect when the arrow is turning. I hope I made my intentions clear with the animation - I think it will make more sense when you see it live! And BTW: GSAP is really awesome - I have recently worked with the new ScrollTrigger plugin - I am BLOWN AWAY - wow!

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!

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?

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 ?

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>

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 ?

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

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. I have tried it in Firefox, Google Chrome, Safari and Internet Explorer so far - seems to work fine...

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