[Scrolltrigger scrolling a different container (Scrolling issue)]

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?

See the Pen jOmdPze by ladybytez (@ladybytez) on CodePen

[Adding multiple classes with different styling to a tween or scrolltrigger...?]

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? 

[How to remove scrolltrigger animation when we've scrolled past the section?]

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

 

 

[How to remove scrolltrigger animation when we've scrolled past the section?]

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

[How to remove scrolltrigger animation when we've scrolled past the section?]

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?

See the Pen dyWKXKp by ladybytez (@ladybytez) on CodePen

[Scrolling an inside container first then scroll the outside window. How to do that?]

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?

[using z index and for each to trigger overlapping of layers...]

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!

[using z index and for each to trigger overlapping of layers...]

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?

 

See the Pen RwVxYBP by ladybytez (@ladybytez) on CodePen

[Struggling with combining z-index with scrollTrigger and gsap timeline...]

Hi! So I managed to get them to overlap but it's not scrolling properly...

Can I get some help with my code? 

[Can someone explain to me how snapping to a "1/5" integer works?]

Yes it does! thank you

[Struggling with combining z-index with scrollTrigger and gsap timeline...]

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: 

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

 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!

See the Pen jOmYZNz by ladybytez (@ladybytez) on CodePen

[Layered pinning is causing overlap of text. How to solve this?]

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? 

See the Pen oNWpwOa by ladybytez (@ladybytez) on CodePen

[Can someone explain to me how snapping to a "1/5" integer works?]

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? 

[Infinite scrolling with ScrollTrigger]

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

[Infinite scrolling with ScrollTrigger]

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!

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen