How to fade away the text or image when zoomed in using GSAP ScrollTrigger ? I want it to disappear after finishing the scroll and the website appears after that scroll.

[Haris Khan]

When the website loads, on the front page there is an image or a text, when the user scrolls to go down it should zoom in, after zooming in it should disappear/fade and user can carry on to the website, similarly when the user scrolls to the top it should appear again and zoom out back to original, such that it looks like the website has just loaded.

 

Any help is highly appreciated.

See the Pen vYMzMqQ by haris_kz (@haris_kz) on CodePen

[mvaneijgen]

Hi @Haris Khan welcome to the forum!

 

A timeline is the most powerful tool in GSAP with it you can put tweens in a sequence and thus in this case have ScrollTrigger play your timeline in full. 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

 

See the Pen bGJxyeV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[Haris Khan]

3 minutes ago, mvaneijgen said:

Hi @Haris Khan welcome to the forum!

 

A timeline is the most powerful tool in GSAP with it you can put tweens in a sequence and thus in this case have ScrollTrigger play your timeline in full. 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

 

 

 

 

Thank you man, if there's any thing I'll ask again, Really Appreciated.