Leaderboard

In case it's useful, I put together a helper function that'll normalize all the values inside a path so that they're between 0 and 1: function normalizePath(path) { path = gsap.utils.toArray(path); if (!path[0].hasAttribute("d")) { path = gsap.utils.toArray(path[0].children); } if (path.length > 1) { path.forEach(normalizePath); return path; } let _svgPathExp = /[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig, _scientific = /[\+\-]?\d*\.?\d+e[\+\-]?\d+/ig, d = path[0].getAttribute("d"), a = d.replace(_scientific, m => { let n = +m; return (n < 0.0001 && n > -0.0001) ? 0 : n; }).match(_svgPathExp), nums = a.filter(n => !isNaN(n)).map(n => +n), normalize = gsap.utils.normalize(Math.min(...nums), Math.max(...nums)), finals = a.map(val => isNaN(val) ? val : normalize(+val)), s = "", prevWasCommand; finals.forEach((value, i) => { let isCommand = isNaN(value) s += (isCommand && i ? " " : prevWasCommand || !i ? "" : ",") + value; prevWasCommand = isCommand; }); path[0].setAttribute("d", s); return path; } Usage: normalizePath("#mask") So that'll make a path like this: <path d="M3903,6453.410182017132 L300,1.542786465904 L-10000,1481.542786465904 L-10000,6453.410182017132 Z"></path> Into this: <path d="M0.8449920014268762,1 L0.6260100420554431,0.6078705068325081 L0,0.6978214643317369 L0,1 Z"></path> I hope that helps somebody.

Hi @webenaco_Dev you could do this multiple ways. The route I would go is having two layers on top of each other (with the two different colors) and then animating the CSS clip-path of the top most element. I really like the following tool to create my clip-paths https://bennettfeely.com/clippy/ and keep in mind if you want to animate between two complex strings in GSAP the strings must have the same value (eg give all numbers a % sign even if it is not needed by the browser). If you still have trouble be sure to post a minimal demo with what you've treid, that way we can see your thought process and thus better help you understand the tools! I also recommend creating a new topic and reference this one if you think it is relevant. Hope it helps and happy tweening!

Hi @TomTim welcome to the forum! You'd defined a timeline outside everything and add all the tweens to a that timeline then on scroll of the ScrollTrigger it would play all the tweens of the one timeline and then quickly reset it for the next timeline. If you scope the timeline to the current loop (and the ScrollTrigger to) everything works as expected. This is all built in to ScrollSmoother https://gsap.com/docs/v3/Plugins/ScrollSmoother/, if you're are looking for a robust implementation of this function. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/wvOOKVO?editors=0010

You guys are right, thank you for taking time to help me out, I appreciate it a lot!

I would give the elements that care clickable and [data-id="TITLE"] (eg <button class="branch-name__btn" data-id="cebu">Cebu</button> ) attribute and then get that in the Javascript code. Just set the data attribute to the same value as you've given the ID of the section. Than on click get that .dataset.id using javascript and put it in a querySelector() to get the element based on that id. This all is basic Javascript and has nothing to with GSAP, so be sure to brush up on some Javascript knowledge if you want to take your skills a step further. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOJdovx?editors=1001

Invert the wheelSpeed to a negative value then. And for bounds, you will need to apply JavaScript logic to calculate those and clamp the numbers in the callback.

@Rodrigo Thank man , Your help really meant a lot to me. Lots of love to the Community.

The effect was infact really easy to do, I just got the mouse Acceleration and Multiplied it by Circle Width (CircleWidth * MouseAcceleration) thus changing the width to Expanded when Moving Mouse, and the Rotation was achieved using Math.tan() Function to get Mouse Movemenet Direction. Feel free to Experiment with the Setting on this codepen to get desired results https://codepen.io/blitzve0/pen/vYJGPaa