Анимации для
изображений

Модификаторы
Модификация позволяет анимировать появление изображений при скролле страницы
Описание
Посмотреть пример
Инструкция по подключению
Добавить код в блок T123 и добавить класс content-scale-up на шейп с фоновым изображением
Анимация с увеличением и сдвигом вверх
<!--Анимация с увеличением и сдвигом вверх (content-scale-up)-->

<style>

/*____________________________________________________*/

:root {
     /*Настройки анимации*/
    --TransitionDelay_up: 0s; /*задержка перед анимацией*/
    --TransitionDuration_up: 1.3s; /*продолжительность анимации*/
    --ScaleContent_up: 1.8; /*увеличение изображения (работает по принципу scale (зума))*/
    --BackgroundColorShape_up: #1f28bf; /*цвет подложки во время анимации*/
}
    /*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
    @media screen and (min-width: 768px) {


/*____________________________________________________*/



/*Ниже не трогать*/
.content-scale-up {
    overflow: hidden;
}
.content-scale-up .tn-atom {
    width: 100%;
    display: block !important;
    transform: translate(-50%, 0px) scale(1.05);
    margin-left: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.content-scale-up .tn-atom:before {
    transition-delay: var(--TransitionDelay_up);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShape_up);
    display: block;
    transform: translate(0%, 0%);
}
.content-scale-up-animation .tn-atom:before {
    transition-delay: var(--TransitionDelay_up);
    transform: translate(0%, -100%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_up);
}

.content-scale-up-animation .tn-atom {
    transition-delay: var(--TransitionDelay_up);
    transition-duration: var(--TransitionDuration_up);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transform: translate(-50%, 0px) scale(var(--ScaleContent_up));
   }
}
</style>

<script>
var content_scale_up = function(elem) {
  var content_scale_up_distance = elem.getBoundingClientRect();
  return (
    content_scale_up_distance.top >= 0 &&
    content_scale_up_distance.left >= 0 &&
    content_scale_up_distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    content_scale_up_distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

var content_scale_up_find = document.querySelectorAll('.content-scale-up');
window.addEventListener('scroll', function(event) {
content_scale_up_find.forEach(element => {
    if (content_scale_up(element)) {
      element.classList.add("content-scale-up-animation");
    }
});
}, false);

</script>
Добавить код в блок T123 и добавить класс content-scale-down на шейп с фоновым изображением
Анимация с увеличением и сдвигом вниз
<!--Анимация с увеличением и сдвигом вниз (content-scale-down)-->

<style>

/*____________________________________________________*/

:root {
     /*Настройки анимации*/
    --TransitionDelay_down: 0s; /*задержка перед анимацией*/
    --TransitionDuration_down: 1.3s; /*продолжительность анимации*/
    --ScaleContent_down: 1.8; /*увеличение изображения (работает по принципу scale (зума))*/
    --BackgroundColorShape_down: #1f28bf; /*цвет подложки во время анимации*/
}
    /*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
    @media screen and (min-width: 768px) {


/*____________________________________________________*/



/*Ниже не трогать*/
.content-scale-down {
    overflow: hidden;
}
.content-scale-down .tn-atom {
    width: 100%;
    display: block !important;
    transform: translate(-50%, 0px) scale(1.05);
    margin-left: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.content-scale-down .tn-atom:before {
    transition-delay: var(--TransitionDelay_down);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShape_down);
    display: block;
    transform: translate(0%, 0%);
}
.content-scale-down-animation .tn-atom:before {
    transition-delay: var(--TransitionDelay_down);
    transform: translate(0%, 100%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_down);
}

.content-scale-down-animation .tn-atom {
    transition-delay: var(--TransitionDelay_down);
    transition-duration: var(--TransitionDuration_down);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transform: translate(-50%, 0px) scale(var(--ScaleContent_down));
   }
}
</style>

<script>
var content_scale_down = function(elem) {
  var content_scale_down_distance = elem.getBoundingClientRect();
  return (
    content_scale_down_distance.top >= 0 &&
    content_scale_down_distance.left >= 0 &&
    content_scale_down_distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    content_scale_down_distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

var content_scale_down_find = document.querySelectorAll('.content-scale-down');
window.addEventListener('scroll', function(event) {
content_scale_down_find.forEach(element => {
    if (content_scale_down(element)) {
      element.classList.add("content-scale-down-animation");
    }
});
}, false);

</script>
Добавить код в блок T123 и добавить класс content-scale-right на шейп с фоновым изображением
Анимация с увеличением и сдвигом вправо
<!--Анимация с увеличением и сдвигом вправо (content-scale-right)-->

<style>

/*____________________________________________________*/

:root {
     /*Настройки анимации*/
    --TransitionDelay_right: 0s; /*задержка перед анимацией*/
    --TransitionDuration_right: 1.3s; /*продолжительность анимации*/
    --ScaleContent_right: 1.8; /*увеличение изображения (работает по принципу scale (зума))*/
    --BackgroundColorShape_right: #1f28bf; /*цвет подложки во время анимации*/
}
    /*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
    @media screen and (min-width: 768px) {


/*____________________________________________________*/



/*Ниже не трогать*/
.content-scale-right {
    overflow: hidden;
}
.content-scale-right .tn-atom {
    width: 100%;
    display: block !important;
    transform: translate(-50%, 0px) scale(1.05);
    margin-left: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.content-scale-right .tn-atom:before {
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShape_right);
    display: block;
    transform: translate(0%, 0%);
    transition-duration: var(--TransitionDuration_right);
    transition-delay: var(--TransitionDelay_right);
}
.content-scale-right-animation .tn-atom:before {
    transform: translate(100%, 0%);
    transition-duration: var(--TransitionDuration_right);
    transition-delay: var(--TransitionDelay_right);
}

.content-scale-right-animation .tn-atom {
    transition-delay: var(--TransitionDelay_right);
    transition-duration: var(--TransitionDuration_right);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transform: translate(-50%, 0px) scale(var(--ScaleContent_right));
   }
}
</style>

<script>
var content_scale_right = function(elem) {
  var content_scale_right_distance = elem.getBoundingClientRect();
  return (
    content_scale_right_distance.top >= 0 &&
    content_scale_right_distance.left >= 0 &&
    content_scale_right_distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    content_scale_right_distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

var content_scale_right_find = document.querySelectorAll('.content-scale-right');
window.addEventListener('scroll', function(event) {
content_scale_right_find.forEach(element => {
    if (content_scale_right(element)) {
      element.classList.add("content-scale-right-animation");
    }
});
}, false);

</script>
Добавить код в блок T123 и добавить класс content-scale-left на шейп с фоновым изображением
Анимация с увеличением и сдвигом влево
<!--Анимация с увеличением и сдвигом влево (content-scale-left)-->

<style>

/*____________________________________________________*/

:root {
     /*Настройки анимации*/
    --TransitionDelay_left: 0s; /*задержка перед анимацией*/
    --TransitionDuration_left: 1.3s; /*продолжительность анимации*/
    --ScaleContent_left: 1.8; /*увеличение изображения (работает по принципу scale (зума))*/
    --BackgroundColorShape_left: #1f28bf; /*цвет подложки во время анимации*/
}
    /*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
    @media screen and (min-width: 768px) {


/*____________________________________________________*/



/*Ниже не трогать*/
.content-scale-left {
    overflow: hidden;
}
.content-scale-left .tn-atom {
    width: 100%;
    display: block !important;
    transform: translate(-50%, 0px) scale(1.05);
    margin-left: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.content-scale-left .tn-atom:before {
    transition-delay: var(--TransitionDelay_left);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShape_left);
    display: block;
    transform: translate(0%, 0%);
}
.content-scale-left-animation .tn-atom:before {
    transition-delay: var(--TransitionDelay_left);
    transform: translate(-100%, 0%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_left);
}

.content-scale-left-animation .tn-atom {
    transition-delay: var(--TransitionDelay_left);
    transition-duration: var(--TransitionDuration_left);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transform: translate(-50%, 0px) scale(var(--ScaleContent_left));
   }
}
</style>

<script>
var content_scale_left = function(elem) {
  var content_scale_left_distance = elem.getBoundingClientRect();
  return (
    content_scale_left_distance.top >= 0 &&
    content_scale_left_distance.left >= 0 &&
    content_scale_left_distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    content_scale_left_distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

var content_scale_left_find = document.querySelectorAll('.content-scale-left');
window.addEventListener('scroll', function(event) {
content_scale_left_find.forEach(element => {
    if (content_scale_left(element)) {
      element.classList.add("content-scale-left-animation");
    }
});
}, false);

</script>
Добавить код в блок T123 и добавить класс content-scale-up-2 на шейп с фоновым изображением
Анимация с увеличением и сдвигом вверх (двойной цвет)
<!--Анимация с увеличением и сдвигом вверх (двойной цвет) (content-scale-up-2)-->

<style>

/*____________________________________________________*/

:root {
     /*Настройки анимации*/
    --TransitionDelay_up_2: 0s; /*задержка перед анимацией*/
    --TransitionDuration_up_2: 1.3s; /*продолжительность анимации*/
    --ScaleContent_up_2: 1.5; /*увеличение изображения (работает по принципу scale (зума))*/
    --BackgroundColorShapeBefore_up_2: #FACE34; /*цвет первой подложки во время анимации*/
    --BackgroundColorShapeAfter_up_2: #FAAB34; /*цвет второй подложки во время анимации*/
}
    /*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
    @media screen and (min-width: 768px) {


/*____________________________________________________*/



/*Ниже не трогать*/
.content-scale-up-2 {
    overflow: hidden;
}
.content-scale-up-2 .tn-atom {
    width: 100%;
    display: block !important;
    transform: translate(-50%, 0px) scale(1.05);
    margin-left: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.content-scale-up-2 .tn-atom:before {
    transition-delay: var(--TransitionDelay_up_2);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShapeBefore_up_2);
    display: block;
    transform: translate(0%, 0%);
}
.content-scale-up-animation-2 .tn-atom:before {
    transition-delay: var(--TransitionDelay_up_2);
    transform: translate(0%, -100%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_up_2);
}

.content-scale-up-2 .tn-atom:after {
    transition-delay: var(--TransitionDelay_up_2);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShapeAfter_up_2);
    display: block;
    position: absolute;
    top: 0;
    transform: translate(0%, 0%);
    background-size: 100%;
    background-position: 65% 0%;
    background-image:url();
}
.content-scale-up-animation-2 .tn-atom:after {
    transition-delay: var(--TransitionDelay_up_2);
    transform: translate(0%, -130%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_up_2);
}

.content-scale-up-animation-2 .tn-atom {
    transition-delay: var(--TransitionDelay_up_2);
    transition-duration: var(--TransitionDuration_up_2);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transform: translate(-50%, 0px) scale(var(--ScaleContent_up_2));
   }
}
</style>

<script>
var content_scale_up_2 = function(elem) {
  var content_scale_up_distance_2 = elem.getBoundingClientRect();
  return (
    content_scale_up_distance_2.top >= 0 &&
    content_scale_up_distance_2.left >= 0 &&
    content_scale_up_distance_2.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    content_scale_up_distance_2.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

var content_scale_up_find_2 = document.querySelectorAll('.content-scale-up-2');
window.addEventListener('scroll', function(event) {
content_scale_up_find_2.forEach(element => {
    if (content_scale_up_2(element)) {
      element.classList.add("content-scale-up-animation-2");
    }
});
}, false);

</script>
Добавить код в блок T123 и добавить класс content-scale-down-2 на шейп с фоновым изображением
Анимация с увеличением и сдвигом вниз (двойной цвет)
<!--Анимация с увеличением и сдвигом вниз (двойной цвет) (content-scale-down-2)-->

<style>

/*____________________________________________________*/

:root {
     /*Настройки анимации*/
    --TransitionDelay_down_2: 0s; /*задержка перед анимацией*/
    --TransitionDuration_down_2: 1.3s; /*продолжительность анимации*/
    --ScaleContent_down_2: 1.5; /*увеличение изображения (работает по принципу scale (зума))*/
    --BackgroundColorShapeBefore_down_2: #FACE34; /*цвет первой подложки во время анимации*/
    --BackgroundColorShapeAfter_down_2: #FAAB34; /*цвет второй подложки во время анимации*/
}
    /*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
    @media screen and (min-width: 768px) {


/*____________________________________________________*/



/*Ниже не трогать*/
.content-scale-down-2 {
    overflow: hidden;
}
.content-scale-down-2 .tn-atom {
    width: 100%;
    display: block !important;
    transform: translate(-50%, 0px) scale(1.05);
    margin-left: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.content-scale-down-2 .tn-atom:before {
    transition-delay: var(--TransitionDelay_down_2);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShapeBefore_down_2);
    display: block;
    transform: translate(0%, 0%);
}
.content-scale-down-animation-2 .tn-atom:before {
    transition-delay: var(--TransitionDelay_down_2);
    transform: translate(0%, 100%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_down_2);
}

.content-scale-down-2 .tn-atom:after {
    transition-delay: var(--TransitionDelay_down_2);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShapeAfter_down_2);
    display: block;
    position: absolute;
    top: 0;
    transform: translate(0%, 0%);
    background-size: 100%;
    background-position: 65% 0%;
    background-image:url();
}
.content-scale-down-animation-2 .tn-atom:after {
    transition-delay: var(--TransitionDelay_down_2);
    transform: translate(0%, 130%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_down_2);
}

.content-scale-down-animation-2 .tn-atom {
    transition-delay: var(--TransitionDelay_down_2);
    transition-duration: var(--TransitionDuration_down_2);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transform: translate(-50%, 0px) scale(var(--ScaleContent_down_2));
   }
}
</style>

<script>
var content_scale_down_2 = function(elem) {
  var content_scale_down_distance_2 = elem.getBoundingClientRect();
  return (
    content_scale_down_distance_2.top >= 0 &&
    content_scale_down_distance_2.left >= 0 &&
    content_scale_down_distance_2.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    content_scale_down_distance_2.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

var content_scale_down_find_2 = document.querySelectorAll('.content-scale-down-2');
window.addEventListener('scroll', function(event) {
content_scale_down_find_2.forEach(element => {
    if (content_scale_down_2(element)) {
      element.classList.add("content-scale-down-animation-2");
    }
});
}, false);

</script>
Добавить код в блок T123 и добавить класс content-scale-right-2 на шейп с фоновым изображением
Анимация с увеличением и сдвигом вправо (двойной цвет)
<!--Анимация с увеличением и сдвигом вправо (двойной цвет) (content-scale-right-2)-->

<style>

/*____________________________________________________*/

:root {
     /*Настройки анимации*/
    --TransitionDelay_right_2: 0s; /*задержка перед анимацией*/
    --TransitionDuration_right_2: 1.3s; /*продолжительность анимации*/
    --ScaleContent_right_2: 1.5; /*увеличение изображения (работает по принципу scale (зума))*/
    --BackgroundColorShapeBefore_right_2: #FACE34; /*цвет первой подложки во время анимации*/
    --BackgroundColorShapeAfter_right_2: #FAAB34; /*цвет второй подложки во время анимации*/
}
    /*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
    @media screen and (min-width: 768px) {


/*____________________________________________________*/



/*Ниже не трогать*/
.content-scale-right-2 {
    overflow: hidden;
}
.content-scale-right-2 .tn-atom {
    width: 100%;
    display: block !important;
    transform: translate(-50%, 0px) scale(1.05);
    margin-left: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.content-scale-right-2 .tn-atom:before {
    transition-delay: var(--TransitionDelay_right_2);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShapeBefore_right_2);
    display: block;
    transform: translate(0%, 0%);
}
.content-scale-right-animation-2 .tn-atom:before {
    transition-delay: var(--TransitionDelay_right_2);
    transform: translate(100%, 0%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_right_2);
}

.content-scale-right-2 .tn-atom:after {
    transition-delay: var(--TransitionDelay_right_2);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShapeAfter_right_2);
    display: block;
    position: absolute;
    top: 0;
    transform: translate(0%, 0%);
    background-size: 100%;
    background-position: 65% 0%;
    background-image:url();
}

.content-scale-right-animation-2 .tn-atom:after {
    transition-delay: var(--TransitionDelay_right_2);
    transform: translate(130%, 0%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_right_2);
}

.content-scale-right-animation-2 .tn-atom {
    transition-delay: var(--TransitionDelay_right_2);
    transition-duration: var(--TransitionDuration_right_2);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transform: translate(-50%, 0px) scale(var(--ScaleContent_right_2));
   }
}
</style>

<script>
var content_scale_right_2 = function(elem) {
  var content_scale_right_distance_2 = elem.getBoundingClientRect();
  return (
    content_scale_right_distance_2.top >= 0 &&
    content_scale_right_distance_2.left >= 0 &&
    content_scale_right_distance_2.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    content_scale_right_distance_2.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

var content_scale_right_find_2 = document.querySelectorAll('.content-scale-right-2');
window.addEventListener('scroll', function(event) {
content_scale_right_find_2.forEach(element => {
    if (content_scale_right_2(element)) {
      element.classList.add("content-scale-right-animation-2");
    }
});
}, false);

</script>
Добавить код в блок T123 и добавить класс content-scale-left-2 на шейп с фоновым изображением
Анимация с увеличением и сдвигом влево (двойной цвет)
<!--Анимация с увеличением и сдвигом влево (двойной цвет) (content-scale-left-2)-->

<style>

/*____________________________________________________*/

:root {
     /*Настройки анимации*/
    --TransitionDelay_Left_2: 0s; /*задержка перед анимацией*/
    --TransitionDuration_Left_2: 1.3s; /*продолжительность анимации*/
    --ScaleContent_Left_2: 1.5; /*увеличение изображения (работает по принципу scale (зума))*/
    --BackgroundColorShapeBefore_Left_2: #FACE34; /*цвет первой подложки во время анимации*/
    --BackgroundColorShapeAfter_Left_2: #FAAB34; /*цвет второй подложки во время анимации*/
}
    /*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
    @media screen and (min-width: 768px) {


/*____________________________________________________*/



/*Ниже не трогать*/
.content-scale-left-2 {
    overflow: hidden;
}
.content-scale-left-2 .tn-atom {
    width: 100%;
    display: block !important;
    transform: translate(-50%, 0px) scale(1.05);
    margin-left: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.content-scale-left-2 .tn-atom:before {
    transition-delay: var(--TransitionDelay_Left_2);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShapeBefore_Left_2);
    display: block;
    transform: translate(0%, 0%);
}
.content-scale-left-animation-2 .tn-atom:before {
    transition-delay: var(--TransitionDelay_Left_2);
    transform: translate(-100%, 0%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_Left_2);
}

.content-scale-left-2 .tn-atom:after {
    transition-delay: var(--TransitionDelay_Left_2);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShapeAfter_Left_2);
    display: block;
    position: absolute;
    top: 0;
    transform: translate(0%, 0%);
    background-size: 100%;
    background-position: 65% 0%;
    background-image:url();
}
.content-scale-left-animation-2 .tn-atom:after {
    transition-delay: var(--TransitionDelay_Left_2);
    transform: translate(-130%, 0%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_Left_2);
}

.content-scale-left-animation-2 .tn-atom {
    transition-delay: var(--TransitionDelay_Left_2);
    transition-duration: var(--TransitionDuration_Left_2);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transform: translate(-50%, 0px) scale(var(--ScaleContent_Left_2));
   }
}
</style>

<script>
var content_scale_left_2 = function(elem) {
  var content_scale_left_distance_2 = elem.getBoundingClientRect();
  return (
    content_scale_left_distance_2.top >= 0 &&
    content_scale_left_distance_2.left >= 0 &&
    content_scale_left_distance_2.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    content_scale_left_distance_2.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

var content_scale_left_find_2 = document.querySelectorAll('.content-scale-left-2');
window.addEventListener('scroll', function(event) {
content_scale_left_find_2.forEach(element => {
    if (content_scale_left_2(element)) {
      element.classList.add("content-scale-left-animation-2");
    }
});
}, false);

</script>
Made on
Tilda