英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论