@scottjohnson for the guy who loves sound boarding his buddies while D&D’ing, thought I’d share this 25% off 2-day sale if interested shop.tabletopy.com/b/e4swn
alın size gece yatarken beyninizi dinlendirecek şey. kulaklığı takın yatın. soldan yağmur ve gök gürültüsünü aktif etmek yeterli. huzurlu uyku için teşekkür edersiniz sonra :)
pluvior.com/index.html
CSS Tip! 📜
You could create a sticky popout bento effect with position: sticky and scroll-driven animation 🤩
The trick is to use position: sticky with bottom instead of top like we would usually 🤙
Then we can use scroll-driven animation as a progressive enhancement to fade things and move the phone around ✨
section { view-timeline-name: --section; }
.phone {
scale: 1.5;
translate: 30% 0;
animation-name: slip, slide; 👈 2 scroll animations
animation-timing-function: linear;
animation-fill-mode: both;
animation-range: 👈 2 ranges
entry 50% entry 60%,
exit 10% exit 25%;
animation-timeline: --section;
}
keyframes slip {
to { translate: -5% 0; scale: 1 }
}
keyframes slide {
to { translate: -5% 30%; }
}
If scroll-driven animations aren't supported, we still provide a neat effect using position: sticky alone 😎
The trick to that is having an absolutely positioned card that comes up from beneath the phone image and gives the illusion that they're joined. But, they aren't!
@CodePen link below! 👇
cc @im_aaron_
Apple secretly invented a new bento card effect back in 2021.
Thankfully, it is very much possible to create this in @Framer.
🔁 100 retweets and I'm rebuilding it in a YouTube tutorial.