Frontend Horse #3 - iPads, Turntables, Cards and lots of GSAP!
Tags: css, javascript, webdev, html
Published: 2020-06-17 11:06:12

_This is an issue from the newsletter Frontend Horse. This was originally published on June 11th, 2020. Visit [Frontend.Horse](https://frontend.horse) to subscribe and find more issues._

---

Hey, there! I hope your week is going great, and welcome to our third issue!

While this week is a return to form, racial equality isn’t a trend. There’s still so much to do, and it’s going to take a long time. I encourage you to sign up for **monthly donations** to an organization like Black Lives Matter.

**I’m still looking to match $400 to a related charity**. Reply to this email with your receipts.

Here’s our weekly _round-up_ of awesome things. I learned a lot this week, and I’m excited to share what we’ve got. Let’s ride!

---

### CODEPEN
## One Div iPad Pro
First up is this awesome one div iPad Pro from [Annie Liew](https://www.twitter.com/anniebombanie_). Photorealistic CSS pictures are awesome, and it’s like playing in Hard Mode when it’s done in a single div.
{% codepen https://codepen.io/anniebombanie/pen/pojmNzN %}

#### The Technique
There’s a few techniques to pick up here. The drawing is done by chaining `radial-gradient` and `linear-gradient` functions on the `background` property. You could use this trick to add some details to a button or header without adding more DOM elements.

Important to note: Annie uses both the `::before` and `::after` psuedoelements on that div. With that she gains two more elements to work with.

Annie says that the order of the gradient layers makes a big difference. "Having an understanding of how gradients work with transparency is very important."

Annie said the two resources that helped her the most were a [CSSDays talk](https://lynnandtonic.com/thoughts/entries/talk-illustration-with-css/), and a [blog post](https://hacks.mozilla.org/2014/09/single-div-drawings-with-css/), both by the excellent [Lynn Fisher](https://twitter.com/lynnandtonic).

Lastly, the whole piece is responsive because everything is done with the [vmin unit](http://thenewcode.com/1137/MinMaxing-Understanding-vMin-and-vMax-in-CSS). This unit is based on the viewport’s smallest side.

Start small and take some of these techniques for a ride!

[Check It Out ->](https://codepen.io/anniebombanie/full/pojmNzN)

---

### CODEPEN
## Superstar DJ
This week GreenSock announced their amazing new [ScrollTrigger](https://greensock.com/scrolltrigger) plugin that integrates with GSAP. There are [a bunch of awesome demos  made with it](https://codepen.io/collection/DkvGzg), and I especially love [this record player](https://codepen.io/jh3y/full/jOWNaZw) by [Jhey Tompkins](https://twitter.com/jh3yy) . It uses your scroll to move the record back and forth, like a DJ scratching!

{% codepen https://codepen.io/jh3y/pen/jOWNaZw %}

#### The Technique
Jhey is using GSAP to rotate the record at a set speed. Then he needs to detect the velocity of the user’s scroll. ScrollTrigger provides a built in `getVelocity()` function. Using that value, he’s able to change the speed. So if a user scrolls up quickly, the record goes backwards quickly.

It even works on mobile, letting you swipe up and down to DJ. Super cool!

Jhey says he’s adding a couple Easter eggs to this pen in the coming days, so _circle back_!

[Check It Out ->](https://codepen.io/jh3y/full/jOWNaZw)

---

### CODEPEN
## User Interaction Card
I love [this card interaction demo](https://codepen.io/shahidshaikhs/full/mdVJjgv) by [Shahid Shaikh](https://twitter.com/__shahidshaikh). My favorite part is the way the button at the bottom animates to become a bottom bar. It’s so smooth that I thought he was manipulating SVG elements to get the effect.

{% codepen https://codepen.io/shahidshaikhs/pen/mdVJjgv %}

#### The Technique
Turns out it’s a regular button with a border-radius. When clicked, it expands , moves, and loses the border radius at the same time. It’s so seamless!

Shahid used GSAP to animate, and said he made this to learn more about controlling timelines. He used the [official docs](https://www.greensock.com/get-started/) and included videos to learn.

This card has animations we’re used to seeing in mobile apps, but I’d love to see more of this quality across the web, too!

[Check It Out ->](https://codepen.io/shahidshaikhs/full/mdVJjgv)

---

### TUTORIAL
## Background Image Grid Motion Effect
[This is a great tutorial](https://tympanus.net/codrops/2020/06/10/how-to-create-a-motion-hover-effect-for-a-background-image-grid/) for making a grid of images that move with the user’s mouse. [Mary Lou](http://twitter.com/crnacura) walks us through this great technique that you’ve probably seen on several sites by now.
![A grid of images](https://dev-to-uploads.s3.amazonaws.com/i/ns7sihj18h49k8drchqq.png)

 Like all Codrops tutorials, it’s a professional-grade effect, complete with [Demos](https://tympanus.net/Tutorials/ImageGridMotionEffect/) and [source files on GitHub](https://github.com/codrops/ImageGridMotionEffect). One thing the tutorial doesn’t mention is you’ll definitely need the source files. Especially this [utils.js](https://github.com/codrops/ImageGridMotionEffect/blob/master/src/js/utils.js) file.

There’s some nice, reusable functions in there, the key one being [get mouse position](https://github.com/codrops/ImageGridMotionEffect/blob/master/src/js/utils.js#L16-L30). With that value and [a little math](https://github.com/codrops/ImageGridMotionEffect/blob/master/src/js/utils.js#L4), you get new `x` and `y` position for the grid. Transition between positions with GSAP and you’re set!

The technique of offsetting things based on mouse position can be taken even further, as their [inspiration examples show](https://gfycat.com/weightywetfunnelweaverspider). I’d love to see how you take this technique and run with it.

[Check It Out ->](https://tympanus.net/codrops/2020/06/10/how-to-create-a-motion-hover-effect-for-a-background-image-grid/)

---

### HORSE RESOURCE
## Live-Code Streaming
I’ve been watching live-coding streamers the past couple months and have learned _so much_! Getting to watch someone work and explain their thought process is invaluable. I ask lots of questions and have found these streamers more than happy to help. I highly recommend stopping by even for a few minutes when you see someone go live.

Here are some of the excellent streamers I’ve dropped in on in the last couple months.

* [BlackTechDiva (Monica Powell)](https://www.twitch.tv/blacktechdiva)
* [Jhey Tompkins](https://www.twitch.tv/jh3yy)
* [maxcellw (Prince Wilson)](https://www.twitch.tv/maxcellw)
* [Noopkat (Suz Hinton)](https://www.twitch.tv/noopkat)
* [Learn with Jason (Jason Lengstorf)](https://www.twitch.tv/jlengstorf)
* [xDesro (Henry Desroches)](https://www.twitch.tv/xdesro)
* [Dometrius Clark](https://www.twitch.tv/domitriusclark)
* [Brawrdon (Brandon Okeke)](https://www.twitch.tv/brawrdon)
* [RyanWarnerCodes (Ryan Warner)](https://www.twitch.tv/ryanwarnercodes)

---

## In Horse News
I’m very new to the horse world, but I’m thrilled that non-digital equestrians are [Breaking The Silence Surrounding White Privilege.](https://www.chronofhorse.com/article/breaking-the-silence-surrounding-white-privilege-in-the-horse-world).

---

## So Long, Partner
That’s the end of the trail for this week. Thanks for riding with me.

Follow @FrontendHorse on [Twitter](https://twitter.com/frontendhorse) and if you enjoyed this, I’d be thrilled if you share it with a friend or tweet about it.

Special thanks to Annie Liew, Shahid Shaikh, and Jhey Tompkins for speaking with me about their work.

_Your Neigh-bor,_
_Alex_


---

If you liked this post, head to [Frontend.Horse](https://www.frontend.horse) to subscribe! You'll get the next issue before it's posted here on Dev.