GSAP仅在按住鼠标按钮时应用缩放

Question

我有一个水平滑块，其中的部分在使用GSAP拖动时可以缩放。我遇到的问题是，缩放是在单击时应用的，并且值会保存到拖动之后。我只需要在按住鼠标按钮时应用缩放。这是一支电笔。

var drag = Draggable.create(".horizontalContainer ", {
type: "x",
onPress() {
const scale = .6;
gsap.to('.section', {scale: scale, duration: .25});
},
onDragEnd() {
const xpos = this.target.getBoundingClientRect().left;
const winWidth = window.innerWidth;
gsap.to('.section', {scale: 1, duration: .25});
gsap.to(this.target, {x: Math.round(xpos / winWidth) * winWidth, duration: .5});
}
});

body {
margin: 0;
padding: 0;
overflow: hidden;
}
.horizontalContainer {
width: 600%;
display: flex;
flex-wrap: nowrap;
}
.section {
height: 100vh;
width: 100vw;
text-align: center;
font-size: 36px;
line-height: 90vh;
}
.section:nth-child(1) {
background-color: #deb887;
}
.section:nth-child(2) {
background-color: limegreen;
}
.section:nth-child(3) {
background-color: #b8860b;
}
.section:nth-child(4) {
background-color: #2f4f4f;
}
.proxy {
position: absolute;
visibility: hidden;
}

<script src="https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<div class='horizontalContainer'>
<div class='section'>ScrollTrigger with Draggable</div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
</div>

Answer 1

使用onRelease()回调将比例恢复到1。

onRelease() {
const scale = 1;
gsap.to('.section', {scale: scale, duration: .25});
}

---

代码段：

var drag = Draggable.create(".horizontalContainer ", {
type: "x",
onPress() {
const scale = .6;
gsap.to('.section', {
scale: scale,
duration: .25
});
},
onRelease() {
const scale = 1;
gsap.to('.section', {
scale: scale,
duration: .25
});
},
onDragEnd() {
const xpos = this.target.getBoundingClientRect().left;
const winWidth = window.innerWidth;
gsap.to('.section', {
scale: 1,
duration: .25
});
gsap.to(this.target, {
x: Math.round(xpos / winWidth) * winWidth,
duration: .5
});
}
});

body {
margin: 0;
padding: 0;
overflow: hidden;
}
.horizontalContainer {
width: 600%;
display: flex;
flex-wrap: nowrap;
}
.section {
height: 100vh;
width: 100vw;
text-align: center;
font-size: 36px;
line-height: 90vh;
}
.section:nth-child(1) {
background-color: #deb887;
}
.section:nth-child(2) {
background-color: limegreen;
}
.section:nth-child(3) {
background-color: #b8860b;
}
.section:nth-child(4) {
background-color: #2f4f4f;
}
.proxy {
position: absolute;
visibility: hidden;
}

<div class='horizontalContainer'>
<div class='section'>ScrollTrigger with Draggable</div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
</div>
<script src="https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>