英文:
How to prevent this GSAP animation from breaking my absolute positioning?
问题
我的目标是使图像以与用户滚动轮相同的方向旋转。
我成功实现了这一目标,但它会破坏定位(有时候)。
有时候,当我加载页面时,一切都正常:图像在水平和垂直方向上都正确居中。但有时候,当我加载页面时,图像只在水平方向上居中,而在垂直方向上不居中。
这是一个示例:
我认为这是因为图像的父元素是“main”元素,并且它也以动画方式显示(所以我猜图像会动画两次)。但我仍然不知道如何修复它。
CSS:
.wavySectionContainer {
height: 800px;
width: vw;
background-color: var(--primary);
position: relative;
}
.aboutMe,
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="wavySectionContainer">
<img class="sun" src="public/sun.png" alt="Wave">
<p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
Javascript:
gsap
.timeline()
.from(["main", "footer"], { y: "10%", autoAlpha: 0 })
.to(".sun", {
scrollTrigger: {
trigger: ".wavySectionContainer",
scrub: true,
},
rotation: 360,
duration: 2,
ease: "none",
});
英文:
My objective is to make an image rotate in the same orientation as the user's scroll wheel.
And I managed to do it, but it breaks the positioning (sometimes).
Sometimes when I load the page everything works fine: the image is correctly centered both horizontally and vertically. But sometimes when I load the page the image is centered only horizontally and not vertically.
Here's an example:
I think this is happening because the parent element of the image is the "main" element and it is also displayed with an animation (so the image is animated 2 times, I guess). But I still don't know how to fix it.
CSS:
.wavySectionContainer {
height: 800px;
width: vw;
background-color: var(--primary);
position: relative;
}
.aboutMe,
.sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="wavySectionContainer">
<img class="sun" src="public/sun.png" alt="Wave">
<p class="aboutMe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
Javascript:
gsap
.timeline()
.from(["main", "footer"], { y: "10%", autoAlpha: 0 })
.to(".sun", {
scrollTrigger: {
trigger: ".wavySectionContainer",
scrub: true,
},
rotation: 360,
duration: 2,
ease: "none",
});
答案1
得分: 0
已修复!
我只需为旋转动画使用一个单独的时间线,并将其包装在一个setTimeout函数中,以便它只在主时间线完成后才开始。
英文:
Fixed it!
I just had to use a separate timeline for the rotation animation and wrap it in a setTimeout function so that it only starts once the main timeline finishes.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论