Robbor

Thanks mvaneijgen, Now I finally understand it It works now. Many thanks for the help to everyone. Great forum.

Hi Rodrigo, thank you for your quick response. I'm researching again because I think we're addressing a symptom here, but not the cause. Maybe I haven't fully understood it yet What I mean is: why does everything work perfectly with position: static, but no longer with position:relative. As soon as I switch to relative, the mouse coordinates are no longer correct and the cursor is offset. I don't always know the offset, so your solution doesn't work 100% for me. Example: container has max-width:1000px, margin:auto. Or content with variable height on top ( same problem with the Y coordinate offset). https://jsfiddle.net/rsk257bd/1/

Hey there, Thanks for the help that has already been provided here. Everything works for me. But now I have encountered a problem. If I place a container with 90% width, position relative and margin-auto (all 3 must haves) around your demo, the cursor has an offset to the actual mouse position. Seen here. I'm currently in the process of researching what it is. Maybe it's easy for pros? I'm still a beginner learning GSAP here. https://jsfiddle.net/epLra8bj/ Thank you for your time. Greetings Robin

I see Thanks for your thoughts. Makes sense. Ill start with the project tomorrow so I ll check how easy it is to get started with GSAP as a noob

Hi Zach, thanks for your help. Do you guys think I even need a complex library like GS or is it possible with some basic javascript?

Hi Mikel, thanks for the demos. Gruß nach Hamburg

Hi there, I'm new to svg animation and started my research on what (js library) I need for my project. And if I even need one. I want to rebuild something like the link below. Basically just using another path. I saw the path is not an svg but created using javascript. I would prefer to just export my illustrator path as svg and then animate it. But thats details. I played around with some basic js. Im not new to js or vector graphics. So drawing an svg path connected to scrolling is not the problem. But what I did not understand or know how to solve are things like: length of drawn line, red dot positioning, fade in objects fill, keeping focus when the line draws vertical objects and the craziest part when the dot and the line ends in the heart at very bottom. Final: https://www.lemonade.com/giveback-2019 Very first basic approach https://codepen.io/robbor/pen/bGbaGeY Excuse my poor english fellas. Cheers robbor