Trapti

gsap.to(header,{ scrollTrigger:{ trigger: ".dark", start: "top 80%", end: "bottom 20", toggleActions: "play reverse play reverse", markers: true, toggleClass: "dark-mode" }, // '-webkit-filter':'invert(100%)', // filter: 'invert(100%)' }); You need to use it this way. It is a Syntax issue.

I am assuming you want to change the color of the header based on the section which is in viewport. As the section changes on scroll, header color should also change. This codepen will be helpful. https://codepen.io/tripti1410/pen/BadYrrY if this is not the problem you are trying to solve, then please describe better what you are trying to achieve with this.

Hi, I checked, and it's working fine for me. You are talking about the pinned horizontal section, right?

Hi, Create SVG for various colored strips and then animate them using GSAP.

The code is working fine as I said. tl.to("#scrolling-text-1", { y: "-50%", opacity: 0 }).fromTo( "#scrolling-text-2", { y: "0%", opacity: 0 }, {opacity: 1, color: "red"} ); This is code snippet of your pen. I just added color: red. that animates means it's working. Also, y: 0 is not doing anything and it just changing the opacity.

Hi, Animation is working fine it is the matter of timing. Animation finishes by the time the para is in the viewport. Change scroll trigger start and end accordingly to perfect the timing. Check this. Also, if only a paragraph needs to be animated, then target paragraph and not the entire container. https://codepen.io/tripti1410/full/gOZRRRx

Hi, If this is working in simple pen. Then there must be some issue in the HTML and CSS setup you have for your project. I will suggest now you bring the HTML and CSS of your project to the codepen and try to make it work. It will be easier to figure out the issue.

Hi, I am not sure what should be the end result you desire. Here is your code snippet working for 2 simple texts in a timeline with some correction. https://codepen.io/tripti1410/pen/LYMLRZj

Hi, I changed the approach to this animation. Check pen. Created a single timeline for all the text animation and triggered it for ".hero" section. I felt having scrolltrigger for all the texts is way too much. Change the duration and the stagger value if it is required. Also setting grey color for text on CSS and changing to black with JS is not great idea. If JS does not load than text will look faded and will not be readable for some users. https://codepen.io/tripti1410/pen/LYMLVZM Here is with splitText plugin. Spliting text manually just for animation is not great. https://codepen.io/tripti1410/pen/MWZoamx Hope it helps!

Hi, There is a scrollTrigger attach for each quote so the animation starts at the trigger point. You can include markers and check. If you want these to animate at specific durations and in one after the other in a flow, then do not use scroll trigger and use position parameters. Here is a pen for the same without scrollTrigger. https://codepen.io/tripti1410/pen/qBLmKNg?editors=1010 Hope it helps!

Hi, My approach would be to play with the start value of the motion path. Like for the first time, start value should be 0. And next round onwards may 0.3-0.4 whichever value is suitable for text to begin with circle start. I haven't tried something like this before so not sure whether this will work. Hope it helps.

So remove the scroll trigger code and keep only the next and prev click functionality.

Hi, You can refer this pen. https://codepen.io/GreenSock/pen/BaQXjWw

It was not ending at the top. It was going back to its original position where it had been placed. I added some content above this text to change the position of this text on the page and the start trigger. You can check the pen.

Hi, I think the problem is not clear. Final SVG is a path which has many points which point you want to move on cursor? Changing the point on a cursor move is easy. All you have to do is convert SVG path to Template literals and change the particular coordinate with cursor's coordinate in JS. If the shape needs to modify, then use morph plugin gsap. Here it is not clear the behaviour you are trying to achieve. This is the pen I did for line drawing SVG on the cursor move. https://codepen.io/tripti1410/pen/VwLZEZB?editors=1010