时间戳

首页 > 解决方案 > 在时间线 GSAP 中对补间进行分组

javascript - 在时间线 GSAP 中对补间进行分组

问题描述

我在 GSAP 论坛上问过同样的问题，但我猜它不是一个活跃的论坛。我确实在 GSAP 上遇到了一些困难，我想在时间线中对补间进行分组，而不是单独进行，前两个同时进行，然后是后两个，依此类推......我真的试着自己弄清楚，我添加了一个减延迟，但它无法与 ScrollMagic 一起正常工作，或者我无法使其工作。这是我的代码：

let controllerPerspectiveFirst = new ScrollMagic.Controller();
perspectiveTimeline = new TimelineMax();

perspectiveTimeline
    .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut } )
    .from( '#as-perspective-bg--mountain--02', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } )
    .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: 0, scaleY: 0, scaleX: 0, ease: Power4.easeOut } )
    .to( '#as-perspective-bg--mountain--02', .4, { width: '180vw', scaleY: .6, scaleX: .6, ease: Power4.easeOut } )
    .from( '#as-perspective-bg--desert', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } );

非常感谢。

标签： javascriptgsapscrollmagic

解决方案

感谢 GreenSock 的惊人文档，我找到了解决方案。我只是在每个补间的末尾添加一个位置参数（https://greensock.com/position-parameter ）。在最后： 

let controllerPerspectiveFirst = new ScrollMagic.Controller();
    perspectiveTimeline = new TimelineMax();

    perspectiveTimeline
        .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut }, 0 )
        .from( '#as-perspective-bg--mountain--02', { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 0 )
        .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: 0, scaleY: 0, scaleX: 0, x: '-40vw', y: '-70vh', ease: Power4.easeOut }, 1 )
        .to( '#as-perspective-bg--mountain--02', .4, { width: '180vw', scaleY: .6, scaleX: .6, x: '-40vw', y: '-28vw', ease: Power4.easeOut }, 1 )
        .from( '#as-perspective-bg--desert', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 1 );

推荐阅读