_username7777

I have a page where the user can add different sections in the CMS. These are then loaded on the page, a lot of them use scrollTrigger. When I just have one scrollTrigger component on the page, it works great, however when there is more than one, it starts to become really jumpy and bugs out I know you can create timelines, but I'm not always sure of the order in which the user will upload the different sections. If i've understood the docs correctly though, this shouldn't matter and its just triggered when the element comes into the viewport? I've made a codepen, where i've combined the different examples of scrollTrigger I am using and it works ok https://codepen.io/sl77/pen/jOYEoNO However, if i move up the last component to a different section, like here: https://codepen.io/sl77/pen/wvpBbpB , it starts to become jumpy, and the image overlaps the container even though it is set to 100vh

I resolved it here: https://codepen.io/sophielihenry/pen/yLpyKRQ I overcomplicated it and just had to add the trigger to the singular panel container

I have these two images where I want to use a parallax effect. I don't know what size the larger images will be, so I want to account for portrait and landscape I want to position the green box so it starts exactly centered within the larger image, and then finishes its parallax just at the top of the container const heightDiff = pImage.offsetHeight - pImage.parentElement.offsetHeight; yPercent: -heightDiff yPercent: heightDiff So I've created this variable, where it calculates it dynamically, however inputting the variable in my yPercent breaks the parallax Is this the right idea?

https://codepen.io/sophielihenry/pen/yLpyKRQ I have made the effect I want using scrollTrigger, where the full screen image scrolls over the red background However, once this happens, I now want the rest of the page to carry on scrolling as normal. For example, I should be able to see the blue background. I tried adding "end": "bottom bottom" but this loses the layered pinning effect.

@OSUblake Thanks for that example! I realised I misunderstood the behaviour, as you're right it does look funky.. It's meant to be the full screen background frozen, until the text within it has finished scrolling upwards, and then when the bottom of the text div hits the top of the container, then the background unfreezes Apologies, I think i got confused! https://codepen.io/sophielihenry/pen/popzeqR I reversed this part: y: () => orangeContent.offsetHeight - orange.offsetHeight, And its showing the right behaviour now, where the text scrolls up! I still need to detect as soon as the bottom of this text has scrolled up, the full screen background should unfreeze, and i can now scrolll down. There seems to be a bit of a lag still

@OSUblake Yes thank you, your example is more inline with the behaviour i expected! You're right though, its not very smooth.. The text within orange content in my actual website is about 75% full, which makes it look even funkier.. When you scroll down, the text should scroll smoothly until the bottom of the text hits the container and then releases the fixed orange background Is there anything that can make the experience smoother? thanks!

https://codepen.io/GreenSock/pen/YzXdbQo I want to pin/freeze the orange background container with full height (100vh) until the text has finished scrolling through.Once the text hits the bottom, the orange background should unfreeze and then I can continue scrolling until the next panel If I add pin: true to #orange, it correctly freezes the background, however then I lose the scrolling text ScrollTrigger.create({ trigger: "#orange", start: "top top", end: "bottom 150px", pin: true }); How do i combine a pinned background, as well as pinned text?