Skip to content

Commit 7ca6cde

Browse files
ngnijlandngnijland
committed
feat: add animations
1 parent ba31516 commit 7ca6cde

14 files changed

+76
-42
lines changed

‎docs/src/components/AppStore.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import appStoreFeatured from "../assets/app-store-featured.jpg";
3333
}
3434
</style>
3535

36-
<section class="grid section" aria-label="App Store badges">
36+
<section class="grid section" aria-label="App Store badges" data-aos="fade-in">
3737
<Image
3838
src={appStoreReview}
3939
alt='"4.7 Rating" badge from the Apple App Store, with five gold stars. The badge is black with white text and a white Apple logo, surrounded by a laurel wreath. Text at the bottom reads "App Store Reviews."'

‎docs/src/components/Feature.astro‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,10 @@ if (asset.alignment === "full-width") {
115115
}
116116
</style>
117117

118-
<article class="grid">
118+
<article
119+
class="grid"
120+
data-aos={asset.alignment === "full-width" ? undefined : "fade-up"}
121+
>
119122
<div
120123
class="feature-content"
121124
style={{
@@ -124,6 +127,11 @@ if (asset.alignment === "full-width") {
124127
? "2 / -2"
125128
: `${asset.alignment === "left" ? `span ${12 - asset.columnSpan}` : 1} / ${asset.alignment === "left" ? -1 : `span ${12 - asset.columnSpan}`}`,
126129
}}
130+
data-aos={asset.alignment === "full-width"
131+
? "fade-in"
132+
: asset.alignment === "left"
133+
? "fade-left"
134+
: "fade-right"}
127135
>
128136
<h3
129137
class:list={[
@@ -159,6 +167,7 @@ if (asset.alignment === "full-width") {
159167
? "1 / -1"
160168
: `${asset.alignment === "left" ? 1 : `span ${asset.columnSpan}`} / ${asset.alignment === "left" ? `span ${asset.columnSpan}` : -1}`,
161169
}}
170+
data-aos={asset.alignment === "full-width" ? "fade-up" : undefined}
162171
>
163172
{
164173
asset.type === "image" ? (
@@ -181,6 +190,14 @@ if (asset.alignment === "full-width") {
181190
/>
182191
)
183192
}
184-
{parsedCaption ? <figcaption set:html={parsedCaption} /> : null}
193+
{
194+
parsedCaption ? (
195+
<figcaption
196+
set:html={parsedCaption}
197+
data-aos="fade-up"
198+
data-aos-delay="1000"
199+
/>
200+
) : null
201+
}
185202
</figure>
186203
</article>

‎docs/src/components/Insights.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import featureImage from "../assets/features/build-insights.png";
2626
</style>
2727

2828
<section>
29-
<div class="header-wrapper">
29+
<div class="header-wrapper" data-aos="fade-in">
3030
<SectionHeader
3131
title="RocketSim Insights"
3232
subtitle="Increase the productivity of your whole team"

‎docs/src/components/InsightsActionable.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ import gaugeAlertIcon from "../assets/gauge-alert.svg";
7373
</style>
7474

7575
<section>
76-
<div class="header-wrapper">
76+
<div class="header-wrapper" data-aos="fade-in">
7777
<SectionHeader
7878
title="Actionable Insights"
7979
subtitle="Take action based on data"
@@ -82,7 +82,7 @@ import gaugeAlertIcon from "../assets/gauge-alert.svg";
8282
<div class="grid">
8383
<ul>
8484
<li>
85-
<article>
85+
<article data-aos="fade-left" data-aos-delay="300">
8686
<Image src={gaugeIcon} alt="Speedometer icon" height="20" />
8787
<p>
8888
Save up to 2 hours per month by upgrading Jordi & Hidde's machine to
@@ -91,7 +91,7 @@ import gaugeAlertIcon from "../assets/gauge-alert.svg";
9191
</article>
9292
</li>
9393
<li>
94-
<article>
94+
<article data-aos="fade-left" data-aos-delay="600">
9595
<Image
9696
src={gaugeAlertIcon}
9797
alt="Speedometer icon with exclamation mark"
@@ -104,7 +104,7 @@ import gaugeAlertIcon from "../assets/gauge-alert.svg";
104104
</article>
105105
</li>
106106
<li>
107-
<article>
107+
<article data-aos="fade-left" data-aos-delay="900">
108108
<Image src={gaugeIcon} alt="Speedometer icon" height="20" />
109109
<p>
110110
Xcode 16.0 seems to improve build times by 10%. Consider upgrading

‎docs/src/components/InsightsBreakdown.astro‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,11 @@ const { title, chart, contentTitle } = Astro.props;
119119
</style>
120120

121121
<section>
122-
<SectionHeader title={title} />
122+
<div data-aos="fade-up">
123+
<SectionHeader title={title} />
124+
</div>
123125
<div class="grid content-wrapper">
124-
<figure aria-label="Build Duration by Machine">
126+
<figure aria-label="Build Duration by Machine" data-aos="fade-right">
125127
<figcaption>{chart.title}</figcaption>
126128
<dl>
127129
{
@@ -142,7 +144,7 @@ const { title, chart, contentTitle } = Astro.props;
142144
}
143145
</dl>
144146
</figure>
145-
<div class="description-wrapper">
147+
<div class="description-wrapper" data-aos="fade-left">
146148
<h3 class="title">{contentTitle}</h3>
147149
<slot />
148150
</div>

‎docs/src/components/Pricing.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ import SectionHeader from "./SectionHeader.astro";
3333
</style>
3434

3535
<section id="get-team-license">
36-
<div class="header-wrapper">
36+
<div class="header-wrapper" data-aos="fade-in">
3737
<SectionHeader
3838
title="Ready to get started?"
3939
subtitle="Get your licenses now"
4040
/>
4141
</div>
42-
<div class="pricing-table-wrapper">
42+
<div class="pricing-table-wrapper" data-aos="fade-up">
4343
<script is:inline async src="https://js.stripe.com/v3/pricing-table.js"
4444
></script>
4545
<stripe-pricing-table

‎docs/src/components/Reviews.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ import joshImage from "../assets/josh.jpeg";
8080
<section aria-label="Reviews from users">
8181
<ul class="grid">
8282
<li>
83-
<figure>
83+
<figure data-aos="fade-up">
8484
<blockquote>
8585
<p>
8686
"I use <strong>RocketSim</strong> a lot to create recordings for my articles.
@@ -104,7 +104,7 @@ import joshImage from "../assets/josh.jpeg";
104104
</figure>
105105
</li>
106106
<li>
107-
<figure>
107+
<figure data-aos="fade-up" data-aos-delay="750">
108108
<blockquote>
109109
<p>
110110
"<strong>RocketSim</strong> helps me to create localized preview videos
@@ -121,7 +121,7 @@ import joshImage from "../assets/josh.jpeg";
121121
</figure>
122122
</li>
123123
<li>
124-
<figure>
124+
<figure data-aos="fade-up" data-aos-delay="1500">
125125
<blockquote>
126126
<p>
127127
"Recordings with touches and high-quality GIFs from <strong

‎docs/src/components/SocialMediaMentions.astro‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ import SectionHeader from "./SectionHeader.astro";
99
</style>
1010

1111
<section>
12-
<SectionHeader
13-
title="Join Thousands Of Productive Developers"
14-
subtitle="See what others say about RocketSim on Social media"
15-
smallTitle
16-
/>
12+
<div data-aos="fade-in">
13+
<SectionHeader
14+
title="Join Thousands Of Productive Developers"
15+
subtitle="See what others say about RocketSim on Social media"
16+
smallTitle
17+
/>
18+
</div>
1719
<div class="grid mentions">
1820
<div
1921
class="senja-embed"

‎docs/src/components/StatusBar.astro‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,14 @@ import statusbarMenuImage from "../assets/statusbar-menu.png";
6262
</style>
6363

6464
<section>
65-
<SectionHeader
66-
title="Everything you need, right from the statusbar"
67-
text="RocketSim keeps things simple. Access all actions right from the statusbar, without any disturbing windows."
68-
/>
65+
<div data-aos="fade-in">
66+
<SectionHeader
67+
title="Everything you need, right from the statusbar"
68+
text="RocketSim keeps things simple. Access all actions right from the statusbar, without any disturbing windows."
69+
/>
70+
</div>
6971
<article class="grid">
70-
<div class="column">
72+
<div class="column" data-aos="fade-left">
7173
<div class="feature">
7274
<h4>Trigger deeplinks</h4>
7375
<p>
@@ -83,14 +85,14 @@ import statusbarMenuImage from "../assets/statusbar-menu.png";
8385
</p>
8486
</div>
8587
</div>
86-
<div class="column">
88+
<div class="column" data-aos="fade-up">
8789
<Image
8890
class="image"
8991
src={statusbarMenuImage}
9092
alt="RocketSim opened from the MacOS menu bar. It shows a dropdown with navigation towards: deeplinks, screen recordings, screen captures, recent builds, deleting derived data, permissions, sandbox user data and more."
9193
/>
9294
</div>
93-
<div class="column column--right">
95+
<div class="column column--right" data-aos="fade-right">
9496
<div class="feature">
9597
<h4>Capture recordings & screenshots</h4>
9698
<p>Create MP4 and GIF recordings or capture a screenshot.</p>

‎docs/src/components/SubscribeToNewsletter.astro‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,15 @@ import SectionHeader from "./SectionHeader.astro";
2626
</style>
2727

2828
<section>
29-
<SectionHeader
30-
title="Exclusive Perks for Subscribers"
31-
subtitle="Enjoy 30% off RocketSim Pro"
32-
smallTitle
33-
text="And be the first to discover new features & time-saving tricks."
34-
/>
35-
<div class="grid form-wrapper">
29+
<div data-aos="fade-in">
30+
<SectionHeader
31+
title="Exclusive Perks for Subscribers"
32+
subtitle="Enjoy 30% off RocketSim Pro"
33+
smallTitle
34+
text="And be the first to discover new features & time-saving tricks."
35+
/>
36+
</div>
37+
<div class="grid form-wrapper" data-aos="fade-up">
3638
<div class="form">
3739
<script
3840
is:inline

0 commit comments

Comments
 (0)