Les Vikings
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Les Vikings
-
This is where I'm at: http://codepen.io/tilvalhall/pen/dNJKQR (yep, the viewBox is wrong, but it was just for testing). Thanks a lot Carl!
-
Aaah! Very interesting technique! I might try this out. Thanks for the idea! I'll let you know what I came up with.
-
Hi guys! I'm working on a project for which I'd like to animate the drawing of a handwritten signature. The desired effect is to have it like it's being written. Here is the base file: I tried to vectorize the image using Illustrator, which worked, but the paths that are created are "looped", meaning that it's not one stroke. Thus, when I stagger the paths, they appear to do a "round-trip" around the letters. Do you know of a way that would allow me to animate it in one stroke? Preferably one that doesn't involve redrawing the whole signature manually Thank a lot in advance.
-
You're right, a Pen will be easier to work with. I've setup one with the boat and the pen you gave which is perfect for what I want (a simple wattery effect will do I think, it's more subtle and I'll also have to animate a pool surface). Here is the Pen http://codepen.io/tilvalhall/pen/rWxqyg. For whatever reason my clip-path doesn't show (it's supposed to be the right part of the wake).
-
Thanks for the pointers! Sprites would be ideal indeed, except I don't have control over the graphics part, they are given to me as is. I've made attempts with displacement maps and turbulence, but still not happy with the result. The displacement map using a ripple map produces ripples that are shown onto the boat at the beginning of the tween which is not pretty and it ends in a stutter. The turbulence animation is great at the beginning but goes way to fast in the middle of the tween so that it doesn't look like credible water... Actually, an effect like this one would be perfect : http://srufaculty.sru.edu/david.dailey/svg/waves.html (with these values : frequency 12, scale 32, rotate 246). May try to replicate it.
-
Thanks for you answer @Dipscom! The boat is currently fixed, and seeing that there are already a lot of moving elements in the page, it would stay fixed and I would just animate it's surroundings. Displacement maps effects look quite nice indeed, but I'm not sure that I'm up to the task technically :/ Is it possible to apply them only on part of an image (on the boat waves for instance)? The effect I'm looking for should be cartoonish, but not too much I guess if it stays in the style of the image, I'd be happy with it. And what about MorphSVG? Wouldn't it be easier than displacement maps?
-
Hi 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!
-
Oh nice! I didn't know that the Tweens could be so "independant" from the Timeline! That is very cool! Thanks a million to you both for such a quick answer and tips!
-
Hi 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
