Creating smooth scaling with scrolltrigger

[Giuliano Maria Lodi]

Hi, I'm trying to reproduce this effect https://oasiscannabis.co but I'm really stuck.

I'm using GSAP and scrolltrigger to make it works but the thing is that on my code the scaling is not smooth but it goes from scale 1 to scale 2 directly. I would like it to scale smoothly as in the reference website.

I'm working on WordPress with elementor as visual composer.

Thank you in advance

 

This is the webpage I'm working on http://www.beyconsulting.it/Factanza/test-nuovo/

 

This is my code:

 

<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>

 

[tailbreezy]

Hello there,

 

This issue probably has to do with your anchors placement or having too short of end value in scrollTrigger.

 

See the Pen 72901772ab1a6bc88593420b9d704353?editors=1010 by dadacoded (@dadacoded) on CodePen

[Giuliano Maria Lodi]

Hi, it's working now! Thank you so much. I think I was doing wrong using multiple .to 

[ZachSaucier]

Hey Giuliano and welcome tot he GreenSock forums.

 

You're making a few of the most common GSAP mistakes and the most common ScrollTrigger mistakes that I recommend that you fix. Additionally a duration inside of the ScrollTrigger vars doesn't make much sense. Also did you mean to include a scrub for the ScrollTrigger like tailbreezy shows in his demo? If so, toggleActions won't do anything when a scrub is applied.