kodralex Posted April 22, 2022 Share Posted April 22, 2022 I've trying to display lots of falling icons. What I have so far is working fine, but it's only display one icon. I need to be able to display multiple css class selectors. gsap.set(Div,{attr:{class:'icon1'} I made have about 10 css classes in total e.g. .icon1 / .icon2 / .icon3 etc. In the example I've just added 2. I've tried many ways to add multiple classes but can't seem to get it working. Any ideas? See the Pen NWXmyGP by alexkodr (@alexkodr) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted April 22, 2022 Share Posted April 22, 2022 Hi @kodralex Looks like that's an old one from our own Diaco. I made an updated version of his idea a few months ago that takes advantage of GSAP 3 syntax and the new random utility method. I used a sprite sheet for mine which should work well for you too. Hopefully it helps. Happy tweening. See the Pen BadPdXx by PointC (@PointC) on CodePen 5 Link to comment Share on other sites More sharing options...
PointC Posted April 22, 2022 Share Posted April 22, 2022 But to do it the way you currently have it setup (no sprite sheet), you'd just make one small change. gsap.set(Div,{attr:{class:`icon${(i%2) + 1}`},x:R(0,w),y:R(-100,-150),z:R(-200,200)}); See the Pen 146de3244e0f33f09731512c7b81c796 by PointC (@PointC) on CodePen Happy tweening. 6 Link to comment Share on other sites More sharing options...
kodralex Posted April 23, 2022 Author Share Posted April 23, 2022 Cheers for the detailed answer Craig. I'll have a play with both, I'll probably go down the sprite route 👍 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now