SVG Animation - How do I do it?


#1

Hi guys,

… I really want to know how this animation works…
This website has an svg animation with the text and I manage to find some of the script but I am missing a portion of it. So if you guys can help with the scouting…(canary chrome lets you see the source code.

I found this so far I found this…

if you guys can help it be great

-pauly


#2

Which animation are you referring to? Could you post a photo?


#3


#4

they use the same animation code for all of the text. Basically when you scroll down it animates… so theres a tracker for scroll down…and also there’s something that is breaking down the letters…


#5

Animated SVG example here … for them, it’s just a matter of triggering the animations based on page position.


#6

thanks!!! This is awesome :smile:


#7

Good. Dig into that. There are other ways of doing it of course, but that seems to be a nice clear example with all of the parts there for you (check out Velocity.js for more).