Help with how to make a specific animation

[mbe]

Hello,

 

I am new to gsap and I want to make an animation where, when i scroll a thin and long arrow is displayed over the entire website viewport. I dont want the entire arrow to be shown at once, but i want it to gradually show more and more of it while scrolling down. And then if you scroll up you see less and less of the arrow. Not opacity wise but height wise.

 

Can anyone tell me how to start with this?

 

Link to example video: https://bb.agency/project/nuxtjs?utm_source=dribble&utm_medium=case study&utm_campaign=nuxtjs

The video can be found further down on the page.

[GSAP Helper]

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.  

 

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

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Cassie]

Hey there. I can't see the video you're after.

But it sounds like you need draw SVG to draw the stroke of an arrow out though. Attempt that first, then when you've got the animation working the way you want, hook it up to scroll with ScrollTrigger.

DrawSVG first - don't worry about ScrollTrigger yet.
 

Pop back here if you have questions with a minimal demo.

 

 

 

[PointC]

This demo from the ScrollTrigger examples collection should get you started.

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