scroll bounce on phone when scrolling through Experience section

[hady-dev]

when scrolling through the website on a mobile phone, as soon as I get to the Experience section and that starts loading I get a scroll bounce. I checked online for few hours with no solutions for such a thing. I am not sure if that is a framer-motion bug or not but I checked ion framer-motion's GitHub issues and no one ever mentioned this. I checked other peoples' websites on here and every other one had the same issue so I am pretty positive it is not something I did wrong. Any kind of help is appreciated.

[mateus-holanda]

I'm not sure if it's the same issue, but my Experience section is also giving me trouble. In my case, when scrolling on an iPhone, the header simply does not appear. Instead, it goes straight to the jobs tree. Wasn't able to find a solution yet.

[YichSouls]

According to this link, just add the following code to the index.css to solve the problem.

https://github.com/stephane-monnot/react-vertical-timeline/issues/24

@media only screen and (max-width: 1169px) {
  .vertical-timeline--animate  .vertical-timeline-element-content.bounce-in {
    visibility: visible;
    animation: timeline-slide 0.6s;
  }
}

@keyframes timeline-slide {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }

  60% {
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

[ivandamyanov]

From the issue MekaDiva mentioned, I used this approach to solve my issue:

html, body {
  overflow-x:hidden 
}

[xlgabriel]

@YichSouls thanks man, that worked very well. I kindly ask you how did you get into that solution and what does that code do exactly? I'm still learning some basic stuff about CSS.