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

[Rodrigo]

Hi,

 

Yeah as I mentioned in my previous post this is not the simplest thing to achieve. It would probably require a combination of ScrollTrigger, MotionPath and MorphSVG.

 

I would recommend you to start creating the Timeline first, with the cards and the rest of the Plugins first (MotionPath and MorphSVG) then when you have the effect you need/want, plug ScrollTrigger into it in order to make it all scroll-controlled. Unfortunately we don't have the time resources to create this for you, it's beyond the scope of the help we provide in these free forums and I can't recall a demo like this, that could serve as a starting point. We offer paid consulting services and you can post in the Jobs & Freelance forums in order to get help there.

 

Happy Tweening!