ScrollReveal clone with gsap.

[Jens De Muynck]

I'm trying to create a ScrollRevealJS clone with the help of gsap. The method gsap.from() seems perfect for this. The only problem i have, is that i want my elements to have a default opacity of 0, and animate to an opacity of 1, but i'm not sure what the cleanest way to go about this is. I know i can just 'gsap.to(element, { opacity: 1 })' right after 'gsap.from(element, correspondingElementObject.properties);',  and set the default opacity to 0.

The problem with that is that i use gsap for other stuff outside of my ScrollReveal class, so when i set a default delay and duration, I dont want the rest of the website to be affected by the settings.

 

Thanks in advance!

See the Pen ExRrabY by JensDeMuynck (@JensDeMuynck) on CodePen.

[Cassie]

Hey there!

 

I guess you can't just use a from opacity:0 there because the code doesn't get run until it's intersecting, by which point it's too late and you see the flash.

Could you just pop a set tween in before the element is intersecting?

See the Pen BaVMNbX?editors=1010 by GreenSock (@GreenSock) on CodePen.

[Jens De Muynck]

Hi, thanks for the quick response, and sorry for my late response!

 

This is indeed what I needed, I guess I was really that close to the solution!

 

This is my final solution that supports setting defaults, like duration and delay:

See the Pen xxzMWVW by JensDeMuynck (@JensDeMuynck) on CodePen.