Jump to content
Search Community

How to mask in with text overlay on scroll?

blackspidey test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

The effect on that site looks like just an SVG that's loaded as an <img> where the "letters" are transparent and there's a black background (knockout). You can animate that down with ScrollTrigger for sure. Maybe give it a try and if you get stuck, post a minimal demo CodePen here with your attempt. 

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

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...