[Motionpath responsiveness issue]

I am not sure what is the issue with the current setup. But isn't it easier to just do with SVG and motion path. 

[use frames as duration instead of seconds]

Sorry I won't be able to help without a demo. 

 

Hopefully, someone else can help.

[For each doesn't work for me]

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. 

 

See the Pen XWoLqJX?editors=0010 by tripti1410 (@tripti1410) on CodePen

[Start autoscroll after seeing the div]

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! 

 

See the Pen yLGdKXG?editors=0010 by tripti1410 (@tripti1410) on CodePen

[use frames as duration instead of seconds]

Yes, it will still have duration. I have added a console for this example to get the duration. This is using scrub. 

 

See the Pen WNLqdEV?editors=0011 by tripti1410 (@tripti1410) on CodePen

[GSAP 2 pin is not working in same page but different section. Can anyone help please.]

Updated the pen is that how you want 

[GSAP 2 pin is not working in same page but different section. Can anyone help please.]

 "pinSpacing: false" will remove the extra white space just that. Layout will get fix.  

 

See the Pen RwEzVqW by tripti1410 (@tripti1410) on CodePen

[ScrollTrigger Dynamic calculations help]

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. 

 

 

[use frames as duration instead of seconds]

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();" 

 

[GSAP 2 pin is not working in same page but different section. Can anyone help please.]

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

[ScrollTrigger Dynamic calculations help]

Hi, 

 

Here is the updated version of your pen. Hope it helps. I removed a bunch of unnecessary CSS. 

See the Pen XWoLRNE by tripti1410 (@tripti1410) on CodePen

 

[How to create GSAP hover split text]

Hi, 

 

Here's a pen. It might not be the best, but it'll give you an idea. You can refine it further.

See the Pen xxMLoGZ?editors=1010 by tripti1410 (@tripti1410) on CodePen

 

 

 

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/ 

[Need help in refining/improving scroll animations on a landing page, up to ~100$/h]

Hi, 

 

I sent you an email . 

[Chaging Class with Scroll Trigger]

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.

[Chaging Class with Scroll Trigger]

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. 

See the Pen BadYrrY by tripti1410 (@tripti1410) on CodePen

 

if this is not the problem you are trying to solve, then please describe better what you are trying to achieve with this. 

[ScrollTrigger makes section disappear on mobile]

Hi, 

 

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

 

[Help wanted | How can I achieve this?]

Hi, 

 

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

[How To: Div fade-out and div fade-in on scroll]

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. 

[How To: Div fade-out and div fade-in on scroll]

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. 

See the Pen gOZRRRx by tripti1410 (@tripti1410) on CodePen

[How To: Div fade-out and div fade-in on scroll]

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. 

[How To: Div fade-out and div fade-in on scroll]

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. 

 

See the Pen LYMLRZj by tripti1410 (@tripti1410) on CodePen

 

 

[Combating cancelled tween on fast scroll]

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. 

See the Pen LYMLVZM by tripti1410 (@tripti1410) on CodePen

 

 

Here is with splitText plugin. Spliting text manually just for animation is not great. 

See the Pen MWZoamx by tripti1410 (@tripti1410) on CodePen

Hope it helps!
 

[SplitText - Stagger the animation on between lines]

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.

See the Pen qBLmKNg?editors=1010 by tripti1410 (@tripti1410) on CodePen

Hope it helps!

[Svg morph fixing]

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. 

[How can I create this kind of Carousel?]

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