This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Kevin Devine
Posted May 31 - Read on Facebook

Hi, working with Noah Levin's skillshare course and I'm struggling to expand on it. I'm trying to have an animation to take place when a certain artboard comes into view, similar to how foursquare animates their map icon when you swipe between results. Any tips please? My setup is based on Noah's so i'm looking for something to happen when 'artboardC' becomes active and for it to switch again when moving to 'artboardD'. tia


Krijn Rijshouwer

You already have most of it working so I do not fully understand what feedback you are looking for. Could you be a bit more specific? (I kind of feel like you are looking for a way to have specific animations for every artboard, right?)

Kevin Devine

Krijn Rijshouwer Thanks for feedback. I'm not sure if this is clear but I was trying to have the '1,2,3' highlight independently of the swipe left/right. So when a new artboard comes into view it would trigger the ainimation of the 'yellow icon'.

Anton Jarl

You could change the yellow icons position based on the page component. For example, when Page 2 is at X:0 (when page two is fully in view) you move the yellow icon to a new position. Is that enough or should I write some code?

Noah Levin

Hey there Kevin! Glad you've taken the Skillshare course and found it helpful! Great start to your prototype. There's lots of ways to add animation when the page changes, and you actually almost had it with your Pages.on "change:currentPage" event that you started. All you need to do is inside of that event, animate the states of the pins depending on which page you are on.

Here's a start: (click open in framer -- i added some notes in the comments). I didn't have the sketch file so couldn't access the blue pins, but hopefully this is enough to get you moving again!

Anton Jarl
Anton Jarl

I animated the yellow arrow, but maybe you just want the opacity to change, in that case just change: when sketch.artboardB then sketch.yellow1.states.switch("pos2") to reference the correct arrow and the correct state swtich.

Read the entire post on Facebook