使用 ScrollTrigger 固定水平 GSAP
Posted
技术标签:
【中文标题】使用 ScrollTrigger 固定水平 GSAP【英文标题】：Horizontal GSAP pinning with ScrollTrigger 【发布时间】：2021-08-26 06:27:07 【问题描述】：我刚刚在CodePen 中为我的演示创建了钢笔。我尝试了不同的状态，但没有奏效。
我想像这样在中间部分添加和删除类：https://codepen.io/Designer12/pen/qBryyrp
演示图片：
【问题讨论】：
请不要使用大写字母，这会考虑大喊大叫，很粗鲁 感谢您的建议，我是新手，再次感谢 当然有解决方案，总是有的。您不能假设有人会简单地为您编写代码。请尝试自己实现这一目标。每当您坚持尝试过的事情时，请伸出援手。 您使用的是 ScrollTrigger，而不是 ScrollMagic！它的不同插件。 该问题要求您在链接到 CodePen 之类的地方时在问题本身中包含代码。这是有充分理由的。请不要语法高亮随机单词以绕过此限制，而是在问题本身中包含相关代码。 【参考方案1】：添加onUpdate事件，将进度（从0到1）除以元素（面板）的数量，得到活动帧：
更好的检查Codepen answer，sn-p有一些滞后
gsap.registerPlugin(ScrollTrigger);
console.clear()
let container = document.querySelector(".portfolio");
let tl = gsap.timeline(
scrollTrigger:
pin: true,
scrub: 1,
trigger: container,
end: () => container.scrollWidth - document.documentElement.clientWidth,
onUpdate: (progress, direction, isActive) => changeActive(progress)
,
defaults: ease: "none", duration: 1
);
tl.to(".parallax", x: 300 )
.to(".panel", x: () => -(container.scrollWidth - document.documentElement.clientWidth) , 0)
.from(".secondAn",
opacity: 0,
scale: 0.5,
duration: 0.2,
stagger:
amount: 0.8
, 0);
gsap.from(".firstAn",
duration: 1,
opacity: 0,
scale: .5,
scrollTrigger:
trigger: container,
start: "top 90%",
end: "bottom 10%",
toggleActions: "play none none reverse"
);
let elements = document.querySelectorAll('.panel')
let active = NaN;
function changeActive(progress)
let oneElement = 1 / (elements.length - 1)
let activeItem = Math.round(progress.toFixed(3) /oneElement)
if(active != activeItem)
active = activeItem
changeBackground(active)
console.log("active ", activeItem)
function changeBackground(active)
elements.forEach((e)=>
e.classList.remove("bg")
)
console.log(active, elements.length)
elements[active].classList.add("bg")
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
*, *:before, *:after
box-sizing: border-box;
position: relative;
letter-spacing: 0.04em;
body
font-family: 'Montserrat', sans-serif;
background-color: #FEFEFE;
overflow-x: hidden;
.spacer
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
h1
font-size: 3rem;
color: #000;
.section
height: auto;
width: 100%;
position: relative;
padding: 0;
overflow-x: hidden;
.portfolio
width: 100%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
background-color: #1F242D;
overflow: hidden;
.portfolio_title
position: absolute;
top: 0;
left: -15rem;
font-size: 24rem;
letter-spacing: 0;
-webkit-text-stroke-color: #343A42;
display: inline-block;
.text-stroke
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #343A42;
.grid
display: flex;
flex-wrap: wrap;
align-items: center;
aling-content: center;
justify-content: center;
overflow: hidden;
.panel
display: flex;
flex: 0 0 50%;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
height: 100%;
padding: 10rem 7rem 2rem 7rem;
background-color: transparent;
overflow: hidden;
.panel_item
height: 100%;
width: 100%;
margin: 0 auto;
.panel_img
width: 100%;
height: 100%;
margin: 0 auto;
.bg
background-color: red;
<body>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script>
<!-- partial:index.partial.html -->
<div class="spacer">
<h1>Scroll Down</h1>
</div>
<section class="section portfolio">
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
</section>
<div class="spacer">
<h1>The End</h1>
</div>
</body>【讨论】：
以上是关于使用 ScrollTrigger 固定水平 GSAP的主要内容，如果未能解决你的问题，请参考以下文章
我可以在 ScrollTrigger 中使用 span 而不是 div 吗？