Custom Slider Implementation Problems

Hello everyone!

I’m currently working on my portfolio website and I’m having trouble implementing a custom slider.

I was closely following a tutorial/stream by @PixelGeek (thank you for providing these!). You can see the stream and the finished site here:

stream
finished site

Basically, the whole page gets turned into a vertical slider that slides pages over each one with a neat animation. I followed the whole stream twice now (that’s why you can see new and old versions of the interactions added to “slide in” and “slide out”) but I cant get the basic animation to work. I also looked at Nelson’s project site but couldnt find the differences.

Here’s my sharelink: share

As you can see, the animations are a mess in my attempt. :persevere:

They autoplay somehow, flexchildren are getting pushed around horizontally, animations interrupted or skipped. I can’t pinpoint one wrong behavior so I can target it!

The only hint I have would be, that the two flexchildren in my slider have different properties (since they are not split up 50%/50% like in @PixelGeek 's example. But I cant find a solution to circumvent this for this design.

An additional problem:

Even in Nelson’s example, only the down button works correctly (which is obvious, but I cant think of a way to target the movement of the slide and not only if its moving out or in).

I am thankful for any help here! I’d really love to get this solved.

Kind regards,

Johannes