GSAP ScrollTrigger在Next.js中无法正常工作。

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

GSAP Scrolltrigger PIN not working properly in nextjs

问题

从我的下面的代码来看,如果我注释掉pin: true属性,代码会正常工作,但包装部分我希望水平滚动的容器不会固定在顶部。如果我取消注释pin: true,所有容器(触发器)将不可见。

有关如何解决此问题的任何建议将不胜感激。

英文:

From my code below, If I comment out the pin: true property, the code works normally but the container that wraps the sections I expect to scroll horizontally are not sticky to the top. If I uncomment the pin: true, all the container (trigger) will not be visible.

Any suggestions on how to resolve this issue will be greatly appreciated.

  1. import React, { useEffect } from "react";
  2. import OverlayMenu from "./OverlayMenu";
  3. import { gsap } from "gsap";
  4. import ScrollTrigger from "gsap/dist/ScrollTrigger";
  5. function MainContent({ overlayRef }) {
  6. gsap.registerPlugin(ScrollTrigger);
  7. useEffect(() => {
  8. // alert(document.querySelector(".main__content").offsetWidth)
  9. const sections = gsap.utils.toArray(".section");
  10. gsap.to(sections, {
  11. xPercent: -100 * (sections.length - 1),
  12. ease: "none",
  13. scrollTrigger: {
  14. trigger: ".main__content",
  15. scrub: 1,
  16. markers: true,
  17. start: "top top",
  18. // // snap: 1 / (sections.length - 1),
  19. end: "+=" + document.querySelector(".main__content").offsetWidth,
  20. pin: true,
  21. },
  22. });
  23. }, []);
  24. return (
  25. <div className="main__content__wrapper w-[calc(100%_-_80px)] h-screen ml-20">
  26. <div className="w-full relative h-screen">
  27. <OverlayMenu overlayRef={overlayRef} />
  28. {/* <div className="w-full h-screen bg-black"></div> */}
  29. <div className="main__content w-[300%] bg-purple-700 h-screen flex flex-nowrap">
  30. <div className="section w-full h-screen- bg-red-500">1</div>
  31. <div className="section w-full h-screen- bg-blue-500">2</div>
  32. <div className="section w-full h-screen- bg-yellow-500">3</div>
  33. </div>
  34. </div>
  35. </div>
  36. );
  37. }
  38. export default MainContent;

答案1

得分: 1

将版本降级到 3.8.0

  1. yarn add gsap@3.8.0

或者

  1. npm install gsap@3.8.0

你可以在这里阅读更多信息:
https://greensock.com/forums/topic/30747-scrolltrigger-in-nextjs-build-not-working-reliably/#comment-153675

英文:

Step back the version to 3.8.0

  1. yarn add gsap@3.8.0

OR

  1. npm install gsap@3.8.0

You can read more here:
https://greensock.com/forums/topic/30747-scrolltrigger-in-nextjs-build-not-working-reliably/#comment-153675

答案2

得分: 0

以下是您提供的代码的翻译部分:

  1. import React, { useEffect, useState } from "react";
  2. import OverlayMenu from "./OverlayMenu";
  3. import { gsap } from "gsap";
  4. import ScrollTrigger from "gsap/dist/ScrollTrigger";
  5. function MainContent({ overlayRef }) {
  6. gsap.registerPlugin(ScrollTrigger);
  7. const [hasRendered, setHasRendered] = useState(false);
  8. useEffect(() => {
  9. // ******This will set the state of hasRendered when the page render so as to keep track of the rendering steps *******
  10. setHasRendered(true);
  11. }, []);
  12. useEffect(() => {
  13. // ******* I added the conditional statement here to only create the instance of the gsap timeline ONLY after the page has rendered*******
  14. if (hasRendered) {
  15. // alert(document.querySelector(".main__content").offsetWidth)
  16. const sections = gsap.utils.toArray(".section");
  17. gsap.to(sections, {
  18. xPercent: -100 * (sections.length - 1),
  19. ease: "none",
  20. scrollTrigger: {
  21. trigger: ".main__content",
  22. scrub: 1,
  23. markers: true,
  24. start: "top top",
  25. // // snap: 1 / (sections.length - 1),
  26. end: "+=" + document.querySelector(".main__content").offsetWidth,
  27. pin: true,
  28. },
  29. });
  30. }
  31. }, [hasRendered]); //******** Dont forget the dependencies array too */
  32. return (
  33. <div className="main__content__wrapper w-[calc(100%_-_80px)] h-screen ml-20">
  34. <div className="w-full relative h-screen">
  35. <OverlayMenu overlayRef={overlayRef} />
  36. {/* <div className="w-full h-screen bg-black"></div> */}
  37. <div className="main__content w-[300%] bg-purple-700 h-screen flex flex-nowrap">
  38. <div className="section w-full h-screen- bg-red-500">1</div>
  39. <div className="section w-full h-screen- bg-blue-500">2</div>
  40. <div className="section w-full h-screen- bg-yellow-500">3</div>
  41. </div>
  42. </div>
  43. </div>
  44. );
  45. }
  46. export default MainContent;

请注意,翻译中的代码部分没有进行任何修改,仅提供了注释和字符串的翻译。如果您需要进一步的帮助,请随时提出。

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. import React, { useEffect, useState } from &quot;react&quot;;
  2. import OverlayMenu from &quot;./OverlayMenu&quot;;
  3. import { gsap } from &quot;gsap&quot;;
  4. import ScrollTrigger from &quot;gsap/dist/ScrollTrigger&quot;;
  5. function MainContent({ overlayRef }) {
  6. gsap.registerPlugin(ScrollTrigger);
  7. const [hasRendered, setHasRendered] = useState(false);
  8. useEffect(() =&gt; {
  9. // ******This will set the state of hasRendered when the page render so as to keep track of the rendering steps *******
  10. setHasRendered(true);
  11. }, []);
  12. useEffect(() =&gt; {
  13. // ******* I added the conditional statement here to only create the instance of the gsap timeline ONLY after the page has rendered*******
  14. if (hasRendered) {
  15. // alert(document.querySelector(&quot;.main__content&quot;).offsetWidth)
  16. const sections = gsap.utils.toArray(&quot;.section&quot;);
  17. gsap.to(sections, {
  18. xPercent: -100 * (sections.length - 1),
  19. ease: &quot;none&quot;,
  20. scrollTrigger: {
  21. trigger: &quot;.main__content&quot;,
  22. scrub: 1,
  23. markers: true,
  24. start: &quot;top top&quot;,
  25. // // snap: 1 / (sections.length - 1),
  26. end: &quot;+=&quot; + document.querySelector(&quot;.main__content&quot;).offsetWidth,
  27. pin: true,
  28. },
  29. });
  30. }
  31. }, [hasRendered]); //******** Dont forget the dependencies array too */
  32. return (
  33. &lt;div className=&quot;main__content__wrapper w-[calc(100%_-_80px)] h-screen ml-20&quot;&gt;
  34. &lt;div className=&quot;w-full relative h-screen&quot;&gt;
  35. &lt;OverlayMenu overlayRef={overlayRef} /&gt;
  36. {/* &lt;div className=&quot;w-full h-screen bg-black&quot;&gt;&lt;/div&gt; */}
  37. &lt;div className=&quot;main__content w-[300%] bg-purple-700 h-screen flex flex-nowrap&quot;&gt;
  38. &lt;div className=&quot;section w-full h-screen- bg-red-500&quot;&gt;1&lt;/div&gt;
  39. &lt;div className=&quot;section w-full h-screen- bg-blue-500&quot;&gt;2&lt;/div&gt;
  40. &lt;div className=&quot;section w-full h-screen- bg-yellow-500&quot;&gt;3&lt;/div&gt;
  41. &lt;/div&gt;
  42. &lt;/div&gt;
  43. &lt;/div&gt;
  44. );
  45. }
  46. export default MainContent;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月9日 01:47:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/75050068.html
匿名

发表评论

匿名网友

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

确定