diff --git a/issue-repro/src/main/java/com/airbnb/lottie/issues/IssueReproActivity.kt b/issue-repro/src/main/java/com/airbnb/lottie/issues/IssueReproActivity.kt
index 80f04ca..ce93001 100755
--- a/issue-repro/src/main/java/com/airbnb/lottie/issues/IssueReproActivity.kt
+++ b/issue-repro/src/main/java/com/airbnb/lottie/issues/IssueReproActivity.kt
@@ -1,6 +1,7 @@
 package com.airbnb.lottie.issues
 
 import android.os.Bundle
+import android.util.Log
 import androidx.activity.compose.setContent
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.background
diff --git a/issue-repro/src/main/res/raw/anim.json b/issue-repro/src/main/res/raw/anim.json
index 5cecbc8..b7691a7 100644
--- a/issue-repro/src/main/res/raw/anim.json
+++ b/issue-repro/src/main/res/raw/anim.json
@@ -1 +1 @@
-{"v":"5.7.4","fr":60,"ip":0,"op":300,"w":400,"h":400,"nm":"Matte","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[150,150],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[75,75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
+{"v":"5.7.4","fr":60,"ip":0,"op":300,"w":400,"h":400,"nm":"Matte","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[150,150],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[75,75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[150,150],"ix":2},"p":{"a":0,"k":[50,50],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[75,75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/renderer/ComposeLottieTransform.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/renderer/ComposeLottieTransform.kt
index 1dcafdb..4ab4337 100644
--- a/lottie-compose/src/main/java/com/airbnb/lottie/compose/renderer/ComposeLottieTransform.kt
+++ b/lottie-compose/src/main/java/com/airbnb/lottie/compose/renderer/ComposeLottieTransform.kt
@@ -11,21 +11,22 @@
 import kotlin.properties.Delegates
 
 @Composable
-fun rememberTransform(layer: Layer): ComposeLottieTransform {
+fun rememberTransform(layer: Layer, progress: Float): ComposeLottieTransform {
     val animatableTransform = remember(layer) { layer.transform }
-    return rememberTransform(animatableTransform)
+    return rememberTransform(animatableTransform, progress)
 }
 
 @Composable
-fun rememberTransform(shapeGroup: ShapeGroup): ComposeLottieTransform {
+fun rememberTransform(shapeGroup: ShapeGroup, progress: Float): ComposeLottieTransform {
     val animatableTransform = remember(shapeGroup) { shapeGroup.items.lastOrNull() as? AnimatableTransform }
-    return rememberTransform(animatableTransform)
+    return rememberTransform(animatableTransform, progress)
 }
 
 @Composable
-fun rememberTransform(transform: AnimatableTransform?): ComposeLottieTransform {
+fun rememberTransform(transform: AnimatableTransform?, progress: Float): ComposeLottieTransform {
+    // TODO: look into optimizations here.
     val composeTransform = remember(transform) { ComposeLottieTransform(transform) }
-    composeTransform.progress = LocalLottieProgress.current
+    composeTransform.progress = progress
     return composeTransform
 }
 
diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/renderer/LottieComposeRenderer.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/renderer/LottieComposeRenderer.kt
index 58b0222..6820d14 100644
--- a/lottie-compose/src/main/java/com/airbnb/lottie/compose/renderer/LottieComposeRenderer.kt
+++ b/lottie-compose/src/main/java/com/airbnb/lottie/compose/renderer/LottieComposeRenderer.kt
@@ -2,16 +2,15 @@
 
 import android.graphics.PointF
 import android.util.Log
-import androidx.compose.animation.animate
-import androidx.compose.animation.core.DurationBasedAnimationSpec
-import androidx.compose.animation.core.RepeatMode
-import androidx.compose.animation.core.TweenSpec
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.foundation.Image
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.geometry.Rect
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.*
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.graphics.vector.*
 import androidx.compose.ui.unit.dp
 import com.airbnb.lottie.LottieComposition
@@ -21,10 +20,9 @@
 import com.airbnb.lottie.model.layer.Layer
 import com.airbnb.lottie.value.Keyframe
 import java.util.concurrent.TimeUnit
+import kotlin.math.ceil
 import kotlin.math.floor
 
-val LocalLottieProgress = compositionLocalOf { 0f }
-
 @Composable
 fun ComposeLottieAnimation(
     compositionResult: LottieCompositionResult,
@@ -60,33 +58,65 @@
         }
     }
 
-    Providers(
-        LocalLottieProgress provides state.progress
-    ) {
+    Box(modifier = Modifier.then(modifier)) {
+        var matteLayer: Layer? = null
         composition.layers.forEach { layer ->
             when (layer.layerType) {
-                Layer.LayerType.SHAPE -> Image(
-                    shapeLayerPainter(composition, layer),
-                    contentDescription = null,
-                    modifier = modifier,
-                )
+                Layer.LayerType.SHAPE -> {
+                    if (layer.matteType != Layer.MatteType.NONE) {
+                        matteLayer = layer
+                    } else {
+                        ShapeLayer(composition, layer, matteLayer, state.progress)
+                    }
+                }
                 else -> Unit
             }
+            matteLayer = null
+        }
+    }
+}
+
+@Composable
+fun ShapeLayer(composition: LottieComposition, layer: Layer, matteLayer: Layer?, progress: Float) {
+    val layerPainter = shapeLayerPainter(composition, layer, progress)
+    val matteLayerPainter = if (matteLayer == null) null else shapeLayerPainter(composition, layer, progress)
+    Canvas(
+        modifier = Modifier
+    ) {
+        with(layerPainter) {
+            // TODO: cache this Size class.
+            draw(Size(composition.bounds.width().toFloat(), composition.bounds.height().toFloat()))
+        }
+        if (matteLayerPainter != null) {
+            drawIntoCanvas { canvas ->
+                // TODO: only save the right bounds.
+                val mattePaint = Paint()
+                mattePaint.blendMode = BlendMode.DstOut
+                canvas.withSaveLayer(
+                    Rect(0f, 0f, composition.bounds.width().toFloat(), composition.bounds.height().toFloat()),
+                    mattePaint,
+                ) {
+                    with(matteLayerPainter) {
+                        // TODO: cache this Size class.
+                        draw(Size(composition.bounds.width().toFloat(), composition.bounds.height().toFloat()))
+                    }
+                }
+            }
         }
     }
 }
 
 @Composable
-fun shapeLayerPainter(composition: LottieComposition, layer: Layer): VectorPainter {
-    val transform = rememberTransform(layer)
+fun shapeLayerPainter(composition: LottieComposition, layer: Layer, progress: Float): VectorPainter {
+    val transform = rememberTransform(layer, progress)
     return rememberVectorPainter(
         defaultWidth = composition.bounds.width().dp,
         defaultHeight = composition.bounds.height().dp,
         viewportWidth = composition.bounds.width().toFloat(),
         viewportHeight = composition.bounds.height().toFloat(),
     ) { viewportWidth, viewportHeight ->
-        val clipPathData = getMaskPathData(layer.masks)
-        Log.d("Gabe", "clipPathData hash ${clipPathData.hashCode()} identity ${System.identityHashCode(clipPathData)}")
+        val clipPathData = getMaskPathData(layer.masks, progress)
+
         Group(
             name = layer.layerName,
             translationX = transform.position.x,
@@ -97,8 +127,7 @@
         ) {
             layer.shapes.forEach { shapeModel ->
                 when (shapeModel) {
-                    is ShapeGroup -> ComposeShapeGroup(shapeModel)
-                    else -> Log.d("Gabe", "Don't know how to draw ${shapeModel::class.simpleName}")
+                    is ShapeGroup -> ComposeShapeGroup(shapeModel, progress)
                 }
             }
         }
@@ -106,10 +135,10 @@
 }
 
 @Composable
-fun ComposeShapeGroup(shapeGroup: ShapeGroup) {
+fun ComposeShapeGroup(shapeGroup: ShapeGroup, progress: Float) {
     if (shapeGroup.isHidden || shapeGroup.items.isEmpty()) return
-    val transform = rememberTransform(shapeGroup)
-    val pathData = remember { mutableListOf<PathNode>() }
+    val transform = rememberTransform(shapeGroup, progress)
+    val pathData = remember { mutableStateListOf<PathNode>() }
     Group(
         name = shapeGroup.name,
         translationX = transform.position.x,
@@ -117,18 +146,10 @@
     ) {
         // Reuse the list and clear it so that the backing array doesn't need to be recreated.
         pathData.clear()
-        pathData += PathData {
-            moveTo(380f, 0f)
-            lineTo(400f, 0f)
-            lineTo(400f, 20f)
-            lineTo(380f, 20f)
-            lineTo(380f, 0f)
-            close()
-        }
         for (model in shapeGroup.items) {
             when (model) {
                 is RectangleShape -> {
-                    pathData += rectanglePathData(model)
+                    pathData += rectanglePathData(model, progress)
                 }
                 is ShapeFill -> {
                     ComposeShapeFill(model, pathData)
@@ -139,9 +160,9 @@
 }
 
 @Composable
-fun rectanglePathData(shape: RectangleShape): List<PathNode> {
+fun rectanglePathData(shape: RectangleShape, progress: Float): List<PathNode> {
     val size = remember { PointF() }
-    val (sizeKeyframe, interpolatedProgress) = shape.size.keyframes.rememberKeyframeProgress()
+    val (sizeKeyframe, interpolatedProgress) = shape.size.keyframes.rememberKeyframeProgress(progress)
     size.set(
         lerp(sizeKeyframe?.startValue?.x ?: 0f, sizeKeyframe?.endValue?.x ?: 0f, interpolatedProgress),
         lerp(sizeKeyframe?.startValue?.y ?: 0f, sizeKeyframe?.endValue?.y ?: 0f, interpolatedProgress),
@@ -172,7 +193,7 @@
 }
 
 @Composable
-fun getMaskPathData(masks: List<Mask>): List<PathNode> {
+fun getMaskPathData(masks: List<Mask>, progress: Float): List<PathNode> {
     // TODO: figure out how to reuse the mutable list.
     // https://issuetracker.google.com/issues/180774141
     val pathNodes = mutableListOf<PathNode>()
@@ -180,12 +201,12 @@
     pathNodes.clear()
     for (i in masks.indices) {
         val mask = masks[i]
-        val (keyframe, progress) = mask.maskPath.keyframes.rememberKeyframeProgress()
+        val (keyframe, keyframeProgress) = mask.maskPath.keyframes.rememberKeyframeProgress(progress)
         val shapeData = allShapeData[i]
         val startData = keyframe?.startValue
         val endData = keyframe?.endValue
         if (startData != null && endData != null) {
-            shapeData.interpolateBetween(startData, endData, progress)
+            shapeData.interpolateBetween(startData, endData, keyframeProgress)
             pathNodes += PathData {
                 moveTo(shapeData.initialPoint.x, shapeData.initialPoint.y)
                 for (curveData in shapeData.curves) {
@@ -207,8 +228,7 @@
 data class KeyframeProgress<T>(var keyframe: Keyframe<T>? = null, var progress: Float = 0f)
 
 @Composable
-fun <T> List<Keyframe<T>>.rememberKeyframeProgress(): KeyframeProgress<T> {
-    val progress = LocalLottieProgress.current
+fun <T> List<Keyframe<T>>.rememberKeyframeProgress(progress: Float): KeyframeProgress<T> {
     val value = remember { KeyframeProgress<T>() }
 
     val keyframe = firstOrNull { it.containsProgress(progress) } ?: return value
diff --git a/lottie/src/main/java/com/airbnb/lottie/model/layer/BaseLayer.java b/lottie/src/main/java/com/airbnb/lottie/model/layer/BaseLayer.java
index f287299..d009f8f 100644
--- a/lottie/src/main/java/com/airbnb/lottie/model/layer/BaseLayer.java
+++ b/lottie/src/main/java/com/airbnb/lottie/model/layer/BaseLayer.java
@@ -146,6 +146,11 @@
     invalidateSelf();
   }
 
+  @Nullable
+  public BaseLayer getMatteLayer() {
+    return matteLayer;
+  }
+
   Layer getLayerModel() {
     return layerModel;
   }
diff --git a/lottie/src/main/java/com/airbnb/lottie/model/layer/Layer.java b/lottie/src/main/java/com/airbnb/lottie/model/layer/Layer.java
index fe4e940..32abfe0 100644
--- a/lottie/src/main/java/com/airbnb/lottie/model/layer/Layer.java
+++ b/lottie/src/main/java/com/airbnb/lottie/model/layer/Layer.java
@@ -137,7 +137,7 @@
     return layerName;
   }
 
-  MatteType getMatteType() {
+  public MatteType getMatteType() {
     return matteType;
   }
 
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
index 37e48e2..17b70c4 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/lottiefiles/LottieFilesSearchPage.kt
@@ -84,7 +84,6 @@
         if (state.currentPage >= state.lastPage) return@withState
         fetchJob = viewModelScope.launch {
             val response = try {
-                Log.d("Gabe", "Fetching page ${state.currentPage + 1}")
                 api.search(state.query, state.currentPage + 1)
             } catch (e: Exception) {
                 setState { copy(fetchException = true) }