Skip to main content
Glama
_slide.scss2.25 kB
@mixin transform { transform: translate3d(0, var(--y), 0); } @keyframes #{$rt-namespace}__slideInRight { from { transform: translate3d(110%, 0, 0); visibility: visible; } to { @include transform; } } @keyframes #{$rt-namespace}__slideInLeft { from { transform: translate3d(-110%, 0, 0); visibility: visible; } to { @include transform; } } @keyframes #{$rt-namespace}__slideInUp { from { transform: translate3d(0, 110%, 0); visibility: visible; } to { @include transform; } } @keyframes #{$rt-namespace}__slideInDown { from { transform: translate3d(0, -110%, 0); visibility: visible; } to { @include transform; } } @keyframes #{$rt-namespace}__slideOutRight { from { @include transform; } to { visibility: hidden; transform: translate3d(110%, var(--y), 0); } } @keyframes #{$rt-namespace}__slideOutLeft { from { @include transform; } to { visibility: hidden; transform: translate3d(-110%, var(--y), 0); } } @keyframes #{$rt-namespace}__slideOutDown { from { @include transform; } to { visibility: hidden; transform: translate3d(0, 500px, 0); } } @keyframes #{$rt-namespace}__slideOutUp { from { @include transform; } to { visibility: hidden; transform: translate3d(0, -500px, 0); } } @mixin timing { animation-timing-function: ease-in; animation-duration: 0.3s; } .#{$rt-namespace}__slide-enter { &--top-left, &--bottom-left { animation-name: #{$rt-namespace}__slideInLeft; } &--top-right, &--bottom-right { animation-name: #{$rt-namespace}__slideInRight; } &--top-center { animation-name: #{$rt-namespace}__slideInDown; } &--bottom-center { animation-name: #{$rt-namespace}__slideInUp; } } .#{$rt-namespace}__slide-exit { &--top-left, &--bottom-left { animation-name: #{$rt-namespace}__slideOutLeft; @include timing; } &--top-right, &--bottom-right { animation-name: #{$rt-namespace}__slideOutRight; @include timing; } &--top-center { animation-name: #{$rt-namespace}__slideOutUp; @include timing; } &--bottom-center { animation-name: #{$rt-namespace}__slideOutDown; @include timing; } }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/samihalawa/advanced-tts-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server