curajuice

Thank you very much Rodrigo! It works great now, and I learned a couple of things new. 🙏🏼

I understand that. Here I have a codepen example with the same behavior. As you can see, the .wrapper which is the trigger element that gets pinned gets a height and max height of 0. Overwriting it won't work and because of that behavior, I am not able to give each section a min-height: 100vh. Another question. When you have sections that have different height like that, the long sections will scroll much faster, and on mobile way to fast. is there anyway I can control that? I appreciate the help.

Hi there! This is more a question than an ask-for-help post. Is there anyone who knows and can confirm if this is a normal behavior or not? Basically, I am using scrolltrigger to create a stacked card effect. The only thing is I noticed that the pinned element which is the <main></main> tag gets a height and max-height of 0. the content of the <main> is still visible. And I know that the pin-spacer added those properties to the <main> but why 0? The <main> should keep its height right? Update: Another question. When you have sections that have different height like that, the long sections will scroll much faster, and on mobile way to fast. is there anyway I can control that? I appreciate the help.

Oops. That was not my intention! Ill move it to the main forum. Thank you.

Hi there! This is more a question than an ask-for-help post. Is there anyone who knows and can confirm if this is a normal behavior or not? Basically, I am using scrolltrigger to create a stacked card effect. The only thing is I noticed that the pinned element which is the <main></main> tag gets a height and max-height of 0. the content of the <main> is still visible. And I know that the pin-spacer added those properties to the <main> but why 0? The <main> should keep its height right?

Hi there! Thanks for the replies. Solved! My animations work more predictable now!

Hi there, Is there anyone who can tell me why animating a property to 0 ,doesn't get to 0? I have a text 115% offscreen. I want to animate it to 0, so it can get to its intended position. Thanks! screenshot example code: tl.fromTo( el.current, { duration: 3, ease: "linear", x: "115%", }, { x: "0%", } )

@Cassie lol I spent more than 2 hours to come and find out that....... I forgot the .current on the scroller and trigger. wow this is ridiculous ?? thanks cassie!

Unfortunately no luck. I studied the codes, refactor my code and did all sort of things. Thanks though!

Hi there, I have searched all over the internet for hours without any luck. My guess is it has something to do with the gsap.registerPlugin(ScrollTrigger) I have attached some screenshots. I would appreciate any help. Thank you!