Will.I.Am

For Cassies demo, I can speed scroll through the whole thing (dont actually have to see the animations in the content part actually complete), the other demo (one I included), no matter how much i scroll, it stops/doesnt do anything until it finishes the animation in the content area, then goes to the next slide

not exactly what I mean, but basically do the example i gave, and after the 4th "forced" scroll (scroll that sorta does its animation and you cant do anything till it finishes, and then you scroll to the next one, it does its animation) just go into a normal scrolling page (rest of the content)

I am looking at this https://codepen.io/GreenSock/pen/XWzRraJ but wondering, is it possible after the 4th slide, to continue down the page to the rest of the content... I basically want to do a full page leadspace animation with the pinning in the example above, but then once its on the 4th slide, just resume scrolling down the page. I do not have a codepen to start with cause I want to see even if feasible.

so i have most of my stuff going, but is there a way to use the parent container as the triggers? for example, use the left left as the trigger, but make the left the parents left, and not the viewport?

BTW I was using console messages in that last CodePen

@Cassie So here is what I tried... it kinda works, but if the screen is wide then it tells me two are in view https://codepen.io/Will-I-Am-CodePen/pen/XWEEmPO also wanted to ask, when it gets to the end of the horizontal scroll... why does it look slow?

@Cassie So I tried looking at what you provided... and still struggling, I tried to add a OnUpdate to the scrolltrigger , and then dtermine which element is 51% in the viewport, but it constantly tells me they are all inviewport

@Cassie I am stuck, i changed my stuff to look like your code https://codepen.io/GreenSock/pen/bGvazZg but i cant for the life of me figure out how to trigger a function when the elements get past the halfway mark for each one... everytime one of them scrolls past 50%of the page I wanted to change some text just above it, in another element just outside the scroll... i am pulling my hair out... LOL

@Cassie so you keep mentioning i am using "overflow:hidden" ... what would the proper way to do this be?

@Cassie I think i am at a good point with your help, but can you explain the xpercent part vs end ? am I missing something, there is some kind of correlation between these right? so i guess the question is... Im assuming the xpercent is the percent width of the elements to scroll horizontally ... and am wondering, if there is aformula to generate that -300 (assuming 300 cause 4 slides, minus the first one = 3, multiply by 100) .. but what happens if they are not all the same width i guess is what I asking

@Cassie ok, much further then I have ever been... LOL Questions, you have a container element around the 2,3,4 sections, is there a reason for that, could it just be around section 3? Another question, I am assuming I can make the width dynamic based on the section3 container width instead of just +=3000 and lastly, I see your codepen does pretty much exactly what I was trying to describe, would you be able to give me some hints to where the actual content is? I see it scrolling to the left, but a big blank space, even if i make the 2nd SECTION background red or something. appreciate the help, much appreciated

per my codepen i setup at https://codepen.io/Will-I-Am-CodePen/pen/yLKpRjz I have the basics setup, im just trying to figure out how do i trigger the green section when the center hits the center of the viewport, to scroll the elements inside the green section horizontally. I am not sure I understand the "go for three separate ScrollTriggers" I updated my codepen to show you that what I tried, the boxes above keep scrolling, and the ones below do not come into view now till the horizontal is done (well currently its only +=500 more.

I want to have a horizontal scroll in the middle of the page (green section) without it taking up the whole height of the page. I am trying to figure out if there is a way to just stop the vertical scroll as user scrolls, and do an animation on scroll for items in the green section ... horizontally .. when it gets to the end, continue down the rest of the existing page. I was looking at this codepen (https://codepen.io/ekfuhrmann/pen/NWpGeZX) , but it requires the section 3 to be full height... I want to be able to stay in the middle of the page visible there (section 2 and 4) if 3 is only 400px high or something Is this possible?

its the smoothscroller that does it too me.. I tried to add scrollsmoother to the codepen but it wont let me... but as soon as i add it, thats when things go south for me

Err spoke to soon... https://codepen.io/Will-I-Am-CodePen/pen/QWQKxZL basically i want to get 4 to overlap 3 (slide over 3) and have lots of content

ok, works on codepen, wont work for me on my site... https://codepen.io/Will-I-Am-CodePen/pen/QWQKxxe thanks

i thought i edited my question, but apparently it didnt take... but this codepen https://codepen.io/AlibekKulseitov/pen/XWaqbaa when it gets to #4 and overlaps #3 ... I want to be able to use 4 for as much content as I want... when I put content into it currently, it just stops at a 100vh of the section... I do not want to limit that last slide to viewport of content

per that thread there is a codepen that shows overlapping sections https://codepen.io/AlibekKulseitov/pen/XWaqbaa what I am trying to figure out, is where the last section slides in, over the second last section... how do I make that section's height not limited.. so when we see the word four slide in, i want the content in that section to be not limited to 100vh... if I put content in it, it just does not show it.

per that thread i was able to make this work, but wondering if there is a way to make the last section not restricted to size... mkae the last section the page content...