1

我在一家 IT 公司工作，我需要创建一个包含整个页面的滚动动画的产品，相同的布局每次都在变化，其他组件到处都在变形为另一种形状和大小，目前我正在使用 framer 中的 useViewPortScroll来自纯 JavaScript 的 motion 和 intersectionObserver API，

  const animate = useTransform(
    scrollYProgress,
    [0.0, 0.13, 0.2, 0.3, 0.4, 0.5],
    [1000, 0, 0, 0, -800, -1000]
  )

但问题是，当我在页面之间添加新页面时，整个事情都搞砸了？有什么方法可以根据页面或百分比值映射 scrollYProgress ，这对我来说是救命稻草？

请给我一个很好的解决方案。提前致谢。

4

1 回答 1

0

你们中的大多数人可能正在寻找此类问题的答案和解决方案，我解决了这个问题，尝试了不同的库和在线解决方案，其中大多数都没有按预期工作，最终我使用 gsap3、gsap3 ScrollTrigger 解决了这个问题和 ReactJS，我使用视口滚动映射页面数组，并使用小的 JavaScript 逻辑来捕捉页面以使用滚动触发器查看，这主要解决了我所有的问题，起初使用 gsap 可能看起来有点不知所措，但我向你保证结果将超出预期。

代码示例如下......

const LandingPage = () => {
    const pannel_1 = useRef(null);
    const pannel_2 = useRef(null);
    const pannel_3 = useRef(null);


    const pages = [
        pannel_1.current,
        pannel_2.current,
        pannel_3.current,

    ];

    // page animation

    useEffect(() => {
        function goToSection(i, pannel, anim) {
            const tl = gsap.timeline();
            if (tl.isActive()) return null;
            tl.to(window, {
                scrollTo: { y: pannel, autoKill: false },
                duration: 0.7,
                ease: 'none'
            });
            if (anim) {
                anim.restart();
            }
        }

        pages.map((pannel, i) => {
            ScrollTrigger.create({
                trigger: pannel,
                onEnter: () => goToSection(i, pannel)
            });
            ScrollTrigger.create({
                trigger: pannel,
                start: 'bottom bottom',
                onEnterBack: () => goToSection(i, pannel)
            });
        });
    });

    return (
        <div className={styles.container}>
            <section ref={pannel_1} className={`${styles.pannel}`}>
                <Page pannel_1={pannel_1} />
            </section>

            <section ref={pannel_2} className={`${styles.pannel} `}>
                <Page pannel_3={pannel_3} />
            </section>

            <section ref={pannel_3} className={`${styles.pannel}`}>
                <Page pannel_3={pannel_3} />
            </section>
        </div>
    );
};

export default LandingPage;
于 2020-11-20T14:44:09.240 回答