30 Days of Framer X: Week Two
source link: https://www.tuicool.com/articles/hit/aIvEZzq
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
30 Days of Framer X : Week Two
Day 08 : Card Flip Animation
Day 05 was a pretty monumental day for me, as I had had no knowledge of rotate3d() before then. On this day, I decided to see if I could make an awesome micro-interaction out of it.
The whole component was created solely with HTML and CSS. The tricky part was getting the information on the back side of the card to show up right side up after the card had been flipped. Because the information is mapped to the card component, it is flipped over 180 degrees by default.
Day 09 : Slider UI
On this day, I wanted to take something from the store and see if I could use that code and sync it with the UI.
Although Benjamin den Boer’s Slider component is way cool, it does not do more than just animate the slider itself.
I looked over the code (You can find the code of store components in node_modules > @ framer), and found out I could add an ID to the knob element, so I could access it in my App.tsx file.
After that, I went to App.tsx and had the browser get the position of the knob element after the use had finished moving it around. Based on the position, the app would calculate how much value to show as the age.
Day 10 : Favorites Part I
This was one of my more unsuccessful prototypes. One of the things I’m finding hard to do in Framer X is creating draggable elements.
I found one of the store components using a <Draggable> element from the Framer library (the <Draggable> element has not been documented yet), and decided to see if I could create a simple, swipe to delete interaction out of it.
I got as far as getting the position of the element once it had been moved around, but didn’t really figure out how to ‘delete’ it once it got past a certain point. After 3AM, I decided to let it go and come back to it another day.
Day 11 : Tab Menu Interaction
It’s only been a month since Framer X has been released, so examples are scarce and I’ve been having to pioneer through everything until now.
You can imagine my excitement when Jay Stakelon opened up a YouTube channel on how to create things with Framer X!
I took a leaf out of his book on this day, and recreated the Instagram search UI. It was helpful to know I could access the children elements with props and loop through them, instead of having to write the same override for each one; which is how I’ve been doing things up till now.
Day 12 : Card Scroll on Tap
For this interaction, I decided to take what I learned from yesterday and see if I could use it to create something original.
Essentially, it is built in the same way that Day 11 is; it takes all of the cards, determines which card should currently be ‘active’ based on how many times the user has tapped left or right, and animates it so the scale becomes bigger and the opacity turns to 1. “props.children” and “props.id” reduced the amount of redundant code I would need to write otherwise. It really saved the day! Yay!
Day 13 : Calendar Animation
This was the day Framer announced the pages component ! Although it was initially created for easier creation of swipable pages, I’ve found that they can come in handy for creating sheet layers as well.
Just create a page component, and link it to two frames: one transparent frame, and the actual sheet layer. Since the transparent frame is, well, transparent, it will feel push the second component down without your users realizing, then pull it up when they swipe. I know it probably sounds a bit vague in words; check out the .framerx file to see exactly how it’s built.
Day 14 : Parallax Scrolling within Cards
Here’s something fun you can do without writing a single line of code.
For this prototype, I linked the page component to multiple parallax components, so that the image would scroll with a bit of a delay when the user swiped. It’s a not-so-apparent, yet fancy feature that some apps use to create an extra dynamic to the interface.
The tricky part here was figuring out how to nest the page, parallax scroll component, and parallax component. Make sure you put the parallax scroll component within each page, instead of putting it on top of the page component itself.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK