Search the Community
Showing results for tags 'liquid'.
Found 4 results
-
Like all new members to the forum, I've found an effect that I'm hoping can be achieved with GSAP. https://www.craftedbygc.com/ A sort of abstract-like liquid flow. I'd love to mask it behind an SVG logo. https://peeke.nl/simulating-blobs-of-fluid But like all first posts in this forum - I have absolutely 0 idea where to start. Any pointers would be amazing! Thank you community ❤️
-
Hi everyone, I'm looking for a way to replicate this effect of this website prototype. It seems like a liquify filter is applied to the images, and when the page scrolls the image is restored. I searched both on this forum and on google but I did not find solutions that could do for me. I'm not a javascript expert, I don't know how to reproduce it. I saw that beyond gsap there are libraries like webgl or curtains.js or pixi.js. Do you have any idea how this can be done? Thank you. https://dribbble.com/shots/6749793-Supreme-Landing-Load-States
-
Hi there, can anyone direct me to some examples of a foggy window effect created with GSAP? I'd love to see any examples or ideas that would show the screen getting foggy, then the fog being wiped away. I've added a pen that someone else made, but shows the direction I'd like to go in. Thank you Natalia for the pen Thanks in advance, B
-
I just started to get into using the TweenMax JS animation library, and I have to say that it is pretty sweet. I've gone through and started doing test, and such, and tested the bezier plugin ,which is pretty awesome in itself. My question with the bezier plugin is whether or not it would handle responsive design, such as when the user rescales down their browser window? Currently I have this tween, that is set to animate when the item comes into view. var atween = TweenMax.to('.arrow-test', 2, { bezier:[ {left:100, top:250, alpha: 0}, {left:300, top:0, alpha: 0.5}, {left:500, top:400, alpha:1} ], ease:Power1.easeInOut, paused: true }); My CSS is as follows: .arrow-test-wrapper { position: relative; } .arrow-test { position: relative; top: 0; left: 0; } Does animating on bezier curves support responsive design? Or is there something that I am missing in my code? Thanks!
