Vertical Card Scroll

[Raj000]

I am trying to create ScrollTrigger so that when the user scrolls the current card scales down and opacity decreases, and the next card scales up and opacity increases, also the SVG on the left side should follow the current card which is scaled up.

is there anyone who can help me achieve this,  I am new to GSAP and web development so please help.

See the Pen XWwwELP by j_akki (@j_akki) on CodePen

[Rodrigo]

Hi,

 

This is not the simplest thing to achieve and unfortunately we don't have the time resources to provide custom demos for our users or solve complex logic issues.

 

You should explore using the DrawSVG Plugin in combination with ScrollTrigger for this:

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

 

This demo by @Carl:

See the Pen KKmZYGy by snorkltv (@snorkltv) on CodePen

 

Also have a look at this thread as well:

 

Is also super important to setup your SVG properly as well and keep everything in a single Timeline in order to sync everything correctly.

 

Hopefully this helps.

Happy Tweening!

[Raj000]

I know the DrawSVG and MotionPath Plugins, and I can achieve that with the SVG but what I need is the animation on the card here is the Prototype link of the animation, and what type of animation I want to achieve.

https://www.figma.com/proto/rhZU38YX13bj5MfdrdSZaw/My_Portfolio?node-id=575-345&t=aIE3uX0Z5ap5Emj6-0&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=573%3A3