Lili Gabriel

Designer & Frontend Dev building with @Framer 👩‍🌾
I help brands turn ideas into beautifully designed, highly functional sites ✨
DM me to start a project! 📩

[Lili Gabriel @lilittledesign]

LANEIGE lip tint product highlight in @framer 🌸

Tried a scroll-triggered animation that reveals floating customer reviews as you scroll down. What do you think?
(Personal practice project)

[Lili Gabriel @lilittledesign]

@Ui_meesha These are so beautifuuuuul 🥹

[Lili Gabriel @lilittledesign]

@jeanxcrj so creativeeee 😍

[Lili Gabriel @lilittledesign]

@ilyakazakov awesomeeee 🔥

[Lili Gabriel @lilittledesign]

@heydamir love the design and the sound effect 🥹

[Lili Gabriel @lilittledesign]

@dezinbyrashi wowww so creativeee

[Lili Gabriel @lilittledesign]

@calebwu_ Cuteeeee😍

[Lili Gabriel @lilittledesign]

@darasoba Love this animation!! So smooooth

[Lili Gabriel @lilittledesign]

@_sameerrr0 Left!!

[Lili Gabriel @lilittledesign]

@omer_assa Coooool🔥🔥

[Lili Gabriel @lilittledesign]

@hayriyeakguller @framer Great work! Love the idea!!

[Lili Gabriel @lilittledesign]

@Matthias_Oel @framer Dial🥺 This is creative and beautifuuuul

[Lili Gabriel @lilittledesign]

@SolutionB2u Insaneee! This is so smoooooth and really creative!!🥹

[Lili Gabriel @lilittledesign]

Here’s a quick breakdown of how I set up this text scroll effect in @Framer 🛠️

Section setup:
Created a tall section (200vh) and named its scroll section "scroll" to give the animation enough room to play out.

Scroll Transform:
Added a Scroll Transform to the text layers, set to Section in View (triggered by "scroll" at the bottom of the viewport).

The From State:
Set Y-offset (~60px) + a rotation, with each text layer having a slightly larger Y value than the one before it so they scroll up smoothly.

Adding that subtle rotation on entry makes a huge difference compared to a simple straight translation!

[Lili Gabriel @lilittledesign]

tried recreating this text scroll animation in @Framer after seeing it on the Flying Papers site⚡️loved how their text rotates slightly while sliding up, so i tried replicating it in Framer!

left: my Framer test | right: original site

still working on getting the scroll physics to feel just as smooth as theirs, but pretty happy with the progress so far. simple breakdown coming tomorrow! 🛠️
#Framer #BuildInPublic

[Lili Gabriel @lilittledesign]

@developerBolu insaneee 🥹 love the idea, the design and the animation 😭

[Lili Gabriel @lilittledesign]

@dimagroshev Wowwww, love this idea!!

[Lili Gabriel @lilittledesign]

@sonia_axion Great work! I love the text animation here. Changing 'anyone' to dynamic text like creators, founders, investors, etc., really helps clarify what 'anyone' actually means and grabs the viewer's attention right away.

[Lili Gabriel @lilittledesign]

@bborakurtt Great ideaaa

[Lili Gabriel @lilittledesign]

@Guronnimo wowwww, i like the animation

[Lili Gabriel @lilittledesign]

@framer Flying Papers Website
https://t.co/O8N1D1DjjL

[Lili Gabriel @lilittledesign]

tried recreating this text scroll animation in @Framer after seeing it on the Flying Papers site⚡️loved how their text rotates slightly while sliding up, so i tried replicating it in Framer!

left: my Framer test | right: original site

still working on getting the scroll physics to feel just as smooth as theirs, but pretty happy with the progress so far. simple breakdown coming tomorrow! 🛠️
#Framer #BuildInPublic