[Is there any better way to do this?]

Hi Dipscom,

 

Thanks for replying and welcoming on the forums.

 

I am just try to make small animation using GSAP and SVG. Actually, here I am try to animate a Lamp SVG. Firstly, when page loads a lamp has slightly bouncing animation after that when we scroll down the page it will represent a bulb making process (one by one component ) and at the end of the page bulb will again start on/off  animation. I have seen many codes here on forums but i haven't found any relevant code. I also used Scroll Magic to trigger my animations. (my code is dirty for sure because i am beginner)

[Is there any better way to do this?]

I was making an animation using GSAP and SVG. I am new to GSAP so i don't know that if there is another way to do this animation with GSAP. If there is any better way to do this please suggest me. I would be thankful for good suggestions.

 

Edited : it has issue when user scroll very quickly many parts of bulb doesn't appear properly and also some issues when user scroll upside. (Give suggestion to fix it)

See the Pen rbgXJM by vasu_itoneclick (@vasu_itoneclick) on CodePen