I am actually learning to clone the animation that is seen in the beginning of the shared website below, when you scroll. Which basically overlays the background video with their logo text. I have tried to follow some tutorials and sample codepens that are available, but I couldn't make it work as same as what we see there. Tried Clippath with scrolltrigger, but it didn't work.
Can anyone guide me with the suitable animation that can be used here?
Mostly I have seen the samples going from normal size to larger, but in the website it is getting smaller from larger and getting pinned at the end. I am so confused with this.
How to mask in with text overlay on scroll?
in GSAP
Posted
Hi there,
I am actually learning to clone the animation that is seen in the beginning of the shared website below, when you scroll. Which basically overlays the background video with their logo text. I have tried to follow some tutorials and sample codepens that are available, but I couldn't make it work as same as what we see there. Tried Clippath with scrolltrigger, but it didn't work.
Can anyone guide me with the suitable animation that can be used here?
Website link - https://kippo.com/
The codepens that I followed
See the Pen abyMVEe by snorkltv (@snorkltv) on CodePen
Mostly I have seen the samples going from normal size to larger, but in the website it is getting smaller from larger and getting pinned at the end. I am so confused with this.
Any help would be appreciated. Thanks
See the Pen YzwVZEm by mvaneijgen (@mvaneijgen) on CodePen