Published on <a href="https://blog.prototypr.io/recreating-soundclouds-cool-scrolling-effects-with-framer-11b502e38e08?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>17 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.
<img alt="" src="https://cdn-images-1.medium.com/max/400/1*aJrMuV2VBy8a0l_mQ0yE2A.gif">
<h3>N° 17 — SoundCloud Profile Scrolling Behavior</h3>
<blockquote><a href="https://framer.cloud/HlaPF">https://framer.cloud/HlaPF</a></blockquote>
<h4>Design</h4>
I admit, SoundCloud isn’t one of my go-to apps. But I was using it the other day and noticed the nice, subtle parallax effect on the song thumbnails as I scrolled through an artist’s Profile. It seemed simple enough, so I wanted to try recreating the effect in Framer.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*uvXFWih9yFcZGSiQ4xHKGg.png">
My design consists of a single art board (or frame) that I’ve named “SoundCloudView.” Within it I’ve placed a navigation bar at the top and a toolbar at the bottom. I also have a frame for the main profile image and another frame for the content below the image. I had originally organized the profile image to be within the same frame as the content, but that didn’t work out the way I’d thought it would. I’ll talk about why it didn’t work below in the Code section.
As far as the visual design is concerned, since Framer had just released its update which brought us the ability to copy from Sketch and paste into Framer, I wanted to try that functionality out. So I illustrated my icons in Sketch. Pasting from Sketch worked beautifully for me, which is exciting because it means I can use whatever tool is best for the job to be done, and still be able to create robust prototypes in Framer.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YfcNZkF-HU-I4UHTgrskVg.png">Framer’s path tool for bezier curves is great—most of the time. For a small icon like this, forcing me to snap to half-pixels became a probelm. Luckily I was able to create the icon in Sketch, copy it, and paste the path directly back into Framer.
<h4>Code</h4>
There was a good deal of trial and error in this prototype, especially when it came to nailing that interaction of pulling down from the top of the scroll making the main profile image larger.
Here is the first thing I tried:
<pre>scroll.onScroll -&gt; if scroll.scrollY &lt; 0 imgProfile.height = Utils.modulate(scroll.scrollY, [0,10],[heroHeight, heroHeightIncrease]) imgProfile.y = Utils.modulate(scroll.scrollY, [0,-10], [0,-10])</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*XsvjzTrPJ5grEF8426dV9A.gif">That’s not quite right…
It seemed that I should probably take the profile image out of the scroll component, since it was being clipped at the top and I needed it to stick there. So I tried again:
<pre>scroll.onScroll -&gt; if scroll.scrollY &lt; 0 imgProfile.height = Utils.modulate(scroll.scrollY, [0,-100],[416, 516], true) imgProfile.y = Utils.modulate(scroll.scrollY, [0,255], [64,-320], true)</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*FlNIxgu0cV1s9pao_zyHEw.gif">Well, it sticks to the top now. But there’s still something I’m missing…
“Oh. Duh,” I say to myself. I was triggering all of this from an onScroll event. So the profile image didn’t go back to normal when I let go because I was no longer scrolling. Let’s try it using Events.Move:
<pre>scroll.on Events.Move, -&gt; if scroll.scrollY &lt; 0 imgProfile.height = Utils.modulate(scroll.scrollY, [0,-100],[416, 516], true) imgProfile.y = Utils.modulate(scroll.scrollY, [0,255], [64,-320], true)</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*zVIfGk56t3qPGG6NBnisww.gif">Eureka! Oh. Wait. Nevermind…
Now my profile image is growing and shrinking back to its original size, but it’s not scrolling out of view when it should. There’s probably something obvious I’m missing. Oh yeah. That little conditional statement means that nothing is happening if the scroll.scrollY is greater than zero, which means it is scrolling farther down on the page. Let’s get rid of my “if” statement:
<pre>scroll.on Events.Move, -&gt; imgProfile.height = Utils.modulate(scroll.scrollY, [0,-200],[416, 616], true) imgProfile.y = Utils.modulate(scroll.scrollY, [0,668], [88,-604], true)</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*3ZGqAVC-vfJe1WOYqWs0Dw.gif">Boom!
The only thing left now is to add the parallax effect to each of the song thumbnail images. Since it is also based on the scrollY position of the scroll, I just added some more code to my Events.Move function:
<pre> img1.y = Utils.modulate(scroll.scrollY, [0,Screen.height+88], [0, -70], true) img2.y = Utils.modulate(scroll.scrollY, [item2.height,Screen.height+88+item2.height], [0, -70], true) img3.y = Utils.modulate(scroll.scrollY, [item2.height*2,Screen.height+88+item2.height*2], [0, -70], true) img4.y = Utils.modulate(scroll.scrollY, [item2.height*3,Screen.height+88+item2.height*3], [0, -70], true) img5.y = Utils.modulate(scroll.scrollY, [item2.height*4,Screen.height+88+item2.height*4], [0, -70], true)</pre>
You can see that the parameters for the image items and their y-position is always consistent, moving between 0 and -70. The image objects are being clipped by their parent objects, which creates the parallax effect.
But the parameters of the scroll.scrollY position is a little different each time. That’s because each of the image objects needs to move when it’s on screen. Again, there was a good deal of trial and error tweaking going on to get it to feel just right. What I ended up with might not be perfect, but it gets the point across.
<img alt="" src="https://cdn-images-1.medium.com/max/400/1*aJrMuV2VBy8a0l_mQ0yE2A.gif">😎
<h4>Lesson Learned</h4>
One nice, little feature I used for this prototype that I haven’t used much in the past is Utils.loadWebFont(). It allowed me to find a free Google Web Font that resembled the font used in the SoundCloud app and load it into my prototype.
<pre>Utils.loadWebFont("Maven Pro")</pre>
Sometimes if you preview a loaded web font on your iPhone it might not always show up right. Two things to check: First, if you’re using various weights of that font, you need to load the weight individually. Here’s an example using Open Sans:
<pre>Utils.loadWebFont("Open Sans", 400) #Regular Utils.loadWebFont("Open Sans", 600) #Semibold Utils.loadWebFont("Open Sans", 700) #Bold</pre>
And second, if your text is just breaking in weird spots as shown below, my solution is to go back to the design and make those text fields fixed and increase the width by 10px.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LDHO2lsqiHXL_dtvtrgC3A.jpeg">
<h4>See for Yourself</h4>
Feel free to download the prototype and poke around in the code a bit (the link is repeated below). Just remember, prototyping isn’t about writing clean, elegant code. It’s about doing just enough to communicate the intended experience.
SoundCloud Profile Scrolling Behavior <a href="https://framer.cloud/HlaPF">https://framer.cloud/HlaPF</a>
Thanks for following me and my journey to 100 prototypes. I hope you enjoy my little experiments with Framer. If you have any ideas of something you’d like to see me prototype, you can reach out to me on Twitter @toddjreynolds.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&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=a19fcc184b9711e1b4764040d3dc5c07&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=11b502e38e08" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/recreating-soundclouds-cool-scrolling-effects-with-framer-11b502e38e08">Recreating SoundCloud’s Cool Scrolling Effects with Framer</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.

Recreating SoundCloud’s Cool Scrolling Effects with Framer

17 of 100

Top Stories