Hi all,
I’m creating a little animation of a flapping bird and I want to add a trail effect on its wings.
I’ve researched but I only found mouse trails or trails using JavaScript.
If that’s all there is, I’ll have to resort to JavaScript when my skills are better.
Thank you guys, here’s my pen:
https://codepen.io/33P/pen/qBaOQbr?editors=1100
I think possibly you’re overthinking it by searching for trails. So a trail in this context is just going to be another shape. So say you just have the trail appear when the animation for the wing goes down. If you use another element for it under either wing, you’ll want it to be a kind of [white?] rectangle that appears at the start of every downstroke and moves down and fades out. So add one on each side, and match the timing of the wing animation - starts invisible, appears at the time when the wing is at the apex, translates downwards on the y axis at the same speed as the wing and fades at the same time to invisible, moves back to the original position while invisible and sequence repeats
1 Like
@codely I had seen it but it applies only to a cursor trail and I’m trying to animate an object other than a cursor, thanks anyway!
1 Like
@DanCouper Yes, that’s the solution I was looking for. Thank you for showing me something I was truly overthinking. Sometimes the simplest of ideas solve everything, and that is true especially to coding. I’ll try your solution. Thank you very much!
@DanCouper What am I missing here? I used rotateZ to go with the wing animation. Then added translateY to create the blur but I only got another wing moving up and down (that indeed was intended). I used 2s for both animations. I researched and the material for translate and transform is very little. Can you get me just a hint here? Thank you very much. I know I’m on the right path. Once I get the right wing I’ll do the same with the left one.
https://codepen.io/33P/pen/qBaOQbr?editors=1100
Edit: I removed the rotateZ part and it seems to partly work, except the “blurry” wing doesn’t separate from the main wing.
Hi all,
I neglected this for a few days and I still can’t solve it.
The wing “blur” appears exactly over the wing.
I know it must be a simple coding error but I can’t get it.
Soooo I need some help. Thanks all.
My pen:
https://codepen.io/33P/pen/qBaOQbr?editors=1100
@DanCouper Sorry if I’m being dense but I tried everything. The blur still moves with the wing. What I researched in the web isn’t giving me the answer I’m looking for. You gave me the pseudocode. I can’t seem to be moving from there almost. Any help will be appreciated. Thanks!
The wing elements are on top of each other. Maybe just using some rotateZ would work.
Here is an example, I didn’t really do much and it doesn’t look very good but you get the idea. Let me know when you are done with it and I will delete my fork.
edit: deleted https://codepen.io/lasjorg/pen/RwGLErB
BTW you want transition-timing-function not animation-transition-function
1 Like
@lasjorg Thank you so much! Indeed there’s a lot to work for it to go smoothly but you gave me the basis.
You can delete your fork.
Gonna peruse your article from mozilla.org!
Thanks!
@lasjorg Nothing spectacular if you feel inclined to do so, check it out.
https://codepen.io/33P/pen/qBaOQbr?editors=1100
I wanted something more dramatic, guess I’ll have to play around with the percentages and degrees of the animation in the keyframes section. And try to understand cubic-bezier better (I think I got it).
Thanks!
Animations can be a bit of a pain with lots of tweaking needed. But overall you are getting there.
If you duplicate the blur element, add a delay to the duplicates, and play around with some blur using a filter it also gives a nice effect.
Here is a simple example with a bouncing ball animation. It’s a subtle effect but that can be adjusted to fit the speed of the animation (and the overall goal of the effect).
https://codepen.io/lasjorg/pen/MWjERKa
1 Like
@lasjorg Thank you lots! I’ll try all of that later and keep you posted if you don’t mind. There’s a lot around but it’s a loss if you don’t know where to look. So thank you for pointing out those to me.
So Merry Christmas and happy coding!
@lasjorg Hey! Been busy elsewhere couldn’t pay attention to my bird.
See how it looks now if you have the time! Thank you!
https://codepen.io/33P/pen/qBaOQbr?editors=1100
I like it, it looks pretty good.
The trail is going the wrong way on the left (screen left) wing on the up wing flap.
I might also fade out the trail sooner/more so it isn’t there at the “flap peaks” (i.e. when the wing is fully up/down).
Yep, that’s a problem I couldn’t solve.
I’ll do that, thank you so much!
I’m glad you like it overall. With the changes you suggested, oh la la. Really, thank you lots.
That was what I wanted to quote secondly.
For the up flap, the blur animation rotateZ values need to be negative from 0% to 50%
1 Like
Also, I just noticed the blur filter syntax isn’t correct. There shouldn’t be a space between the function name and the parentheses. This is likely why you have added such a large px value (because you didn’t see the effect).
You have:
filter: blur (200px);
Should be (2px is likely enough):
filter: blur(2px);
1 Like
Thank you so much. I’ll correct those as soon as I can and see where it’s at.