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