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

What is Framer? Join the Community
Return to index
Artyom Avanesov
Posted Jun 04 - Read on Facebook

Hey all, I created a concept music player app using Framer Design. I was able to design the layout using Framer and used Sketch to create the icons.

I have two questions; 1) when adding an animation delay, the animation becomes sluggish. You notice it when you swipe through the songs. Without the delay the animation is smooth. Is there a way to fix this? 2) I've been trying to animate the currentCover transition using:

currentCover.animate
image: songScroll.currentPage.children[2].image

This doesn't seem to work. Any suggestions? Thanks.

7 Comments

Alexander Steinle

I like your playlist 🕺

George Liang

It might be happening because the event to delay > animate is firing multiple times as you scroll. A better way to do this might be to use states as in the pageComponent example in the docs.

Artyom Avanesov

George Liang thanks for the suggestion. I added states, but the result is the same. Probably because the states are also inside a for loop. The purpose of the loop is to target the songs in the array. Do you know a workaround?

Jonas Treub

You can prevent trying to start the same animation multiple times by checking if the layer is already animating. If not you can start the animation

Derek Hunten

you can also use utils.debounce if you think a loop is an issue

Artyom Avanesov

Thanks guys. Jonas Treub I got your solution to work when tapping a thumb cover. However, when you swipe through the playlist the state switch isn't triggered. Am I missing something?

Artyom Avanesov

Already found a solution. Thanks!

Read the entire post on Facebook