Benny Sutton is 4 hire - just click here

How did I create my homepage animation?

If you want to increase traffic and engagement read this. You can create truly stunning animations with SVG and greensock with just a few lines of code.

Your eye will have been drawn to the movement on this screenshot of my homepage. To fully appreciate it full-size click here to launch my homepage in a new browser window

A number of things happen. First the amplifier head slides in, then a hint appears to tell you to click the buttons to hear some music. As you do that a plectrum graphic slides in directing you to the main area; downloads

It's all achieved with very little code - thanks to gsap.timeline()

        
 	        // 'click here to search' slides in
	        var clickSlide = gsap.timeline();
	        clickSlide.fromTo("#clickDiv", { x: -200 }, { duration: 1, x: 50, y: 60, delay: 2, ease: "sine" });
	        clickSlide.fromTo("#clickDiv", { opacity: 1 }, { opacity: 0, duration: 1 });
	        clickSlide.to("#clickDiv", { x: -200 });
            // downloads plectrum slides in
	        clickSlide.fromTo("#plectrumDiv", { x: -200 }, { duration: 1, x: 50, y: 120, rotation: 360, delay: 4, ease: "sine" });