Мобильная версияПроблема в том, что я хочу попробовать ScrollTrigger в раздел, и у меня есть несколько карточек, расположенных вертикально в этом разделе, поэтому вот анимацию, которую я хочу получить: -
- Все карты имеют масштаб и непрозрачность масштаб: 0,7, непрозрачность: 0,6 только для первой карточки установлен масштаб: 1, непрозрачность: 1.
- Поэтому, когда раздел прокручивается, первая Масштаб карты уменьшится до масштаба: 0,7 и непрозрачности: 0,6; это первая анимация.
- Когда происходит анимация первой карты, должна запуститься вторая анимация, то есть следующая карта будет масштабироваться до масштаба: 1 и непрозрачности непрозрачности: 1
- Затем следующая карта, третья, должна запустить вторую анимацию, а предыдущая карта - номер карты. 2, должна начаться первая анимация с уменьшенным масштабом и непрозрачностью.
- Кроме того, есть путь SVG, который выглядит так, будто канавка должна следовать только за активной картой, а активной картой является карта, у которой есть масштаб: 1, непрозрачность: 1
Это ссылкаНажмите здесь, чтобы увидеть CodePen Pen
Это моя попытка кода на данный момент:
Код: Выделить всё
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,
});
});Код: Выделить всё
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;
}Код: Выделить всё
[*] 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]
Подробнее здесь: https://stackoverflow.com/questions/786 ... olltrigger
