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

What is Framer? Join the Community
Return to index
Allison Shaw
Posted Jan 05 - Read on Facebook

Folks, this is killing me! All I want to do is make a "pulsing dots" loading animation, a la iOS "other person is typing" in Messages. I'm creating three dots with a for loop, and putting them into an array. But for the life of me, I can't figure out how to target these individual layers. My newbie approach was going to be to create three separate animations for each dot created... if anyone has a better method, I'd love to hear it!

1 Comments

Allison Shaw

This is the code, if you don't want to download the example:
# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info

Framer.Info =
title: ""
author: "Allison Shaw"
twitter: ""
description: ""

# variables for dot width/height
width = 8
height = 8

# Make an array
dotArray = []

# Make the dots
for i in [0 ... 3]
dot = new Layer
name: "dot"+i
width: width
height: height
borderRadius: 8
backgroundColor: "black"
y: 0
x: width * 1.5 * i
dotArray.push(dot)

# Create the scaling animation
scaling0 = new Animation
layer: dotArray[0]
properties:
opacity: 1
curve: "ease-in-out"

pulse = ->
scaling1.start()
scaling1.onAnimationEnd ->
#Reverse the scaling animation
scaling1 = scaling1.reverse()
#Start the animation again
pulse()

# Start of the pulse animation
pulse()

Read the entire post on Facebook