gsap2

.s4 .round{position: absolute; top: 40%; left:50%; transform: translateX(-50%); 
display: block; width: 1500px; height: 1500px; 
border-radius: 50%; background-color: chocolate; z-index: 1;}

$(function(){
    gsap.registerPlugin(ScrollTrigger);
    gsap.timeline({
        scrollTrigger:{
            trigger: '.s4', 
            start: "top 50%", 
            end : "30% 0%", 
            scrub:1,
            marker:true
        }
    })
    .fromTo('.round', 
    {"width":"0", "height":"0", "duration":"10", "ease":"elastic", "top":"3%"}, 
    {"width":"1500px", "height":"1500px", "duration":"10", "opacity":"1", "top":"40%"}, 0)
});