RoaldKamman

Yeah, thanks @ZachSaucier I totally missed that from the start.

this is getting more confusing with every second I reversed everything i did and only changed tweenLite to gsap.to. ALL I really want is to make sure it makes a 180 degree turn with every click. https://codepen.io/RoaldKamman/pen/vYLyZWB I have no clue what I'm supposed to look for within the 2 long blogsposts. It's pretty overwhelming as a beginner. Please be a little more specific. Nevermind I need a break. I just totally missed your example. let me extract the lessons from that. My bad

sooo something lime this? except it throws and error for the closing bracket of the tl? https://codepen.io/RoaldKamman/pen/vYLyZWB

Hey, I'm just trying to make the arrow do the same 180degree rotation on a second click when closing and opening the navigation. So every time it gets clicked it rotates 180 degrees from where it's at. I'm not sure what the best method is for this. I tried yoyo() reverse() runBackwards() but I also can't get any of them to work. Thanks

Thanks for helping out @Carl I got everything working now! Here is the implosion effect I was working on. It's going to be the intro to my fewd portfolio that I'm working on. https://codepen.io/RoaldKamman/pen/bGVoxOK?__cf_chl_captcha_tk__=7e9313fc957d36a6edfde2fc032a65c2b41a49cf-1588377931-0-AdUN5LSnNZFzqDm_MV5yJNE4TdXOLw2Dh0cvlo-e19C8DXE3VCUpDFGugb_lOig1h77xc_z6jX7MgMu0slOac5Pzl1hKpyRzoPh9MvEqNyASOdM4gyg7SYs9QAkZDPnJ8NpF3mje9ulgyW29xbzQuS6CMfEcPe_rv2fsDexrQGc28xf09BiEY2f7reOX_4sGMoVHZJcXED-HClDKjIBxjQcB-6SiEkx2BhyN4E6Q8vHLsEVkgI19sUuTp8wij0ARAIfXZJaRZudy26CF5nkuO4CFDjNLpRLDig_d36o_XjdXZiIzUfVxDnyYOLNwlpU-zK9Ts3CqWhgUFRpFW449C_iN22ergH0h6_Y5fruRkd9-5_JW4TSAecJL7qaNnXkRPw6q9kP8rkm9A91KV6djDxefjLXcQgqBlk07CtmOpP6SDPClzKhd89_MVSL3RIl9sqI4_ECe3sfGkCvjq8A0pqDivT43dlvYyXc0fVfH0xnJPoP7prZY4PVflVr9uCrPuqa8qfRWuajd7C85ljNeYqiIBPhRLnhWStCGxgUeXXIoy1AMNaK7KM3kq1ijyhyCoQ

Is there a way to disable the mouse events without reducing opacity? If you hover out of the button before the transition is completed it still triggers events.

That worked! Thank you, Carl.

Hey everyone, Thanks for taking your time to try and help out. This is my first time animating through JavasCript and GSAP so please bare with me. I'm currently running into an issue where I'm trying to create an animation on this SVG that has some hover and click event listeners/handlers. At some point the original elements that I bound to the handlers disappears intentionally. But the click and hover handlers are still on the same coordinates. And they keep triggering events. I tried: * 1 - I tried disabling the elements with things like: $buttonGroup.disabled = true;. I believe this worked with the click event but failed on the hover handler when I tried it. * 2 - building an if statement around the hover function that checks if the button has been clicked. let hoverActive = true;. gets set to hoverActive = false; when the button is clicked. The spiral and button elements shouldn't work after the button has been clicked once. And not reappear through hover or click actions. Any help would be highly appreciated :).

Yeah, I can see that. I started this 7 days ago... You wouldn't happen to be able to point me into an article or guide that explains in detail how to do that asset prep would you? I do like being creative and I still believe that animating SVG's can be fun even though so far it's been frustrating. Next time I could not make the same mistakes.

Yeah, I tried using a different svg entirely and it worked fine. So i thought it might be somehow related to the scaling problem which I finally managed to fix. But even after fixing that it's still going to the left. Hopefully it will behave consistent across all elements that I want to scale. I don't really care if it's a little to the left in chrome only as long as the rest still works. I guess I will find out tomorrow because I am DONE for today man. This was frustrating enough for today. Thanks for your help

I didn't catch that part, I had no idea. I thought you would already be able to. https://codepen.io/RoaldKamman/pen/rNOzboa uuuuuhm.... so far it looks like I need some pro version for that.

Just real quick before I head out, The code in the codepen I posted originally is identical but I believe that the problem is browser related. I just tried microsoft edge(and cringed hard) but the transformOrigin works correctly there. So the transformOrigin seems to be breaking only with google chrome. Is there any known issues/solutions for chrome? Thanks again.

Thanks Zach and Craig, I really appreciate the fast responses. I'm glad to know that the scaling can be fixed. I will do my best to recreate the issue in a new demo. But first I have to cut off and run some errands.

Hey Zach, Thank you for helping out. Do you know how to turn transforms off in Inkscape? That's the program used to create this. I imagine I could also remove the transform html myself but I can also imagine that could break everything. I hope this loom video serves as a good demo, otherwise please let me know what kind of demo you need. https://www.loom.com/share/1aff03ff6a994bfe9977b57aebe64269

Hey everyone, I'm new to creating SVG's and gsap so please keep that in mind. I currently have 2 main issues. 1: even though the scale is set to 1.01 the selected elements scales way WAY larger. 2: the transform origin doesn't work in google chrome (it works in codepen). In google chrome it looks like it's going further to the left (attached picture). I would really appreciate any help.