问题：
前端 - gsap是这样用的吗？看我代码总觉得有问题？
宰父涵忍
// 向上滚动 if (n > 0) { console.log('向上滚动', index); if (index === 1) { } else if (index === 2) { gsap.to('.home_page .one_screen', { // y: '-100vh', ...commonGSAP, opacity: 0, top: '-20vh', onComplete: () => { gsap.set('.home_page .home_two_screen', { top: '0vh', opacity: 1, }); gsap.set('.home_page .home_two_screen .left', { width: '13.6rem', }); gsap.to('.home_page .home_two_screen .left', { ...commonGSAP, clipPath: 'polygon(0px 10%, 84% 10%, 92% 64%, 0% 64%)', }); gsap.to('.home_page .home_two_screen .right', { ...commonGSAP, clipPath: 'polygon(0px 25%, 100% 25%, 100% 77%, 16% 77%)', }); gsap.to('.home_page .home_two_screen .text', { ...commonGSAP, top: '55%', }); }, }); } else if (index == 3) { gsap.to('.home_page .home_two_screen .text', { top: '0rem', opacity: 0, ...commonGSAP, }); gsap.to('.home_page .home_two_screen .left', { ...commonGSAP, width: '90vw', clipPath: 'polygon(0px 10%, 84% 10%, 92% 64%, 0% 64%)', opacity: 0, }); gsap.to('.home_page .home_two_screen .right', { ...commonGSAP, clipPath: 'polygon(38% 2%, 100% 15%, 100% 66%, 62% 66%)', opacity: 0, onComplete: () => { gsap.set('.home_page .home_two_screen', { opacity: 0, }); }, }); gsap.set('.home_page .three_screen_box', { top: 0, opacity: 0, }); gsap.to('.home_page .three_screen_box', { ...commonGSAP, opacity: 1, }); $('.three_screen_box_list_item').each(function (i) { gsap.to(this, { y: 0, opacity: 1, ...commonGSAP, delay: i * 0.1, }); }); } else if (index == 4) { $('.layout_header').addClass('layout_header_four'); $('.three_screen_box_list_item').each(function (i) { gsap.to(this, { y: '-100vh', ...commonGSAP, delay: i * 0.1, }); }); gsap.to('.home_page .three_screen_box', { ...commonGSAP, opacity: 0, }); gsap.to('.home_page .four_screen_box', { top: '0', ...commonGSAP, opacity: 1, }); gsap.fromTo( '.home_page .four_screen_box .list_item:nth-child(1) .list_item_left', { widht: '0', flexBasis: '0', }, { width: '11.22rem', flexBasis: '11.22rem', }, ); gsap.fromTo( '.four_screen_box_list_btn', { left: 0, top: 0, }, { left: '50%', top: '50%', }, ); } else if (index == 5) { console.log('滚动了第五屏'); $('.layout_header').removeClass('layout_header_four'); $('.layout_header').addClass('layout_header_five'); gsap.to('.home_page .five_screen_box', { top: '0', ...commonGSAP, opacity: 1, }); gsap.fromTo( '.home_page .four_screen_box .list_item:nth-child(4) .list_item_left', { width: '11.22rem', flexBasis: '11.22rem', }, { widht: '100vw', flexBasis: '100vw', }, ); gsap.fromTo( '.four_screen_box_list_btn', { left: '50%', top: '50%', }, { left: '100%', top: 0, }, ); gsap.to('.home_page .four_screen_box', { ...commonGSAP, top: '-100vh', opacity: 0, }); } } else { // 向下滚动 console.log('向下滚动', index); if (index === 1) { console.log('滚动了第一屏'); gsap.to('.home_page .home_two_screen .left', { ...commonGSAP, clipPath: 'polygon(0 100%, 50% 100%, 50% 100%, 0% 100%)', }); gsap.to('.home_page .home_two_screen .right', { ...commonGSAP, clipPath: 'polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)', }); gsap.to('.home_page .home_two_screen .text', { ...commonGSAP, top: '100vh', onComplete: () => { gsap.set('.home_page .home_two_screen', { top: '100vh', ...commonGSAP, opacity: 0, }); gsap.to('.home_page .one_screen', { ...commonGSAP, opacity: 1, top: '0vh', }); }, }); } else if (index === 2) { console.log('滚动了第二屏'); gsap.set('.home_page .home_two_screen', { top: '0vh', ...commonGSAP, opacity: 1, }); gsap.set('.home_page .home_two_screen .left', { width: '13.6rem', ...commonGSAP, opacity: 1, }); gsap.to('.home_page .home_two_screen .left', { ...commonGSAP, opacity: 1, clipPath: 'polygon(0px 10%, 84% 10%, 92% 64%, 0% 64%)', }); gsap.to('.home_page .home_two_screen .right', { ...commonGSAP, clipPath: 'polygon(0px 25%, 100% 25%, 100% 77%, 16% 77%)', opacity: 1, }); gsap.to('.home_page .home_two_screen .text', { ...commonGSAP, top: '55%', opacity: 1, }); gsap.to('.home_page .three_screen_box', { ...commonGSAP, opacity: 0, onComplete: () => { gsap.set('.home_page .three_screen_box', { top: '100vh', }); }, }); $('.three_screen_box_list_item').each(function (i) { gsap.to(this, { y: '50vh', ...commonGSAP, opacity: 0, delay: i * 0.1, }); }); } else if (index === 3) { console.log('滚动了第三屏'); gsap.to('.home_page .three_screen_box', { ...commonGSAP, opacity: 1, }); $('.three_screen_box_list_item').each(function (i) { gsap.to(this, { y: 0, ...commonGSAP, delay: i * 0.1, opacity: 1, }); }); gsap.to('.home_page .four_screen_box', { ...commonGSAP, top: '100vh', opacity: 0, }); $('.layout_header').removeClass('layout_header_four'); } else if (index === 4) { $('.layout_header').addClass('layout_header_four'); $('.layout_header').removeClass('layout_header_five'); console.log('滚动了第四屏'); gsap.to('.home_page .four_screen_box', { ...commonGSAP, top: '0vh', opacity: 1, }); gsap.to('.home_page .five_screen_box', { ...commonGSAP, top: '100vh', opacity: 0, }); gsap.fromTo( '.home_page .four_screen_box .list_item:nth-child(4) .list_item_left', { widht: '100vw', flexBasis: '100vw', }, { width: '11.22rem', flexBasis: '11.22rem', }, ); gsap.fromTo( '.four_screen_box_list_btn', { left: '100%', top: 0, }, { left: '50%', top: '50%', }, ); } else if (index === 5) { } }我才是5屏幕，我写的都快疯了。就是进来的时候，动画从下到中间，离开的时候，从中间到上面，反向操作也是这样。
共有1个答案
宗鸿博
gsap有timeline的呀，看看文档 https://greensock.com/docs/v3/GSAP/Timeline
类似资料：
-
const dataItem = (msg.data && msg.data[0]) || msg; 如果msg.data和msg.data[0]都为真时返回msg.data[0]，否则返回msg？
-
我正在为我的discord机器人制作一个管理cog，我的代码无法识别“ctx”。PyCharm建议用“self”代替“ctx”，我不知道“self”是做什么的。从PyCharm所说的，还有数以百万计的其他东西，我必须写下它是什么。PyCharm无法识别帮会、发送、作者和频道，它还说是一个无法访问的代码。请注意，如果这似乎是一个非常愚蠢的问题，我是一个初学者，两周前就开始了。 至于代码：
-
sourcetree 上有这样的圆角矩形框，写的有：origin/xt/feat/crc64 之类的字样： 1.请问这样的是tag吗？ 但是没有看到有commit的节点呢？ 2.您看截图下面有： feat: fix git action error feat: fix git action error feat: fix git action error 为何会有三个呢？ 这是代表什么意思呢？一般
-
其目的是对用户输入的分数进行排序、显示和平均。我还没弄明白。如果你已经解决了这个问题，请帮忙。到目前为止，我已经尝试了这段代码，但它不起作用。 我从这段代码中得到的只是一个编译器错误。有人有什么建议吗？谢谢你。
-
有没有像Base64这样的编码算法？ 谢了！
-
问题内容： 我正在做一个测试：比较cgo和纯Go函数的执行时间，每个函数运行一亿次。与Golang函数相比，cgo函数需要更长的时间，我对此结果感到困惑。我的测试代码是： 结果是： 结果表明，调用C函数比Go函数要慢。我的测试代码有问题吗？ 我的系统是：mac OS X 10.9.4（13E28） 问题答案： 正如您所发现的那样，通过CGo调用C / C ++代码的开销相当大。因此，一般而言，最好