Search the Community
Showing results for tags 'ripple'.
Found 3 results
Creating a boat wake effect
Les Vikings posted a topic in GSAPHi there! I'm trying to think of ways to create an effect that would mimic a boat wake. I've searched for similar effects on Codepen but I wasn't too happy with what I found. I guess what I'm looking for would be similar to a water effect, but with a "speed" motion. So far, I've gathered different ideas (that would not all be used at the same time, it has to be subbtle and as lightweight as possible): - animate water curves around the boat, for instance with Morph SVG like the cape here: http://codepen.io/GreenSock/pen/WQjRXE - use a filter over parts of the image like this: https://codepen.io/thebabydino/pen/doBLxx - use particles to imitate water drips These are not perfect ideas and I'm mainly looking for advice on them or maybe pointers to a technique that would suit my needs. I've attached the image I'm working with. Thanks for your ideas!
Ripple loader, from CSS to GSAP
Les Vikings posted a topic in GSAPHi there! I'm new in the GSAP world but already loving it! Today, I'm trying to replicate a loader animation that I found on loader.io. The problem is that it provides either a CSS animation or an animated (SMIL) SVG (which is bound to be obsolete). That's why I tried, in order to be better at tweening, to replicate the effect using the base SVG minus the animations. The effect I'm looking for is a seamless loop: when the first ripple is a 50% of the animation, the second one should start and when the second one is at 50%, the first one should start again... You get the idea I tried with two timelines but my brain can't seem to process the delays and duration needed to achieve the effect, let alone the easings... Thanks in advance to anyone willing to assist a noob in understanding the intricacies of the GSAP world
Animating SVG fills inside-out with "ripple/diffusion effect"?I'm trying to create an SVG that has clickable shapes, which, when clicked fills the entire shape from the inside out. http://codepen.io/anon/pen/OMBPar ^ This works well for filling the entire region at the same time but what I'm trying to achieve is a "ripple effect" which will fill outwards from the point at which the click took place. So the fill "diffuses" out to the edges of the shape (and stays within the clicked shapes). Essentially, I'm after something like the following effects: http://tympanus.net/Tutorials/SVGRipples/ http://codepen.io/zavoloklom/pen/wtApI http://codepen.io/Craigtut/pen/dIfzv http://codepen.io/anon/pen/BjYQeM But ideally just using Tweening - is this possible? Any help is much appreciated! Thanks.