JSFiddle - React, Tailwind, and code Playground

by Léo Durand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<div class="button-menu">
  <div id="prototypo" class="link-menu" onmouseover="textWidth(this)">
    <span class="number-menu">01.</span>Prototype<span class="details-menu">WEB DESIGN</span>
  </div>
  <div class="underline ulPrototypo"></div>
</div>

<div class="button-menu">
  <div id="esadvalence" class="link-menu" onmouseover="textWidth(this)">
    <span class="number-menu">02.</span>ÉSAD<span class="details-menu">PLAN DES JPO</span>

  </div>
  <div class="underline ulESADValence"></div>
</div>



<div id="wrap-image-menu">
  <div class="img-menu">
    <div id="img-prototypo" class="all-img-menu" style="left:-90px;width:55vw"></div>
    <div id="img-esadvalence" class="all-img-menu" style="left:0px"></div>
  </div>

</div>

CSS

#wrap-menu {
  width: 400px;
  padding-left: 84px;
  display: inline-block;
}

.button-menu {
  padding: 3vh 0 3vh 0;
}

.button-menu:first-child {
  padding: 0 0 3vh 0;
  margin-top: -3vh;
}

.link-menu {
  font-size: 3.3vh;
  padding: 25px 25px 25px 0;
  position: absolute;
  height: auto;
  white-space: nowrap;
  z-index: 40;
}

span.number-menu {
  color: #5f5f5f;
  font-size: 8pt;
}

span.details-menu {
  color: #e3e3e3;
  font-size: 8pt;
  margin-left: 6px;
}

.underline {
  width: 0;
  height: calc(1.3vh + 10px);
  vertical-align: middle;
  top: calc(1.8vh + 17px);
  left: -6px;
  position: relative;
  transition: width 0.6s ease;
  z-index: 30;
}

.underline.ulPrototypo {
  background: #24d390;
}

.underline.ulESADValence {
  background: #e12a1c;
}

.underline.ulCorner77 {
  background: #32c7b6;
}

.underline.ul1107 {
  background: #1e3298;
}

#wrap-image-menu {
    background-color: rgb(36,211,144);
    width: 45vw;
    height: 100vh;
    right: 0;
    margin-top: -200px;
    display: inline-block;
    position: absolute;
}
.img-menu {
    background-color: rgba(31, 31, 31, 1);
    width: 51vw;
    height: calc(100vh - 400px);
    margin-top: 200px;
    display: block;
    position: absolute;
}
.all-img-menu {
    background-size:cover;
    background-position: center; 
    width: 51vw;
    height: calc(100vh - 400px);
    display: block;
    position: absolute;
    opacity: 0;
}
#img-prototypo {
    background-image: url(img/prototypo/prototypo1.jpg);
    background-color: rgba(36, 211, 144, 1);
    background-blend-mode: screen;
    opacity: 1;
}
#img-esadvalence {
    background-image: url(img/esad/esad1.jpg);
    background-color: #e12a1c;
    background-blend-mode: screen;
}

JavaScript

$(document).ready(function(){

    var blocPrototypo = $("#wrap-image-menu");


    $("#prototypo").mouseover(function(){
        TweenLite.to(blocPrototypo, 1.4, {backgroundColor:"#24d390" , ease:Circ.easeInOut });
        TweenMax.to(blocPrototypo, 0.5, {width:"39vw" , ease:Circ.easeInOut ,repeat:1, yoyo:true});

        var allExcept = $(".all-img-menu" ).not(document.getElementById("img-prototypo"));
        TweenMax.to(allExcept, 0.9, {left:"0px" , opacity:0});

        TweenMax.to($("#img-prototypo"), 0.7, {opacity:"1" , width:"55vw" , left:"-90px" , ease:Expo.easeOut ,  delay:"0.65"});

        TweenMax.to($("#line-pagination"), 0.5, {width:"76px", ease:Circ.easeInOut ,repeat:1, yoyo:true});

        $("#current-page").fadeOut(function() {
            $(this).text("01").fadeIn(1000);
        });

    });




    $("#esadvalence").mouseover(function(){

        TweenLite.to(blocPrototypo, 1.5, {backgroundColor:"#e12a1c" , ease:Power1.easeOut });
        TweenMax.to(blocPrototypo, 0.5, {width:"39vw" , ease:Circ.easeInOut ,repeat:1, yoyo:true});

        var allExcept = $(".all-img-menu" ).not(document.getElementById("img-esadvalence"));

        TweenMax.to(allExcept, 0.9, {left:"0px" , opacity:0});

        TweenMax.to($("#img-esadvalence"), 0.7, {opacity:"1" , width:"55vw" , left:"-90px" , ease:Expo.easeOut ,  delay:"0.65"});

        TweenMax.to($("#line-pagination"), 0.5, {width:"76px", ease:Circ.easeInOut ,repeat:1, yoyo:true});

        $("#current-page").fadeOut(function() {
            $(this).text("02").fadeIn(1000);
        });

    });

});