How to re-create this arrow animation?

I came across this interesting animation (which follows as you scroll down) at https://picnichealth.com/. How to re-create this animation? I’d appreciate any help!

A Lottie file would be your best bet. Webflow has some tutorials on this: Web animations with After Effects & Lottie | Webflow University

There are also a lot of free resources: https://www.lottieflow.com

1 Like

The provided example also uses WF but they did not use a lottie file. They used a continuous scroll animation and animated the height of a div element.

If you are familiar with json notation, I’ve extracted the list of keyframes set for this animation here:

show JSON Keyframes (long list :)
    "actionLists": {
        "a": {
            "id": "a",
            "title": "Timeline Desktop",
            "continuousParameterGroups": [{
                "id": "a-p",
                "type": "SCROLL_PROGRESS",
                "parameterLabel": "Scroll",
                "continuousActionGroups": [{
                    "keyframe": 13,
                    "actionItems": [{
                        "id": "a-n-11",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b1f"
                            },
                            "value": 0,
                            "unit": ""
                        }
                    }, {
                        "id": "a-n-10",
                        "actionTypeId": "TRANSFORM_MOVE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b1f"
                            },
                            "xValue": 10,
                            "xUnit": "%",
                            "yUnit": "PX",
                            "zUnit": "PX"
                        }
                    }, {
                        "id": "a-n-28",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b17"
                            },
                            "value": 0,
                            "unit": ""
                        }
                    }]
                }, {
                    "keyframe": 15,
                    "actionItems": [{
                        "id": "a-n",
                        "actionTypeId": "STYLE_SIZE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "locked": false,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b05"
                            },
                            "heightValue": 2,
                            "widthUnit": "PX",
                            "heightUnit": "%"
                        }
                    }]
                }, {
                    "keyframe": 18,
                    "actionItems": [{
                        "id": "a-n-9",
                        "actionTypeId": "TRANSFORM_MOVE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b1f"
                            },
                            "xValue": 0,
                            "xUnit": "%",
                            "yUnit": "PX",
                            "zUnit": "PX"
                        }
                    }, {
                        "id": "a-n-12",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b1f"
                            },
                            "value": 1,
                            "unit": ""
                        }
                    }, {
                        "id": "a-n-27",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b17"
                            },
                            "value": 1,
                            "unit": ""
                        }
                    }]
                }, {
                    "keyframe": 32,
                    "actionItems": [{
                        "id": "a-n-13",
                        "actionTypeId": "TRANSFORM_MOVE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b29"
                            },
                            "xValue": 10,
                            "xUnit": "%",
                            "yUnit": "PX",
                            "zUnit": "PX"
                        }
                    }, {
                        "id": "a-n-14",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b29"
                            },
                            "value": 0,
                            "unit": ""
                        }
                    }, {
                        "id": "a-n-29",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b31"
                            },
                            "value": 0,
                            "unit": ""
                        }
                    }]
                }, {
                    "keyframe": 37,
                    "actionItems": [{
                        "id": "a-n-15",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b29"
                            },
                            "value": 1,
                            "unit": ""
                        }
                    }, {
                        "id": "a-n-16",
                        "actionTypeId": "TRANSFORM_MOVE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b29"
                            },
                            "xValue": 0,
                            "xUnit": "%",
                            "yUnit": "PX",
                            "zUnit": "PX"
                        }
                    }, {
                        "id": "a-n-30",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b31"
                            },
                            "value": 1,
                            "unit": ""
                        }
                    }]
                }, {
                    "keyframe": 45,
                    "actionItems": [{
                        "id": "a-n-17",
                        "actionTypeId": "TRANSFORM_MOVE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b38"
                            },
                            "xValue": 10,
                            "xUnit": "%",
                            "yUnit": "PX",
                            "zUnit": "PX"
                        }
                    }, {
                        "id": "a-n-18",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b38"
                            },
                            "value": 0,
                            "unit": ""
                        }
                    }, {
                        "id": "a-n-31",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b40"
                            },
                            "value": 0,
                            "unit": ""
                        }
                    }]
                }, {
                    "keyframe": 50,
                    "actionItems": [{
                        "id": "a-n-19",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b38"
                            },
                            "value": 1,
                            "unit": ""
                        }
                    }, {
                        "id": "a-n-20",
                        "actionTypeId": "TRANSFORM_MOVE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b38"
                            },
                            "xValue": 0,
                            "xUnit": "%",
                            "yUnit": "PX",
                            "zUnit": "PX"
                        }
                    }, {
                        "id": "a-n-32",
                        "actionTypeId": "STYLE_OPACITY",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b40"
                            },
                            "value": 1,
                            "unit": ""
                        }
                    }]
                }, {
                    "keyframe": 66,
                    "actionItems": [{
                        "id": "a-n-24",
                        "actionTypeId": "TRANSFORM_MOVE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b08"
                            },
                            "xValue": 0,
                            "yValue": 0,
                            "xUnit": "PX",
                            "yUnit": "PX",
                            "zUnit": "PX"
                        }
                    }]
                }, {
                    "keyframe": 68,
                    "actionItems": [{
                        "id": "a-n-25",
                        "actionTypeId": "TRANSFORM_MOVE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b08"
                            },
                            "xValue": 0,
                            "yValue": 270,
                            "xUnit": "PX",
                            "yUnit": "PX",
                            "zUnit": "PX"
                        }
                    }]
                }, {
                    "keyframe": 70,
                    "actionItems": [{
                        "id": "a-n-2",
                        "actionTypeId": "STYLE_SIZE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "locked": false,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b05"
                            },
                            "heightValue": 90,
                            "widthUnit": "PX",
                            "heightUnit": "%"
                        }
                    }]
                }, {
                    "keyframe": 75,
                    "actionItems": [{
                        "id": "a-n-26",
                        "actionTypeId": "TRANSFORM_MOVE",
                        "config": {
                            "delay": 0,
                            "easing": "",
                            "duration": 500,
                            "target": {
                                "useEventTarget": "CHILDREN",
                                "id": "0ac7fa30-9b95-9206-9ff6-0e6a8e089b08"
                            },
                            "xValue": 550,
                            "yValue": 283,
                            "xUnit": "PX",
                            "yUnit": "PX",
                            "zUnit": "PX"
                        }
                    }]
                }]
            }],
            "createdOn": 1569350684413

Let us know if this is helpful!

1 Like

I knew that they were using WF from Wappalyzer. I also had cracked that they were animating the length of a div element but I cannot understand the part where the arrow bends to the right and points at an image.

They manually covered the bend with a div and simply move it to the right

If you play the animation really slow you can see it

I guess you are right! There’s a .png of the same bend arrow in the resources of the site as well. Attached below!

1 Like

Lots of hacks in webflow haha

1 Like