Jump to content


Need Advice : SVG Animation while vertical scrolling

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

Hi there,

i need to perform a one page vertical scrolling with animation.

My basic idea is to animation the construction of a building.

Then while the user scrolls down the page, some walls will grow up and some men will walk left and right  for example, synchronized with the scroll.


I was thinking to use a SVG build with Illustrator then animate it, but the svg file is 1.7Mo heavy :/


How one can achieve that ? Any idea or advice or example please ?


Many thanks !


Link to comment
Share on other sites

Hi and welcome to the forums.


It's not the easiest thing to do. For the building construction you could try different divs with an absolute position and setting the background position according where they are in the building, then you can set all the heights to zero and then create a timeline that tweens the heights back to normal size, creating a building event.


The walking people is a tough one, rather than create an animated gif of the width of the viewport (which will stink up the place if you use fluid layout) with flash with an animation as random as possible will be my best suggestion. Another chance could be to create each walking animation with SVG and then move the SVG object with GSAP but that would require some trial an error until you find the right timing.


Unfortunately I'm far from being a canvas or SVG expert, but mainly for the downside you mention, too much kb involved for a "give to me fast!!!" type of world we're living right now.


Hope this helps,



Link to comment
Share on other sites

Hi Rodrigo,


thanks for your entry.


After some research and try, i think a good approach is definitely to use SuperScrollorama with the TweenJs (and probably the Raphael Plugin).


First i was thinking using CSS3 Animation with SuperScollorama but any CSS3 Animations inside a pinned object make Scrollarama bugged.


keep you update when a preview version is up, if the client like and vote for the concept ;)



Link to comment
Share on other sites

Hi Chris,


You're welcome. 


I'll be waiting for your news and see how things are coming along.


My advice will be to avoid as much as you can css animations, GSAP does that and much more, is more intuitive, easy to use and the scaffolding is quite faster than css3 animations. For a more comprehensive reading refer to the following article:





  • Like 2
Link to comment
Share on other sites

Hi Rodrigo,


thanks for the tips !

And in a way, i would prefer to handle everything from the same side, meaning controlling scrolling / transition / animation from the Javascript side and not a mix of CSS and JS.


Anyway, as any respectful good client, he changes his mind on the concept and now would like a path animated sparkle along a cable / wire while scrolling down or automatically animated with pitstop at certain point :S

I will create a new post for this matter after searching here in the forum existing posts.




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.