[Snap leadspace 4 or 5 times then resume]

1 hour ago, GreenSock said:

@Will.I.Am I must be misunderstanding something because Cassie's demo seems to do exactly what you're talking about. There's a part of it that uses Observer (no native scroll...it does the "forced" animation to the next slide) and then other parts use normal scroll. 

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

[Snap leadspace 4 or 5 times then resume]

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)

[Snap leadspace 4 or 5 times then resume]

I am looking at this  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.

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

[horizontal scroll not full height]

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?

[horizontal scroll not full height]

BTW I was using console messages in that last CodePen

[horizontal scroll not full height]

@Cassie

 

So here is what I tried... it kinda works, but if the screen is wide then it tells me two are in view

 

See the Pen XWEEmPO by Will-I-Am-CodePen (@Will-I-Am-CodePen) on CodePen

 

also wanted to ask, when it gets to the end of the horizontal scroll... why does it look slow?

[horizontal scroll not full height]

@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

[horizontal scroll not full height]

@Cassie

 

I am stuck, i changed my stuff to look like your code 

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

 

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

[horizontal scroll not full height]

@Cassie

 

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

[horizontal scroll not full height]

@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

[horizontal scroll not full height]

@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

[horizontal scroll not full height]

per my codepen i setup at 

 

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.

[horizontal scroll not full height]

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 (

See the Pen NWpGeZX by ekfuhrmann (@ekfuhrmann) on CodePen

) , 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?

See the Pen yLKpRjz by Will-I-Am-CodePen (@Will-I-Am-CodePen) on CodePen

[scrolltrigger last section overlap second last section and no height limit]

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

[scrolltrigger last section overlap second last section and no height limit]

Err spoke to soon...

 

See the Pen QWQKxZL by Will-I-Am-CodePen (@Will-I-Am-CodePen) on CodePen

 

basically  i want to get 4 to overlap 3 (slide over 3) and have lots of content

[scrolltrigger last section overlap second last section and no height limit]

ok, works on codepen, wont work for me on my site...

 

See the Pen QWQKxxe by Will-I-Am-CodePen (@Will-I-Am-CodePen) on CodePen

 

thanks

[scrolltrigger last section overlap second last section and no height limit]

i thought i edited my question, but apparently it didnt take...

but this codepen 

See the Pen XWaqbaa by AlibekKulseitov (@AlibekKulseitov) on CodePen

 

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

[scrolltrigger last section overlap second last section and no height limit]

per that thread there is a codepen that shows overlapping sections

 

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.

See the Pen XWaqbaa by AlibekKulseitov (@AlibekKulseitov) on CodePen

[scrolltrigger last section overlap second last section and no height limit]

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...