使用滚动魔术从右到左滑动动画

Question

我是GSAP的新手。

我在YouTube上关注了MilklsNice的ScrollMagic和GSAP教程。

在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

)这也不是我想要的。

我想制作一个看起来像打开一本书的动画 从右到左。(与我在 开始。

我怎样才能实现它？:)

Answer 1

在动画中使用right:0right: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>