# Help with Animating Transformations

**URL:** <https://cl.desmos.com/t/help-with-animating-transformations/1721>\
**Category:** Questions\
**Created:** [October 19, 2020, 4:14pm UTC](https://cl.desmos.com/t/help-with-animating-transformations/1721 "2020-10-19T16:14:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nick.broadway](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/nick.broadway/32/5263_2.png) [@nick.broadway](https://cl.desmos.com/u/nick.broadway)\
**Post date:** [October 19, 2020, 4:14pm UTC](https://cl.desmos.com/t/help-with-animating-transformations/1721/1 "2020-10-19T16:14:34Z")

</div>

Hi! I am new to creating custom activities with CL. I love the Connecting the Dots activity that was recently released by Desmos, and want to modify one of the screens to perform other transformations.

Here is a link to the screen I copied from this activity:

[https://teacher.desmos.com/activitybuilder/custom/5f8db97a0211840b13b667ef](https://teacher.desmos.com/activitybuilder/custom/5f8db97a0211840b13b667ef)

Can someone explain to me what needs to be changed in CL or on the graph to show the check animation after students move the points as a translation, rotation, or dilation instead of the rotation? There seems to be a lot going on here, and I am not sure where to start. My goal is to utilize this same structure in an activity that requires each type of transformation.

Thank you for any help you can provide!

---

<div class="post-metadata">

**Author:** ![aknauft](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/aknauft/32/3701_2.png) [@aknauft](https://cl.desmos.com/u/aknauft)\
**Post date:** [October 19, 2020, 11:35pm UTC](https://cl.desmos.com/t/help-with-animating-transformations/1721/2 "2020-10-19T23:35:22Z")

</div>

Hi Nick,

Here’s a bit of commenting around the CL that should point you in the right direction. Note that this graph was built to only do a single transformation at a time, so depending on what you pass down for t\_{select}, some of these values won’t actually influence your graph.

```auto
# Choose transformation type:
# 1= Translation
# 2= Reflection across an axis
# 3= Rotation around origin
number("t_{select}"): 3

# Translation:
number("d_x"): 0 # Horizontal displacement
number("d_y"): 0 # Vertical displacement

# Reflection axis:
# 1= x-axis
# 2= y-axis
# 0= none
number("r_{axis}"): 0 #

# Rotation angle (in degrees, counterclockwise around the origin)
number("r_{angle}"): 180

```

---

<div class="post-metadata">

**Author:** ![nick.broadway](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/nick.broadway/32/5263_2.png) [@nick.broadway](https://cl.desmos.com/u/nick.broadway)\
**Post date:** [October 20, 2020, 3:27am UTC](https://cl.desmos.com/t/help-with-animating-transformations/1721/3 "2020-10-20T03:27:04Z")

</div>

Thanks so much. This is exactly what I needed! My students thank you!

---

<div class="post-metadata">

**Author:** ![nick.broadway](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/nick.broadway/32/5263_2.png) [@nick.broadway](https://cl.desmos.com/u/nick.broadway)\
**Post date:** [October 22, 2020, 3:38am UTC](https://cl.desmos.com/t/help-with-animating-transformations/1721/4 "2020-10-22T03:38:07Z")

</div>

@aknauft, I have made a lot of progress in developing activities for our Transformations unit thanks to your help. However, I am now stuck at the point of trying to perform a reflection over a line other than one of the axes.

In this screen, I would like to be able to press the “Draw It” button to reflect the triangle over the line x=2 instead of the y-axis. What do I need to change in order to make this happen?

`[https://teacher.desmos.com/activitybuilder/custom/5f90fdcb408be036ce973906](https://teacher.desmos.com/activitybuilder/custom/5f90fdcb408be036ce973906)`

Thanks for any help you can provide!

---

<div class="post-metadata">

**Author:** ![JayChow](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/jaychow/32/1674_2.png) [@JayChow](https://cl.desmos.com/u/JayChow)\
**Post date:** [October 22, 2020, 3:49am UTC](https://cl.desmos.com/t/help-with-animating-transformations/1721/5 "2020-10-22T03:49:43Z")

</div>

The graphs in here might help: [Graph Links - Transformation Helpers • Activity Builder by Desmos](https://teacher.desmos.com/activitybuilder/custom/5dcdb002198c5b0c380b5b6f?collections=5dccdca06dae6d0c91547cea)