wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean up LottieForeground

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-12-03 14:59:52 -05:00
parent 4f2d8d996c
commit 252b2cafe8
Failed to extract signature
2 changed files with 23 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Lottie/Lottie.stories.svelte
View file

@ -83,7 +83,7 @@
</Story> </Story>
<Story name="With foregrounds"> <Story name="With foregrounds">
<Lottie src={ForegroundSample} autoplay }> <Lottie src={ForegroundSample} autoplay loop speed={1.5}>
<LottieForeground <LottieForeground
startFrame={0} startFrame={0}
endFrame={50} endFrame={50}
@ -114,7 +114,7 @@
<style lang="scss"> <style lang="scss">
:global { :global {
.scroller-lottie-foreground { .lottie-foreground-container {
header { header {
padding: 2rem; padding: 2rem;
background-color: black; background-color: black;

56
src/components/Lottie/LottieForeground.svelte
View file

@ -43,19 +43,16 @@
}); });
</script> </script>
<Block class={`scroller-lottie-foreground ${cls}`} {id}> <div class="lottie-foreground-container {cls}" {id}>
{#if componentState?.currentFrame && componentState.currentFrame >= startFrame && componentState.currentFrame <= endFrame} {#if componentState?.currentFrame && componentState.currentFrame >= startFrame && componentState.currentFrame <= endFrame}
<div <div
class="scroller-foreground" class="lottie-foreground"
in:fade={{ delay: 100, duration: 200 }} in:fade={{ delay: 100, duration: 200 }}
out:fade={{ delay: 0, duration: 100 }} out:fade={{ delay: 0, duration: 100 }}
> >
<!-- Text blurb foreground --> <!-- Text blurb foreground -->
{#if text} {#if text}
<Block <Block class="lottie-foreground-block {position.split(' ')[1]}" {width}>
class="scroller-lottie-foreground-text {position.split(' ')[1]}"
{width}
>
<div <div
style="background-color: {backgroundColour};" style="background-color: {backgroundColour};"
class="foreground-text {position.split(' ')[0]}" class="foreground-text {position.split(' ')[0]}"
@ -69,47 +66,34 @@
{/if} {/if}
</div> </div>
{/if} {/if}
</Block> </div>
<style lang="scss"> <style lang="scss">
@use './../../scss/mixins' as mixins; @use '../../scss/mixins' as mixins;
.scroller-foreground { .lottie-foreground-container {
width: 100%;
height: 100%;
}
:global(.scroller-lottie-foreground) {
position: absolute; position: absolute;
top: 50%; inset: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 2;
}
.scroller-lottie-foreground-item { .lottie-foreground {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; }
display: flex;
justify-content: center;
align-items: center;
} }
:global { :global {
.scroller-lottie-foreground-text { .lottie-foreground-block {
position: absolute; position: absolute;
width: 100%; width: 100%;
max-width: calc(mixins.$column-width-normal * 0.9); max-width: calc(mixins.$column-width-normal * 0.9);
height: 100%; height: 100%;
@media (max-width: 1200px) { &.center {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
@ -117,10 +101,12 @@
&.left { &.left {
left: 0; left: 0;
} }
&.right { &.right {
right: 0; right: 0;
} }
&.center {
@media (max-width: 1200px) {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
@ -128,28 +114,28 @@
.foreground-text { .foreground-text {
position: absolute; position: absolute;
top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%);
border-radius: 0.25rem;
background-color: white;
width: 100%; width: 100%;
border-radius: 0.25rem;
@include mixins.fpy-5; @include mixins.fpy-5;
@include mixins.fpx-4; @include mixins.fpx-4;
@include mixins.fm-0; @include mixins.fm-0;
:global(*) { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
&.center { &.center {
top: 50%; top: 50%;
transform: translate(-50%, -50%);
} }
&.top { &.top {
top: 0; top: 0;
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
} }
&.bottom { &.bottom {
top: 100%; top: 100%;
transform: translate(-50%, -150%); transform: translate(-50%, -150%);