Animation with JS and CSS

Question

I want to create a slide like the one that comes on the next page, I have tried js and css but I have not been successful, I am not very good at using js and css for the front end and I have been having trouble getting the result I want. I hope someone can help me solve my problem the result that i get is this

/*SCRIPT PERSONALIZADO*/

    document.addEventListener('DOMContentLoaded', function(){
    let wrapper = document.getElementById('wrapper-personalizado');
    let topLayer = wrapper.querySelector('.top');
    let handle = wrapper.querySelector('.handle');
    let skew = 0;
    let delta = 0;

        if(wrapper.className.indexOf('skewed') != -1){
            skew = 1000;
        }

        wrapper.addEventListener('mousemove', function(e){
        delta = (e.clientX - window.innerWidth / 2) * 0.5;

        handle.style.left = e.clientX + delta + 'px';

        topLayer.style.width= e.clientX + skew + delta + 'px';
        });
    });

#wrapper-personalizado{
  position: absolute;
  width:100%;
  min-height:52vw;
  overflow: hidden;
}

.layer{
  position: absolute;
  width:100vw;
  min-height: 52vw;
  overflow: hidden;
}

.layer .content-wrap{
  position: absolute;
  width:100vw;
  min-height: 52vw;
}

.layer .content-body{
  width:25%;
  position:absolute;
  top:50%;
  text-align: center;
  transform:translateY(-50%);
  color:#fff;
  z-index:1
}

.layer img{
  position: absolute;
  width:100%;
  top:50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

.layer h1{
  font-size:2em;
}

.bottom{
  background:#222;
  z-index:1;
}

.bottom .content-body{
  right:5%;
}

.bottom h1{
  color:#FDAB00;
}

.top{
  background:#eee;
  color:#222;
  z-index:2;
  width:50vw;
}

.top .content-body{
  left: 5%;
  color:#222;
}

.handle{
  position: absolute;
  height: 100%;
  display: block;
  background-color: #FDAB00;
  width:5px;
  top:0;
  left: 50%;
  z-index:3;
}

.skewed .handle{
  top:50%;
  transform:rotate(30deg) translateY(-50%);
  height: 200%;
  transform-origin:top;
}

.skewed .top{
  transform: skew(-30deg);
  margin-left:-1000px;
  width: calc(50vw + 1000px);
}

.skewed .top .content-wrap{
  transform: skew(30deg);
  margin-left:1000px;
}

@media(max-width:1023px){
  body{
    font-size:75%;
  }
  .skewed{
    display: none;
  }
}

<section class="skewed flex" id="wrapper-personalizado">
        <div class="slide">
            <div class="layer bottom" id="one">
                <div class="content-wrap">
                    <div class="content-body">
                        <h1>AUTOMATIZACIÓN INDUSTRIAL</h1>
                    </div>
                    <img src="https://www.fgsaltillo.com/wp-content/uploads/2020/06/13981-scaled.jpg" alt="">
                </div>
            </div>
            <div class="layer top" id="two">
                <div class="content-wrap">
                    <div class="content-body">
                        <h1>MANEJO DE MATERIALES</h1>
                    </div>
                    <img src="https://www.fgsaltillo.com/wp-content/uploads/2020/06/IMG-20180705-WA0001.jpg" alt="">
                </div>
            </div>

            <div class="handle"></div>
        </div>
    </section>

Answer 1

Here is how you can do something similar to the example, it steel can be improved, I think that website is using GSAP

Note: because of the @media(max-width:1023px) you need to expand snippet to visualize the result

In this example you dont need javascript.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#wrapper-personalizado{
  position: absolute;
  width:100%;
  min-height:52vw;
  overflow: hidden;
}

.layer{
  position: absolute;
  width:100vw;
  min-height: 52vw;
  overflow: hidden;
}

.layer .content-wrap{
  position: absolute;
  width:100vw;
  min-height: 52vw;
}

.layer .content-body{
  width:25%;
  position:absolute;
  top:50%;
  text-align: center;
  transform:translateY(-50%);
  color:#fff;
  z-index:1
}

.layer img{
  position: absolute;
  width:100%;
  top:50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

.layer h1{
  font-size:2em;
}

.bottom{
  background:#222;
  z-index:1;
  transition: all 1000ms cubic-bezier(0.63, 0.04, 0.69, 1.01);
}

.bottom:hover ~ .top {
    width: calc(5vw + 1000px);
}

.bottom .content-body{
  right:5%;
  transition: all 1000ms cubic-bezier(0.63, 0.04, 0.69, 1.01);
}

.bottom:hover .content-body {
  right: 50%;
  transform: translateX(50%)
}

.bottom h1{
  color:#FDAB00;
}

.top{
  background:#eee;
  color:#222;
  z-index:2;
  width:50vw;
}

.top .content-body{
  left: 5%;
  color:#222;
  transition: all 1000ms cubic-bezier(0.63, 0.04, 0.69, 1.01) 
}

.handle{
  position: absolute;
  height: 100%;
  display: block;
  background-color: #FDAB00;
  width:5px;
  top:0;
  left: calc(50% + 2.5px);
  z-index:3;
}

.skewed .handle{
  top:50%;
  transform:rotate(30deg) translateY(-50%);
  height: 200%;
  transform-origin:top;
}

.skewed .top{
  transform: skew(-20deg);
  margin-left:-1000px;
  width: calc(50vw + 1000px);
  border-right: 10px solid #fdab00;
  transition: all 1000ms cubic-bezier(0.63, 0.04, 0.69, 1.01) 
}

.skewed .top:hover {
  width: calc(105vw + 1000px);
}

.skewed .top:hover .content-body {
  left: 50%;
  transform: translateX(-50%)
}


.skewed .top .content-wrap{
  transform: skew(20deg);
  margin-left:1000px;
}

.slide {
  width: 100%;
}

@media(max-width:1023px){
  
  body{
    font-size:75%;
  }
  
  .skewed{
    display: none;
  }
}

<section class="skewed flex" id="wrapper-personalizado">
    <div class="slide">
        <div class="layer bottom" id="one">
            <div class="content-wrap">
                <div class="content-body">
                    <h1>AUTOMATIZACIÓN INDUSTRIAL</h1>
                </div>
                <img src="https://www.fgsaltillo.com/wp-content/uploads/2020/06/13981-scaled.jpg" alt="">
            </div>
        </div>
        <div class="layer top" id="two">
            <div class="content-wrap">
                <div class="content-body">
                    <h1>MANEJO DE MATERIALES</h1>
                </div>
                <img src="https://www.fgsaltillo.com/wp-content/uploads/2020/06/IMG-20180705-WA0001.jpg" alt="">
            </div>
        </div>

    </div>
  </section>