Scale3D zooming animation is not going smooth as the reference one

[Bidyut]

Hi,

First of all great to register to this community and creating my first post.

 

So, I have been trying this this overlay zoom effect tutorial from this YouTube, to achieve exactly like this one, what I am trying to achieve is done on my testing WordPress website (build with Elementpr pro) this link, 

 

Here's the modified custom code from the YouTube guide link :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>

<script>
function overlay_zoom() {
    const tl = gsap.timeline({
        scrollTrigger: {
            trigger: '.content-scroll',
            start: 'top top',
            end: 'bottom top',
            scrub: true,
            pin: true,
            anticipatePin: 1,
//             markers: true
        }
    });

  tl.to('.overlay-zoom', {scale:10, duration:2});
	tl.to('.scroll-headline', {y: -20, opacity:1}, '<20%');
	tl.to('.scroll-btn',{y: -20, opacity:1},'<50%' );
	tl.to('.overlay-zoom', {display:'none'}, '<');
}


function run_gsap(){
	let gsap_loaded = setInterval(function(){
		const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
		const screenSize = window.screen.width >= 1024;
		if(window.gsap && window.ScrollTrigger && !eleBuilder && screenSize){
			gsap.registerPlugin(ScrollTrigger);
			overlay_zoom();
			clearInterval(gsap_loaded);
		}
	}, 500);
}

run_gsap();
</script>

 

Now, as you can see that the scroll or zooming effect is not as smooth (whether its Scroll3D or something like that being used on the reference website.

 

So, I'd request anyone to guide me on what I'm missing to achieve the target.

 

Thank you  

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen YzbPYMx by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Bidyut]

10 minutes ago, Rodrigo said:

Hi,

 

Maybe something like this:

 

 

 

Hopefully this helps.

Happy Tweening!

 

My Goodness 😇😊

Hey, May many thank you.

 

This looks same what I am looking for, I will try this tomorrow and get back here with the result or if I face any other issue .

[Bidyut]

Hi @Rodrigo,

I tried to replicate it multiple times in WordPress, page link : Click here

 

but as it can be seen, that after scrolling down, the content section again coming from up to down in jumping style.

[Rodrigo]

Hi,

 

Sorry about the issues, but there is absolutely nothing we can do on a live site, there are just too many elements and styles there that could be interfering with how GSAP and ScrollTrigger should work. The demo I created works as expected so something else in your setup is causing this erratic behaviour.

 

The only suggestion I can give you is to start removing other styles and scripts until this work, then you'll have the culprit and now exactly what to debug and how.

 

Another option is to pin the outmoust element in the site instead of that hero section. Other than that I can't think of something else.

 

Happy Tweening!