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

What is Framer? Join the Community
Return to index
Александр Всехвальнов
Posted Sep 14 - Read on Facebook

Hello Framers! I have a problem and me need someone who can help. I'm trying to create animation for loading screen and use 3 states for one of my objects.

The problem is that animation between states are not smooth. It start to switch to state 1, when delay, when switches to state 2 and delay again.

The same problem when trying to switch between animations (not states).

How I can design smooth animation between states with no delays.

2 Comments

Mike Johnson

Hard to tell without seeing any code, but it could be the easing on animations is causing it to appear to delay, but that is only because it is moving slow on the ease-out and/or ease-in.

Александр Всехвальнов

Hi Mike! Below you can see my code with states.

I'm trying switch state to next when current state is one of.

# Import file "popcorn-loader" (sizes and positions are scaled 1:2)
sketch = Framer.Importer.load("imported/popcorn-loader@2x")

Popcorn = sketch.Popcorn.children
arrPop = []

for pop in Popcorn
arrPop.push(pop)

Pop1Anim = new Animation
layer: arrPop[0]
properties:
x: 95
y: -100
opacity: 0
rotationZ: 360
time: 0.8

Pop2Anim = new Animation
layer: arrPop[0]
properties:
x: 100
y: -200
opacity: 0.3

Pop3Anim = new Animation
layer: arrPop[0]
properties:
x: 75
y: -100
opacity: 0

arrPop[0].states.add
up:
x: + 95
y: - 100
opacity: 1
rotationZ: 360
curve: "ease"
time: 0.1
middle:
x: arrPop[0].x + 105
y: arrPop[0].y - 105
opacity: 0.4
rotationZ: 360
time: 0.1
down:
x: arrPop[0].x + 200
y: + 5
opacity: 0
rotationZ: 720
time: 4

Read the entire post on Facebook