I’m trying to find a solution for animating svg images like the next one:
lines. Idea of animation here is looped trasformation of lines, like it is a towel on the waves.
I know that it’s possible to do with after effects (AE) than export json than using lottie player, but I want to find a solution to do it with JS / WebGL / Three js etc. Don’t know what to do and how to start. As I understand, I need to generate this image with WebGL or canvas. Than use something like requestAnimationFrame… But i can’t find any similar examples which could help me with it.
It’s very important, that such animated SVGs will be used on the website like a backgrounds or illustrations, so it should be optimized lightweight solution. The website uses HTML (PUG), SCSS, JS. WordPress in future…
I tried to do it with AE + bodymovin, but there were a lot of difficulties and restrictions to prepare this image for json. Animation didn’t work because when I draw this picture in Adobe Illustrator, I used some features, which conflicts with next steps. For example, it turns out that only keyframes may be used for bodymovin and JSON. But I did the animation through the expression. Than I found that I can’t use effects of AE, some instruments in AI etc.
After that I tried to find a similar solution without AE, just JS + SVG, or only JS, or SMIL. But all I found was great difficult projects with Three.js like here: https://threejs.org/examples/#webgl_points_waves
Visually it’s close to my task if we are speaking about exapmle image in this topic, but I think it’s much more global and difficult than I need, especially if you consider that there may be 5 — 10 such animated images on the page of the future website, and such solutions like above use much more resources, than I need. I really hope that there should be easier way.