Pinning an element & vertically sliding through slides

[JE551]

Hello again (sorry for all the questions🙈), 

I am trying to pin the text in the left column when it's in view and have the 'slides/articles' on the right slide up from the bottom to the centre and then back up. This should repeat through however; when the user first views this section the first slide should already be centred to the text on the left and in view so it's next step would just be to slide up out of view and the the rest of the 'slides/articles' slide into view from the bottom following that; the last slide should stay in view (centred to the text on the left). I don't want to have a 'fade out' sort of effect, I'm hoping they could just move up and down vertically out of view. 

I used 'vh' units to move the 'slides/articles' out of view but it seems like it takes a long time for the next slides to come into view. The 'vh' calculations seem like they go further up and down the page than the height of the pinned section making it seem a bit janky. 

Any thoughts or suggestions🥺? 
 

See the Pen MWQrRXZ by JE551 (@JE551) on CodePen

[GreenSock]

Hi @JE551. I read your post a few times and I'm fuzzy on exactly what you're asking. 

 

If you open Dev Tools, you'll see that it's animating exactly what you asked in terms of vh - are you saying you think it's animating to an incorrect value? You've got a bunch of padding on some elements, and you don't have box-sizing set to border-box, so things aren't totally centered. I'd recommend setting box-sizing to border-box on things. 

 

As for it taking "a long time for the next slides to come into view", I wonder if you just wanted the transitions to happen simultaneously instead of sequentially the way you've got it now. And maybe add a little time at the start and end of the timeline so that the first/last slides "stick" for a bit before transitioning. It's all about positioning things in your timeline accordingly - I'd strongly recommend getting familiar with the position parameter. It can be your best friend

 

Is this more like what you were envisioning?: 

See the Pen YzeebzG?editors=0010 by GreenSock (@GreenSock) on CodePen

[JE551]

Woah that's so much better, you guys truly ROCK thank you for the continuous support ❤️ 
 

Quote

If you open Dev Tools, you'll see that it's animating exactly what you asked in terms of vh - are you saying you think it's animating to an incorrect value?

In regards to this, here's a screenshot of what I meant. Seems like in order for the element to go out of view it only has to reach about -78vh and from what I understood, the reason it was taking so long to come into view was because 100vh seemed way lower than just the bottom of the screen and -100vh was way higher than just above the top of the screen. Maybe it's just my misunderstanding of how the units work but curious as to why that is. 
 

Regardless of my question above though your solution works much better, I like the timing of the transitions. Thank you again, you've saved a huge chunk of time in my life!

[Cassie]

Oh ok! I got ya - so are you thinking you're animating to a certain point on the screen?

You're not - you're animating the boxes by '100vh' which is equivalent to the number of pixels you get back when you query window.innerHeight.

Your boxes start off positioned in the center, so you only actually need to animate them by a little over half the window height. (Half the boxes height plus half the window height to be exact.) Currently you're animating them by the whole height of the window.

 

Here's a fork with the exact amount you need to move them, using functional values

See the Pen MWQVjgv?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Does that clear it up?

[JE551]

Yaaaas!

That's exactly where I got confused, thank you both so much.