如何防止这个GSAP动画破坏我的绝对定位?

huangapple go评论65阅读模式
英文:

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:

Centered

Not centered

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:

  &lt;div class=&quot;wavySectionContainer&quot;&gt;
    &lt;img class=&quot;sun&quot;  src=&quot;public/sun.png&quot; alt=&quot;Wave&quot;&gt;
    &lt;p class=&quot;aboutMe&quot;&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi officia, mollitia cupiditate quae quos voluptatem dolorum? &lt;br&gt;&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
  &lt;/div&gt;

Javascript:

gsap
  .timeline()
  .from([&quot;main&quot;, &quot;footer&quot;], { y: &quot;10%&quot;, autoAlpha: 0 })
  .to(&quot;.sun&quot;, {
    scrollTrigger: {
      trigger: &quot;.wavySectionContainer&quot;,
      scrub: true,
    },
    rotation: 360,
    duration: 2,
    ease: &quot;none&quot;,
  });

答案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.

huangapple
  • 本文由 发表于 2023年6月16日 02:41:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76484623.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定