Jump to content


Is there any better way to do this?

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

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

Link to comment
Share on other sites

Hi Vasu,


Welcome to the forums!


There's a lot of code there to read... How about you first explain to us what is it that you are trying to achieve? It will save us from having to guess.

  • Like 3
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

I can't spend too much time on this but my first suggestion is for you to the following:


1) Have separate pens for your two animations: One the bouncing animation you want to do, the other the bulb making progress. So you can be sure the animation is working as you desire.

2) Try and have a read at ScrollMagic's examples to get a better understanding of it and how to work with timelines, as is, you seem to be overcomplicating things a bit too much.

3) Only then, try and connect the animations with the scrollMagic.


Here's a super quick fork of your example (thank you for the pen, it really helps us to help you).


See the Pen EzYxpr?editors=0010 by dipscom (@dipscom) on CodePen


Also, have a look at the changes I made to your HTML and CSS, it's subtle but helpful.

  • Like 4
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.