Published on <a href="https://blog.prototypr.io/using-framer-to-experiment-with-spring-animation-curves-in-the-app-stores-today-view-9c7780f3256e?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>10 of 100</h4>
My goal is to create 100 prototypes of interactions from some of my favorite apps. I know my way around Framer a little bit, but there is always room for improvement. Using Framer to recreate existing apps should be an effective way to practice and refine my craft.
<h3>Nº 10— Spring Animation Curves for App Store’s Today View Item</h3>
<blockquote><a href="https://framer.cloud/tSrDD">https://framer.cloud/tSrDD</a></blockquote>
I’m working on a prototype of the App Store’s Today view. I really enjoy the transition that takes place when you tap into one of the cards. The animation is slick, and rather than trying to dial it in with all of the artwork of my full prototype, I decided to create a new, simplified prototype to work out the animation properties. So I guess that makes this a prototype of a prototype?
<h4>Design</h4>
The design part of this prototype was simple. Of course, my perfectionism wouldn’t allow me to stop at just using plain, old boxes. So I spiced things up a little with a fun watermelon motif. 🍉
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*63hZyCszlD7CcZhxdPiLjg.png">If I hadn’t already had the assets for the text, button, and app icon, I would have just left those areas blank.
One thing that you don’t see in the designs is everything that is being clipped. I first designed the end-state with the item expanded, then grouped everything with the “flesh” frame (you know, like watermelon flesh). I right-clicked on the “flesh” frame in the layers list and set it to clip its contents. Then I resized it, positioned it, rounded its corners, and gave it a drop shadow.
<h4>Code</h4>
The first thing I did in the code was to create a state for my main frame. The state simply uses the parameters of “flesh” before I did the resizing and all of that.
<pre>flesh.states.large = x: 0 y: 0 width: Screen.width height: Screen.height borderRadius: 0 shadow1: y: 0 blur: 0</pre>
Next came my interactions for diving into the item and for coming back out. The flesh.draggable stuff is something I’ll get to a little later.
<pre>header.onTap -&gt; flesh.animate("large") btnClose.animate opacity: 0.8 flesh.draggable.enabled = true flesh.draggable.horizontal = false</pre>
<pre>btnClose.onTap -&gt; flesh.animate("default") btnClose.animate opacity: 0 flesh.draggable.enabled = false</pre>
So, with my states and interactions in place, it was time to refine the animation properties. Framer allows you to set animation defaults for your project, which is something I always do. For this project, based on what I was seeing in the actual App Store transition I am trying to imitate, I went with a Spring curve.
<pre>Framer.Defaults.Animation = curve: Spring(damping: 0.66, mass: 1.1) time: 0.5</pre>
Spring curves in Framer have three options: damping, mass, and velocity. Think of damping as how much the “spring” is inhibited. If damping is really low, it will take longer for the animation to stop bouncing back and forth and come to rest.
<img alt="" src="https://cdn-images-1.medium.com/max/480/1*Sn-49M3oWX5OBHQ4yx8RVg.gif">This is how it looks when decreasing damping by 50% to 0.33. #bouncy
Now, I am certainly no expert on Spring animations or their parameters. So I tinkered with my settings for damping, mass, and velocity, and landed on what I felt seemed to most closely mimic the App Store. Learning about Spring animations is something that is on my to-do list.
I also wanted to add the functionality that is in the App Store that when the item is in article mode, dragging down closes it. And this is where the frustration started to kick in for this mini prototype. I couldn’t get it to work, and I’m not sure why. I would love it if someone has some insight as to why it’s not working.
After enabling dragging on the “flesh” frame, I set up a number of modulations to affect the its properties based on its y-position while being dragged:
<pre>flesh.onDrag -&gt; flesh.height = Utils.modulate(flesh.y, [0,133], [Screen.height, 470], true) flesh.width = Utils.modulate(flesh.y, [0,133], [Screen.width, 354], true) flesh.x = Utils.modulate(flesh.y, [0,133], [0, 30], true) flesh.shadow1.y = Utils.modulate(flesh.y, [0,133], [0, 16], true) flesh.shadow1.blur = Utils.modulate(flesh.y, [0,133], [0, 32], true) flesh.borderRadius = Utils.modulate(flesh.y, [0,133], [0, 14], true) btnClose.opacity = Utils.modulate(flesh.y, [0,133], [1,0], true)</pre>
That worked like a charm and I was feeling pretty good about my #FramerSkills. The last thing I needed to do was set up a conditional so that if the user stopped dragging at a certain point, the “flesh” frame would simply animate back to its default state.
<pre>flesh.onDragEnd -&gt; if flesh.y &gt; 80 flesh.animate(“default”) btnClose.animate opacity: 0 flesh.draggable.enabled = false</pre>
The result of those six lines of code? Nothing. So, using my rudimentary debugging knowledge, I added “print “This should close” within that conditional, and tried again. This time the message printed out, but still no animation. I kept working at it for 15–20 minutes, and grew more and more frustrated. So, yeah. Like I said, if you take a look at the code and can see what is wrong, please let me know.
<h4>Lesson Learned</h4>
Even basic prototypes can sometimes get a little complicated. For me, it can be helpful to open another Framer project and quickly prototype a micro-interaction by itself. Then, take what I learned and apply to my bigger prototype. Prototypes for prototyping… Who knew?
<h4>Go Check Out This Prototype</h4>
If you’d like to learn more (or squash my bugs), please download my prototype and poke around in the code a bit (the link is repeated below). But don’t judge me — prototyping isn’t about writing clean, elegant code. It’s about doing just enough to communicate the intended experience.
Spring Animation Curves for App Store’s Today View Item <a href="https://framer.cloud/tSrDD">https://framer.cloud/tSrDD</a>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9c7780f3256e" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-framer-to-experiment-with-spring-animation-curves-in-the-app-stores-today-view-9c7780f3256e">Using Framer to Experiment with Spring Animation Curves in the App Store’s Today View</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using Framer to Experiment with Spring Animation Curves in the App Store’s Today View

10 of 100

Top Stories