0

我正在尝试重现这种效果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', {
        
     scrollTrigger:{
         trigger: ".totale",
         start: "top 20%",
         markers: true,
         toggleActions: "play pause none reverse",
     },  
        
    scale: 4,
    y:"-100%"
        
        
        
    })
    
</script>

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

4

0 回答 0