1

Build a Dynamic Quiz Game in Framer Design

7:19FreeDone
2

Import JSON Data and Map to Design Layers

6:01FreeDone

Using Framer Text Layer Templates

4:17FreeDone
4

Framer Gradients and Animations

3:03FreeDone
5

Connect Events to the Button Array

6:10ProsDone
6

Complete the Answer Transition

4:56ProsDone
7

Using Sound in Framer

3:26ProsDone

Using Framer Text Layer Templates

Published by Chris Slowik

Episode Notes

Extra tips from the author

TextLayer Templating

Framer now has a powerful new ability to use template tags with text layers, enabling you to animate and work with specific parts of the text.

Template tags are wrapped in {}.

# Create text layer with template tag.
stepCounter = new TextLayer
  text: "{steps} steps/h"

# Set template tag value.
stepCounter.template =
  steps: 250

# When there's only one tag, you can eliminate the tag name.
stepCounter.template = 150
# Also results in "250 steps/h".


Usage with Design

You can also add template tags in the design tab. Simply wrap a piece of text in curly braces and you can replace it with the template API shown above.

Episode Topics: