ladybytez

Hi there, I am stuck with this supposedly mediocre issue I have a square on a fixed position wrapped within a container wrapper. Inside this wrapper, there is also text. The square rotates as per this but the text is now being cut off. Can anyone help me? Also is it possible to have the square starts rolling immediately the moment user scrolls?

How can we add two different styles but happening at the same time to scrollTrigger onEnter / on Leave function? for example: onEnter: () => gsap.to('.text-1', {color: 'black'}) gsap.to('.text-2', {color: 'red'}), I tried this but it doesnt work. Whats the best way for this problem?

Hi there! I decided to update the code and now I am stuck trying to change the square colour on the last section (section3) to another colour. Is it possible to do something like this with ScrollTrigger since we can't scroll anymore when we're on section 3? section 1- pink square section 2- white square section 3- orange square https://codepen.io/ladybytez/pen/dyWKXKp

I think I figured this out! Leaving it here if anyone wanna improve / refer to this

I managed to get the square to change colour on scroll to a specific section. What's the best way to get the square to revert colour when respective section is scrolled to? Do I have to do a scrolltrigger for each section?

Hi I am just thinking out loud if it's possible to scroll an inner container first, then scroll the outside container? If yes, how do we go about with that? Seems like the inner container will always be relative to the outside container's scroll...Any idea?

Hi Cassie, thank you for this! Very helpful. Yes this is a progression from the previous thread. Apologies. I will take note to post in one thread in future to prevent confusion!

Hi there, I am trying to use z index and div height manipulation to allow different div to show on scroll...It works for two divs but when I add a third div, the divs are haywired as seen here. Can anyone help me out here?

Hi! So I managed to get them to overlap but it's not scrolling properly... Can I get some help with my code? https://codepen.io/ladybytez/pen/jOmYZNz

Yes it does! thank you

Hi there, I feel like I am almost there but not really.... I am trying to create a scrollable container within a section. This container will be scrollable and each scroll within this container will open up another div / chapter... basically trying to recreate this: https://codepen.io/akapowl/pen/6a2480c123d88dc391faba0ea5cc590f inside the section. I am encountering two issues 1. the scrolling does not work 2. when i add this new "scrolltrigger timeline" code, the infinity scroll stops working. Appreciate the help. Trying to learn GSAP with all the available demos!

I forked the previous code done for layered pinning to play around with the code... How do I ensure the text does not overflow see purple panel code and scrolling only happens again when the text is over?

I've read the documentation and understand how to integrate snapping to my code but I am not quite 100% sure how to use it with integers and division operator. if snap = 1/[array.length]-1 if array.length is say 5 so snap = 1/5 ... will this not return a decimal point?

yes! this is what im looking for. thank you for the help!!

Hi there, I am trying to use this code to create parallax sections. How do I add a repeat section for this code? For example, when user hits the bottom of the page, I want the first section to repeat, thereby creating a loop. appreciate the help!