Вертикальная прокрутка карточек GSAP на ScrollTrigger ⇐ Jquery

[Anonymous]

Я новичок в GSAP, поэтому, пожалуйста, помогите мне здесь.
Проблема в том, что я хочу попробовать ScrollTrigger в раздел, и у меня есть несколько карточек, расположенных вертикально в этом разделе, поэтому вот анимацию, которую я хочу получить: -

• Все карты имеют масштаб и непрозрачность масштаб: 0,7, непрозрачность: 0,6 только для первой карточки установлен масштаб: 1, непрозрачность: 1.
• Поэтому, когда раздел прокручивается, первая Масштаб карты уменьшится до масштаба: 0,7 и непрозрачности: 0,6; это первая анимация.
• Когда происходит анимация первой карты, должна запуститься вторая анимация, то есть следующая карта будет масштабироваться до масштаба: 1 и непрозрачности непрозрачности: 1
• Затем следующая карта, третья, должна запустить вторую анимацию, а предыдущая карта - номер карты. 2, должна начаться первая анимация с уменьшенным масштабом и непрозрачностью.
• Кроме того, есть путь SVG, который выглядит так, будто канавка должна следовать только за активной картой, а активной картой является карта, у которой есть масштаб: 1, непрозрачность: 1

Итак, это три анимации, которых я хочу добиться. Я пробовал разные подходы, которые я прокомментировал. включен в моем коде.
Это ссылка на codepen «Нажмите здесь, чтобы увидеть ручку CodePen»
Это HTML

Код: Выделить всё

[*]      rel="icon"
type="image/x-icon"
href="/assets/logo/ak_logo_doblue_stroke_circle_ungrouped.svg"
/>









Vetical Cards





















































Card Title |
Card Sub TItle

Card inner content title


[list]
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[/list]





Card Title |
Card Sub TItle

Card inner content title


[list]
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[/list]





Card Title |
Card Sub TItle

Card inner content title


[list]
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[/list]





Card Title |
Card Sub TItle

Card inner content title


[list]
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[/list]





Card Title |
Card Sub TItle

Card inner content title


[list]
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[/list]





Card Title |
Card Sub TItle

Card inner content title


[list]
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[/list]





Card Title |
Card Sub TItle

Card inner content title


[list]
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[*]Lorem Ipsum is simply dummy text of the printing and typesetting industry.
[/list]

Это CSS[/b]

Код: Выделить всё

body
{
background: #212529;
}

.cards_section
{
padding: 100px 50px;
}

.card_container
{
display: flex;
align-items: start;
}

.indicator_left_wraper
{
width: 4%;
display: flex;
align-items: flex-start;
justify-content: center;
margin: 16px 0 0 0;
}

.right_wraper
{
width: 96%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}

.card
{
transform: scale(0.7);
opacity: 0.6;
transform-origin: left;
}

.card.card_active
{
transform: scale(1);
opacity: 1;
}

.card_title
{
display: flex;
flex-wrap: wrap;
align-items: center;
}

.card_title h1,
.card_title p,
.card_content h3
{
margin: 0;
font-family: 'Fira Code', monospace;
}

.card_title h1
{
font-weight: 800;
font-size: 40px;
color: #F37A53;
padding: 0 0 24px 0;
}

.card_title h1 span,
.card_title p
{
font-size: 28px;
font-weight: 500;
color: #f3f3f3;
}

.card_title p
{
padding: 0 0 14px 0;
}

.card_content
{
border: 1px solid #f3f3f3;
border-radius: 6px;
}

.card_content h3
{
color: #f3f3f3;
font-weight: 500;
font-size: 28px;
padding: 12px 16px;
}

.card_key_points
{
border-top: 1px solid #f3f3f3;
padding: 12px 16px;
}

.card_key_points ul li
{
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #f3f3f3;
padding: 12px 0 0 0;
}

.left_border_line
{
height: 100vh;
}

.left_indicator_svg
{
margin: 0 0 0 -24px;
}

Это JS

Код: Выделить всё

// const exper_container_timeline = gsap.timeline({
//     scrollTrigger: {
//       trigger: ".exper_container",
//       scrub: true,
//       start:  "top center",
//       end: "bottom center",
//       markers: true
//     }
//   })
//   .to(".exper_card_active", {scale: 0.7, opacity: 0.6, stagger: 1})
//   .to(".exper_left_indicator_svg", {motionPath:{
//     path: ".exper_line",
//     alignOrigin: [0, 0]
//   }}, 0)

//   const expr_cards = gsap.utils.toArray('.exper_card');

//   expr_cards.forEach((card, index) => {
//     ScrollTrigger.create({
//         trigger: card,
//         start: `top-=${index} top+=10px`,
//         endTrigger: ".exper_container",
//         end: `bottom top+=${200 + cards.length}`,
//         markers: true,
//         invalidateOnRefresh: true
//     });
//   });

const cards = gsap.utils.toArray(".card");
const spacer = 40;
const minScale = 0.7;

const distributor = gsap.utils.distribute({ base: minScale, amount: 0.2, grid: "atuo", axis: "y" });

cards.forEach((card, index) => {

const scaleVal = distributor(index, cards[index], cards);

const tween_one = gsap.to(card, {
scrollTrigger: {
trigger: card,
start: `top-=${index * spacer} top`,
scrub: true,
markers: true,
invalidateOnRefresh: true
},
ease: "none",
scale: scaleVal,
opacity: 0.6
});

ScrollTrigger.create({
trigger: card,
start: `top-=${index * spacer} top`,
endTrigger: '.card_container',
end: `bottom top+=${200 + (cards.length * spacer)}`,
// pin: true,
// pinSpacing: false,
markers: true,
id: 'pin',
invalidateOnRefresh: true,
});

});

Подробнее здесь: https://stackoverflow.com/questions/786 ... olltrigger