Timelines Custom

[ramon.nuila]

Hello team, I would like you to help me with something. I am new to this, and at my job, they are asking me to do something like this. I wanted to ask for help regarding this.

https://co.pinterest.com/pin/1010424866387546056/
 

They want something like the image I am sharing but with different components. If we look closely, the vectors change color, and the scroll follows the element, and they also want a smooth entrance effect.

I was recommended to use this GSAP tool. I am the only programmer, please help!

Edited February 6, 2024 by Cassie
removed long code thread

[GSAP Helper]

Hey there! Welcome - I've removed the long code snippet you added. It would be very helpful if you added a minimal demo that shows what you're attempting instead.

 

Keep it simple. We would love to help but we can't guide you through the whole project. Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece. Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 

 

Before you know it, things will fall into place one at a time. 

 

A good place to start here would be the line, DrawSVG may help here? Certainly ScrollTrigger.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[Rodrigo]

Hi,

 

These demos by @mvaneijgen can definitely help:

See the Pen BabrJyv by mvaneijgen (@mvaneijgen) on CodePen.

 

See the Pen xxBjbNW by mvaneijgen (@mvaneijgen) on CodePen.

 

Also this is a good starting point as well:

See the Pen gOEaEoa by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!