Наведение анимации при наведении на сайт с горизонтальной прокруткой

Question

, поэтому анимация при наведении заставляет мой сайт прокручиваться горизонтально.Как это исправить, сохраняя при этом тот же эффект анимации при наведении?

Если я уберу анимацию при наведении, веб-сайт нельзя будет прокручивать по горизонтали.Анимация при наведении в основном показывает другой текст после наведения на него.Уменьшает непрозрачность исходного текста, в то время как вводит второй текст с правой стороны.

Анимация при наведении курсора css:

 .project-title-right span {
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.project-title-right:before,
.project-title-right:after {
    color: #B52830;
    content: '';
    position: absolute;
    text-align: center;
    opacity: 0;
    -webkit-transition: .4s, opacity .6s;
    -moz-transition: .4s, opacity .6s;
    -o-transition: .4s, opacity .6s;
    transition: .4s, opacity .6s;
}

.project-title-right:before {
    content: attr(data-hover);
    -webkit-transform: translate(150%, 0);
    -moz-transform: translate(150%, 0);
    -ms-transform: translate(150%, 0);
    -o-transform: translate(150%, 0);
    transform: translate(150%, 0);
}

.project-title-right:after {
    content: attr(data-active);
    -webkit-transform: translate(-150%, 0);
    -moz-transform: translate(-150%, 0);
    -ms-transform: translate(-150%, 0);
    -o-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}

.project-title-right:hover span,
.project-title-right:active span {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

.project-title-right:hover:before,
.project-tile:active:after {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}

.project-title-right:active:before {
    -webkit-transform: translate(150%, 0);
    -moz-transform: translate(150%, 0);
    -ms-transform: translate(150%, 0);
    -o-transform: translate(150%, 0);
    transform: translate(150%, 0);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

Реализация при наведении курсора:

<h2 class="project-title-right" data-hover="Interactive Site" data-aos="fade-left" data-aos-duration="700" data-aos-offset="150"><span>Evolution of Computer Science</span></h2>

.device-container {
    position: relative;
    height: 60vh;
    width: 100%;
}

.flex {
    display: flex;
    display: -ms-flexbox;
}

.center-y {
    -ms-flex-align: center;
    align-items: center;
}

.square-left {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 30px;
    min-height: 100%;
    width: calc(100% + 200px);
    background-size: contain;
    background-color: #3e82ef;
    background-repeat: no-repeat;
}

.width-l {
    max-width: 800px;
}

.container {
    position: relative;
    margin: 0 auto;
    width: 87.5vw;
}

.padding-l {
    padding-top: 120px;
    padding-bottom: 120px;
}


.grid-2 {
    display: -ms-grid;
    display: grid;
    grid-gap: 20px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr
}
    
/*Hover Animation*/
.project-title-right span {
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.project-title-right:before,
.project-title-right:after {
    color: #B52830;
    content: '';
    position: absolute;
    text-align: center;
    opacity: 0;
    -webkit-transition: .4s, opacity .6s;
    -moz-transition: .4s, opacity .6s;
    -o-transition: .4s, opacity .6s;
    transition: .4s, opacity .6s;
}

.project-title-right:before {
    content: attr(data-hover);
    -webkit-transform: translate(150%, 0);
    -moz-transform: translate(150%, 0);
    -ms-transform: translate(150%, 0);
    -o-transform: translate(150%, 0);
    transform: translate(150%, 0);
}

.project-title-right:after {
    content: attr(data-active);
    -webkit-transform: translate(-150%, 0);
    -moz-transform: translate(-150%, 0);
    -ms-transform: translate(-150%, 0);
    -o-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}

.project-title-right:hover span,
.project-title-right:active span {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

.project-title-right:hover:before,
.project-tile:active:after {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}

.project-title-right:active:before {
    -webkit-transform: translate(150%, 0);
    -moz-transform: translate(150%, 0);
    -ms-transform: translate(150%, 0);
    -o-transform: translate(150%, 0);
    transform: translate(150%, 0);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

<div class="container grid-2 padding-l">
            <div>
                <div class="device-container">
                    <div class="square-left"></div>
                </div>
            </div>
            <div class="flex center-y">
                <div class="width-l">
                    <h2 class="project-title-right" data-hover="Interactive Site" data-aos="fade-left" data-aos-duration="700" data-aos-offset="150"><span>Evolution of Computer Science</span></h2>
                    <p class="blocksize color-light">Lorem ipsum dolor sit amet, vel ei dico oratio malorum. Id pri agam oratio. Partem labores ullamcorper est no. At vivendum facilisis conceptam vis, iusto accumsan erroribus pri id. Id eum nominati liberavisse, dolorum persecuti ea
                        his, pri et everti definitionem.</p>
                    <a class="cta color-deepblue" href="about">Learn more ›</a>
                </div>
            </div>
        </div>

Answer 1

Это ваш псевдоэлемент:

.project-title-right:before {
    content: attr(data-hover);
    transform: translate(150%, 0);
}

При использовании преобразования translate(150%, 0) он занимает дополнительное пространство.Вам нужно будет контролировать поведение переполнения родительского элемента.Вы можете добавить overflow: hidden; в свой контейнер.

.device-container {
    position: relative;
    height: 60vh;
    width: 100%;
}

.flex {
    display: flex;
    display: -ms-flexbox;
}

.center-y {
    -ms-flex-align: center;
    align-items: center;
}

.square-left {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 30px;
    min-height: 100%;
    width: calc(100% + 200px);
    background-size: contain;
    background-color: #3e82ef;
    background-repeat: no-repeat;
}

.width-l {
    max-width: 800px;
}

.container {
    position: relative;
    margin: 0 auto;
    width: 87.5vw;
    overflow: hidden; /* added as an example */
}

.padding-l {
    padding-top: 120px;
    padding-bottom: 120px;
}


.grid-2 {
    display: -ms-grid;
    display: grid;
    grid-gap: 20px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr
}
    
/*Hover Animation*/
.project-title-right span {
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.project-title-right:before,
.project-title-right:after {
    color: #B52830;
    content: '';
    position: absolute;
    text-align: center;
    opacity: 0;
    -webkit-transition: .4s, opacity .6s;
    -moz-transition: .4s, opacity .6s;
    -o-transition: .4s, opacity .6s;
    transition: .4s, opacity .6s;
}

.project-title-right:before {
    content: attr(data-hover);
    -webkit-transform: translate(150%, 0);
    -moz-transform: translate(150%, 0);
    -ms-transform: translate(150%, 0);
    -o-transform: translate(150%, 0);
    transform: translate(150%, 0);
}

.project-title-right:after {
    content: attr(data-active);
    -webkit-transform: translate(-150%, 0);
    -moz-transform: translate(-150%, 0);
    -ms-transform: translate(-150%, 0);
    -o-transform: translate(-150%, 0);
    transform: translate(-150%, 0);
}

.project-title-right:hover span,
.project-title-right:active span {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

.project-title-right:hover:before,
.project-tile:active:after {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}

.project-title-right:active:before {
    -webkit-transform: translate(150%, 0);
    -moz-transform: translate(150%, 0);
    -ms-transform: translate(150%, 0);
    -o-transform: translate(150%, 0);
    transform: translate(150%, 0);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

<div class="container grid-2 padding-l">
            <div>
                <div class="device-container">
                    <div class="square-left"></div>
                </div>
            </div>
            <div class="flex center-y">
                <div class="width-l">
                    <h2 class="project-title-right" data-hover="Interactive Site" data-aos="fade-left" data-aos-duration="700" data-aos-offset="150"><span>Evolution of Computer Science</span></h2>
                    <p class="blocksize color-light">Lorem ipsum dolor sit amet, vel ei dico oratio malorum. Id pri agam oratio. Partem labores ullamcorper est no. At vivendum facilisis conceptam vis, iusto accumsan erroribus pri id. Id eum nominati liberavisse, dolorum persecuti ea
                        his, pri et everti definitionem.</p>
                    <a class="cta color-deepblue" href="about">Learn more ›</a>
                </div>
            </div>
        </div>