Jump to content


Help make this look more realistic

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Greetings to all,


So I am trying to make a sort of trickle down effect in an svg. I have a open medicine capsule and I want the granules coming out of the capsule to fall down like a waterfall effect. Although I have tried making this effect using 'y' and fade with yoyo, It doesn't look very realistic.


Can you give me some pointers on how to make this better?


Thanks!! :)

See the Pen RWoRJx by shubhra (@shubhra) on CodePen

Link to comment
Share on other sites

Hi shubhra  :)


Svg isn't really good choice for particles effect ( from performance wise ) . so , i've made a demo with svg capsule + divs as particles .


pls check this out : 

See the Pen ojYzdP by MAW (@MAW) on CodePen

  • Like 5
Link to comment
Share on other sites

This is so much better! I was wondering about those zillion circle tags and gradients and how much time it takes to load the svg. Also learnt about even odd in javascript. Thanks!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.