Making a Fish Swim on Scroll with GSAP! | Frontend Horse

Howdy there, partner! I hope you’re ready to ride because I’m really excited about where we’re headed today. We’re looking at an art piece brought to life through some GSAP and the scroll bar. Our featured artist, Michelle Barker, made something beautiful, and we get to learn exactly how she did it.

As always, I want to make you a prize-winning developer by showing you how others have created their fantastic frontend work.

Swimming On Scroll With GSAP

In the Deepest ocean, with a little fish swimming on it

In this great interactive piece, as you scroll down, the fish swims in swirls and loops across your screen, diving deeper as you get further along. As it swims, the lyrics to Radiohead’s song Weird Fishes fades in and out on cue.

There are a lot of little details to this piece that you have to experience for yourself.

The fish swims around the screen in a set path thanks to GSAP’s MotionPath plugin. Another GSAP plugin, ScrollTrigger, is responsible for animating all the different elements as you scroll the length of the page.

I love the way Michelle used these plugins, and those are the main techniques I want to dig into for this article. Plus, they’re both free-to-use GSAP plugins, with tons of potential, so I think you’ll get a lot out of this.

"Weird Fishes" with a skeleton fish swimming by

You’ll learn an easy way to move things along a path just by setting some XY coordinates. We also explore the different ways we can use ScrollTrigger, both with MotionPath as well as triggering other animations across the site.

Read on to learn how Michelle Barker got to swimming with Weird Fishes.

Until Next Time

Thanks for hitting the trail with us! It’s been a couple of weeks, but some really good things are in the works, including a rebrand and new website for Frontend Horse! I’m really excited to get that out to you in the coming weeks.

Special thanks to Michelle Barker for letting us explore her work. If you haven’t already, you should really hop over to CSS In Real Life, where Michelle does a wonderful job of writing about CSS. It’s one of my favorite frontend blogs.

Follow @FrontendHorse on Twitter, and if you enjoyed this, I’d be over the moon if you share it with a friend or tweet about it.

This is the part where we ride off into the sunset. You take care.

Your Neigh-bor,

Alex