平滑滚动动画效果

问题描述

我正在尝试重现这种效果 https://oasiscannabis.co，但我真的卡住了。

我正在使用 GSAP 和 scrolltrigger 使其工作，但问题是在我的代码中缩放并不平滑，但它直接从比例 1 变为比例 2。我希望它能够像参考网站一样顺利扩展。

我正在使用 elementor 作为视觉作曲家开发 wordpress。这是我的代码：

<div class="svision">
    
    <img class="totale" src="http://www.beyconsulting.it/Factanza/wp-content/uploads/2021/03/Frame.svg" />

</div>

<script>    
    
    var scroll1 = new TimelineMax();
    
    scroll1 
    .set('.totale',{scale:1,transformOrigin: "center top"})
    .to('.totale',{
        
     scrollTrigger:{
         trigger: ".totale",start: "top 60%",markers: true,ease: "expo.out",duration: "100%",delay: 0.2,toggleActions: "play pause none reverse",},scale: 2,y:"-50%"
        
        
        
    })
    
    
   .to('.totale',start: "top 20%",scale: 4,y:"-100%"
        
        
        
    })
    
</script>

这是我正在处理的网页http://www.beyconsulting.it/Factanza/test-nuovo/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）