waldrus Posted May 2, 2021 Share Posted May 2, 2021 I am looking to make something similar to the borders found on the Kombu website, however I'm having difficulty getting started. Does anyone have suggestions on how to implement such a feature? laminar_border.mov Link to comment Share on other sites More sharing options...
mikel Posted May 2, 2021 Share Posted May 2, 2021 Hey @waldrus, Welcome to the GreenSock Forum. Here comes a simple construct using GSAP morphSVG. See the Pen XWpvJap by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 3 Link to comment Share on other sites More sharing options...
Rodrigo Posted May 2, 2021 Share Posted May 2, 2021 Hi, Basically they're using this background: And they're using PIXI's tiling sprite class: https://pixijs.io/examples/#/sprite/tiling-sprite.js As for the deformation, it seems that they're using the displacement map filter: https://pixijs.io/examples/#/filters-basic/displacement-map-flag.js With this image: Perhaps @OSUblake our resident PIXI wizard can see something else in it and offer some advice. Chances are that perhaps He has a codepen in his vast collection that is similar to this. But if you're not quite familiar with PIXI and how it works, Mikel's morph SVG solution should be a very good starting point. Happy Tweening!!! 4 Link to comment Share on other sites More sharing options...
OSUblake Posted May 3, 2021 Share Posted May 3, 2021 Best place to start is by learning PixiJS, and following some of their examples. Once you get it built, animating the filter is super easy. https://pixijs.io/examples/#/filters-basic/displacement-map-flag.js Examples repo:https://github.com/pixijs/examples Docs: http://pixijs.download/release/docs/index.html 4 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now