.png.bef9a7563d00103e576a141004129c21.png)
Trapti
6 Followers
Recent Profile Visitors
3,382 profile views
Trapti's Achievements
-
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/
- 4 replies
-
- 2
-
-
- hover event
- hover effect
- (and 2 more)
-
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?
