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

What is Framer? Join the Community
Return to index
Sean Thompson
Posted Aug 22 - Read on Facebook

Hey all,

For practice, I am trying to animate the chat bubbles in my UI in the following way:

1 I want all of the bubbles to start off hidden/below the video.

2 I want the bubbles to enter the screen one-by-one, by moving up and becoming fully opaque.

3 I want any bubble entering the screen to also push the bubbles already on the screen up and out of the way.

I am really new to Framer, but I thought I might be able to do this with an array of all the bubbles, a starting state for the bubbles that is hidden, and a loop that brings in each bubble with a delay.

I have not been able to figure out how to both bring in a new bubble and push an already visible bubble up.

Thanks for any help!

bubbleArray = [bubble_1, bubble_2, bubble_3, bubble_4, bubble_5, bubble_6]

init = ->
for bubble, i in bubbleArray
bubble.y += 456
bubble.opacity = .60

bubbleAnimation = ->
for bubble, i in bubbleArray
bubble.animate
y: bubble.y -= 456
opacity: 1
options:
delay: i*.5

init()
bubbleAnimation()

1 Comments

George Kedenburg III

ive done this a lot prototyping stuff for Facebook Live, the trick is to put them all in a scroll component. then you can add a new bubble after the last bubble and tell the scrollcomponent to scroll to the new layer you just added

Read the entire post on Facebook