Help with Heights and ScrollTrigger

[nboada]

Hi, I'm new here. Just started digging into this GSAP world, quite amazed so far!!

I found this NextJS site I really liked, and I've been trying to replicate it with Wordpress.

I've added the gsap libraries and it works on other sections, but don't know why, when I use heights in % in my CSS, gsap won't animate them.

 

If i change the css to height 1500px, it works.

 

CSS:

.circle {
  height: 1550%;
  width: 120%;
  left: -10%;
  border-radius: 0 0 50% 50%;
  background-color: #e4ff07;
  position: absolute;
  box-shadow: 0 60px 50px rgba(0,0,0,.748);
}

 

Script is:

// SLIDING IMAGES
    const container = document.getElementById('slidingImages');
	const circle = container.querySelector('.circle');

	gsap.to(circle, {
		scrollTrigger: {
			trigger: container,
			start: 'top bottom',
			end: 'bottom top',
			scrub: true,
			markers: true
		},
		height: 0,
	});

 

It should be happening here: https://tasks.talkk.com.au/ (above the blog section).
Reference is https://blog.olivierlarose.com/demos/awwwards-landing-page

Hope you could guide me on how to fix it Thanks!

[GreenSock]

Welcome to the world of GSAP, @nboada

 

Seems to work fine: 

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

 

If you're having trouble, please always include a minimal demo, like a CodePen or Stackblitz that clearly illustrates the issue and we'd be happy to address any GSAP-specific problems. It's not feasible to troubleshoot a live web site because there are too many factors involved and we can't tweak things.

[Cassie]

Heya! Thanks for the excitable words. Lovely yo hear you're having fun.

 

So - height  (in percentages) can be a little tricky in CSS The percentage height of a child is calculated with respect to the height of the parent.

If I were you I'd try setting it with CSS to see if anything changes, if not, likely a CSS thing (I mean, it's likely a CSS thing either way as Jack's demo shows it works - but that's where I'd start debugging)

[nboada]

2 minutes ago, Cassie said:

Heya! Thanks for the excitable words. Lovely yo hear you're having fun.

 

So - height  (in percentages) can be a little tricky in CSS The percentage height of a child is calculated with respect to the height of the parent.

If I were you I'd try setting it with CSS to see if anything changes, if not, likely a CSS thing (I mean, it's likely a CSS thing either way as Jack's demo shows it works - but that's where I'd start debugging)

Thank you Cassie, yeah all good! I ended up going with PX instead, working perfectly now!

[nboada]

4 hours ago, GreenSock said:

Welcome to the world of GSAP, @nboada

 

Seems to work fine: 

 

 

 

If you're having trouble, please always include a minimal demo, like a CodePen or Stackblitz that clearly illustrates the issue and we'd be happy to address any GSAP-specific problems. It's not feasible to troubleshoot a live web site because there are too many factors involved and we can't tweak things.

Thanks mate, as mentioned before, ended up doing it with pixels instead, thanks for you fast reply!