SWALKER Posted January 23 Share Posted January 23 I am trying to implement a water effect with pixi.JS and GSAP I have looked through all the similar questions on here and codepen but ,any are for slider and I just want one scene. Essentially what I am trying to achieve is this (which I love): https://tympanus.net/Development/LiquidDistortion/ Tutorial here https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ But NOT as a slider and with the amplified effect on page load not slide click. I did actually manage to sort of get this working here https://staging-chfp.shereewalker.com/ But I really want the amplified effect that you get when you click to the next slide in the first link - but for this to happen on page load. So on page load it's intense but gradually dies down - though never stops moving. And even better it would speed up again (I think it's called 'wacky' in Pixi) when scrolling. Even their 'non-amplified' wobble settings are better but I can't seem to replicate them. I could probably manage to strip out the slider but I can't get the intense wobble on page load or scroll. I couldn't seem to get anywhere so I started again using the basic displacement filter demo in Pixi which is where I am at now in codepen. Oddly, when i try to add my own images, it doesn't work - but it does on my site. I am okay with gsap and scrolltrigger and trying to get my head around Pixi, but I don't know how to merge the two together. Any help would be greatly appreciated. See the Pen dyarzXM?editors=1111 by shereewalker (@shereewalker) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 23 Share Posted January 23 Hi, Your codepen doesn't have any GSAP code in it The demo from codrops you linked has a Github link on it that takes you to the code: https://github.com/codrops/LiquidDistortion/tree/master Here is the click part of one of the demos: https://github.com/codrops/LiquidDistortion/blob/master/js/main.js#L349-L384 Here @OSUblake has a demo of PIXI's displacement filter using GSAP: See the Pen gmPQWX by osublake (@osublake) on CodePen Finally when it comes to this type of things you always have to make sure that the images are loaded before creating the GSAP instances. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
SWALKER Posted February 13 Author Share Posted February 13 Hi there, This is amazing thank you - I haven't got it quite right but I'm getting there. This is where I am at - on my dev site the image covers the whole thing but for some reason does not on my codepen. See the Pen zYbMmzO by shereewalker (@shereewalker) on CodePen The only thing I cant replicate, is I want it to wobble more on page load then end up at the speed I have it - the same as the co-drops demo but on page load, not click. I also can't seem to get it seamless. Also - sorry fr all the questions! But is there a way to do object-fit cover for a canvas? Any help would be much appreciated! Thanks Sheree Link to comment Share on other sites More sharing options...
Rodrigo Posted February 13 Share Posted February 13 Hi Sheree, I believe that you can create responsive elements with PIXI, but that's a question best fitted for PIXI's forums or discord channel rather than here Discussions page on github: https://github.com/pixijs/pixijs/discussions PIXI's Discord channel: https://discord.gg/CPTjeb28nH To make the effect faster you have to make the duration of the displacement sprite smaller: gsap.to(displacementSprite, { ease: "none", duration: 2.5, repeat: -1, x: 512, y: 512 }); Finally I strongly recommend you to switch to the latest versions of both GSAP and PIXI, since the demo you're using as a base is a bit old and out-dated. Hopefully this helps. Happy Tweening! 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