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
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!
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!
Lots of hacks in webflow haha