Я новичок в GSAP.

Я читал руководство MilklsNice ScrollMagic и GSAP на YouTube.

В одной из анимаций GSAP он объяснил, как создать анимацию, которая выглядит как открывающая книгу СЛЕВА НАПРАВО .

var overlay_test = document.querySelector('.overlay_test');

var animate_in = new TimelineMax();

animate_in
    .fromTo(overlay_test, 2, 
    {skewX: 10, scale: 1.5}, 
    {skewX: 0, xPercent: 100, transformOrigin: "0% 100%", ease: Power2.easeOut})
.box_test{
		position: relative;
    overflow: hidden;
    height: 350px;
}

.img_test{
    width: 800px;
}

.overlay_test{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:white;
    width: 100%;
    height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div class="box_test">
   <img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
    <div class="overlay_test"></div>
</div>

(Вы также можете проверить CodePen для этого)

На этой веб-странице я узнал, как чтобы показать div справа налево. Код следующий:

var left = new TimelineMax ();

var rect = document.getElementById('rect');

left
  .from(rect,2,{width:0},1)
  .from(rect,2,{left:400},1)
Result
EDIT ON
 body{
  background: #414141;
  overflow:hidden;
}

#rect{
  position:relative;
  width:400px;
  height:350px;
  margin: 20px;
  background: green;
  align-items: center;
  overflow:hidden;
}
#copy{
  position: absolute;
  bottom: 0;
  margin: 0 10px;
  
}
h1{
  font-family: 'Work Sans', sans-serif;
  color: white;
  width: max-content;
  margin: 0 auto;
  font-size: 145px;
  line-height: 100px;
}
.very{
  font-size: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="rect">
  <div id="copy">
    <h1 class="very">Very cool </h1>
    <h1>  Jack!</h1>
  </div>
</div>
CodePen

КСТАТИ,
эта анимация НЕ совсем то, что я хотел. Потому что он просто перемещает div справа налево вместо того, чтобы открывать его, как книгу, справа налево . Однако я все же попробовал:

var overlay_test = document.querySelectorAll('.overlay_test');

var animate_in = new TimelineMax();

animate_in
  .from(overlay_test,2,{width:0},1)
  .from(overlay_test,2,{left:800},1)
.box_test{
		position: relative;
    overflow: hidden;
    height: 350px;
}

.img_test{
    width: 800px;
}

.overlay_test{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:white;
    width: 100%;
    height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div class="box_test">
   <img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
    <div class="overlay_test"></div>
</div>
CodePen

Теперь изображение исчезнет. Итак, я подумал, что могу применить анимацию к картинке вместо наложенного изображения. Однако теперь анимация начинается с верхнего левого угла экрана как очень маленькое изображение и расширяется оттуда.

var img_test = document.querySelectorAll('.img_test');

var animate_in = new TimelineMax();

animate_in
  .from(img_test,2,{width:0},1)
  .from(img_test,2,{left:800},1)
.box_test{
		position: relative;
    overflow: hidden;
    height: 350px;
}

.img_test{
    width: 800px;
}

.overlay_test{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:white;
    width: 100%;
    height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div class="box_test">
   <img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
</div>
CodePen

Я тоже не этого хочу.

Я хочу создать анимацию, которая выглядит как открытие книги из ВПРАВО НАЛЕВО . (противоположность того, что я включаю в начало.)

Как я мог это сделать? :)

0
Lim 31 Мар 2019 в 09:44

1 ответ

Лучший ответ

Использовать в анимации right:0 для right:200% также в css изменить left:0 на right:0

Посмотреть код

var overlay_test = document.querySelector('.overlay_test');

var animate_in = new TimelineMax();

animate_in
    .fromTo(overlay_test, 2, 
    {skewX: 10, scale: 1.5 , right:0 }, 
    {skewX: 0, right:"200%" ,transformOrigin: "0% 100%", ease: Power2.easeOut})
.box_test{
		position: relative;
    overflow: hidden;
    height: 350px;
}

.img_test{
    width: 800px;
}

.overlay_test{
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background:white;
    width: 100%;
    height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

<div class="box_test">
   <img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
    <div class="overlay_test"></div>
</div>
1
לבני מלכה 31 Мар 2019 в 12:30