Trapti

Sorry I won't be able to help without a demo. Hopefully, someone else can help.

Hi, Check this out. Target the text of each link. In the code given, it was using "text.chars" which applied for both the links. https://codepen.io/tripti1410/pen/XWoLqJX?editors=0010

Hi, Here's a pen. I took out some code for simplicity. This is just autoScroll paused initially and when scroll trigger ".works" and user starts scroll down autoScroll plays. Hope it helps! https://codepen.io/tripti1410/pen/yLGdKXG?editors=0010

Yes, it will still have duration. I have added a console for this example to get the duration. This is using scrub. https://codepen.io/tripti1410/pen/WNLqdEV?editors=0011

Updated the pen is that how you want

"pinSpacing: false" will remove the extra white space just that. Layout will get fix. https://codepen.io/tripti1410/pen/RwEzVqW

Hi, I updated the pen. It should work for window resize as well. I was not taking about grid or flex. There was bunch of position values which I removed. Anyways it was just cleanup.

Hi, If you can provide a demo, it will be better. If the image sequence is animating, then calculate the total duration of that timeline and use that as value. "tl.duration();"

You need to use "pinSpacing: false" to remove the extra space.

Hi, Here is the updated version of your pen. Hope it helps. I removed a bunch of unnecessary CSS. https://codepen.io/tripti1410/pen/XWoLRNE

Hi, Here's a pen. It might not be the best, but it'll give you an idea. You can refine it further. https://codepen.io/tripti1410/pen/xxMLoGZ?editors=1010 Here is a blog I wrote on the same. Also created the same effect using CSS. https://www.trapti.dev/blog/creating-a-text-rolling-hover-effect-with-css-and-gsap/

Hi, I sent you an email .

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