Jump to content
Search Community

ScrollTrigger.refresh() not firing start and end dynamic values

pdub888 test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

I may not be doing this correctly but I'm trying to listen on window resize, refresh the scrollTrigger and then also it's start and end values.
The initial create works well.

On resize, i'm getting all the logs except for the dynamic function ( getPadding1() and getPadding2() ).

On resize, the start and end markers just do not change ( but if i hard refresh the page, it works ).

 

There's probably a little mistake in here i'm not catching - please let me know ( thx 😞

 

let w = window.innerWidth;
		let h = window.innerHeight;
		let padding1 = h - ((w * .62) * .90);
		let padding2 = ((w * .62) * .90) + padding1;
		
		gsap.registerPlugin(ScrollTrigger);
		window.onresize = reportWindowSize;
		ScrollTrigger.addEventListener("refresh", function() {
		    console.log("REFRESHED ")
			console.log(padding1 + " padding1")
		});
		
		function reportWindowSize(){
			console.log("window size");
			let newW = window.innerWidth;
			let newH = window.innerHeight;
			padding1 = newH - ((newW * .62) * .90);
			padding2 = ((newW * .62) * .90) + padding1;
			console.log(padding1 + " padding1" + " " + padding2);
			ScrollTrigger.refresh();
		}
		
		function getPadding1(){
			console.log("GETPADDING1" + padding1)
			return padding1;
		}
		
		function getPadding2(){
			return padding2;
		}

		const anim1 = gsap.to(".para-clip2", {
          webkitClipPath: 'inset(0% 0% 0% 0%)',
          clipPath: 'inset(0% 0% 0% 0%)',
		  ease:Linear.easeNone
		});
		
		ScrollTrigger.create({
			trigger: ".trigger1",
			animation: anim1,
			markers: true,
			start: getPadding1() + "px bottom",
			end: getPadding2() + "px bottom",
			scrub: true,
			invalidateOnRefresh: true
		});

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...