Jump to content

Search the Community

Showing results for tags 'one-page'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 1 result

  1. Looking for a kickass developer who can build the following animated page, PM me if you're interested and let me know your estimated fixed bid to do the job. Mockup: http://h.dropcanvas.com/t9epx/animation.jpg This is a one page animation task, the animations are triggered as you scroll down the page. The page is divided into 4 scenes. The attached mockup shows the general look and feel for each scene, however it’s basic, you need to be creative in translating the following description into a living animated page. The main animated objects in all the scenes are: - Green dots. - Main line of text. - Second line of text. - The navigation arrow to the next scene. Before you apply for the job: 1. You should have done high quality HTML/CSS/Javascript based animations in the past. 2. Send me examples of your past animation work demonstrating your skills in animation. 3. Not a company but an individual who’s looking for long term opportunity in web animation. 4. Can get the job done in 3 days maximum, no excuses or delays are acceptable. Requirements: 1. Each scene should be covering the screen full width and height and should be responsive. 2. All the animations and related work should be done in Javascript, CSS, HTMl, SVG. 3. The code should be clean and human readable. 4. The Javascript code should be commented thoroughly explaining each function, class, model, etc. 5. The code should be editable easily by following the comments you’ll be providing. 6. The animations should work on mobile too and should be responsive to adapt any screen size. 7. The performance of the page in total should be optimal and to run smoothly without consuming unnecessary resources. General scenes environment: 1. The scenes should give the feel of a light 3d based environment. 2. The same green dots that shows up at the first scene should be tweening, transforming and transitioning to form the next scene formation. Giving the feeling that the same dots are telling a story by forming a distinctive shape in each scene. 3. Upon scrolling the browser window, the next scene should be triggered causing the whole animations of that scene to be played. The user scroll will only initiate the scene play action for that particular scene in view. The user needs to scroll further to trigger the next animated scene. Green dots general behaviour: 1. The dots sizes should be random, some could be smaller and some could be larger. The smallest and largest sizes should be defined and modified easily in the script. 2. When the dots animation and tweening is done in a scene they should keep being animated in a way to give a feeling of continuous motion. Such motion would be a slow pulsing or circular movement or both together. Main and second line of text behaviour: 1. The text should appear in a fade-in effect while being scaled up in a smooth motion. 1. The main line of text should appear first, followed b the second line of text. The difference should be 0.5 sec or so. Scenes detailed specification: First scene: 1. The scene starts with the green dots scattered randomly over the screen. 2. The dots will be moving slowly over the screen in random directions. 3. The main and second lines of text appears. Second scene: 1. The same dots from the first scene will move and start to form an empty circle. 2. Once the circle formation reaches 70%, the main and second lines of text appears. Third scene: 1. The same dots from the second scene will move and start to form a matrix of dots. 2. Once the metric formation reaches 70%, the main and second lines of text appears. Forth scene: 1. The same dots from the third scene will move and start to form a one big dot. 2. The dots should be merging into the bigger dot giving a feeling of liquidity. 3. Some dots will take longer to join the bigger dot. 4. Once the one big dot formation reaches 70%, the main and second lines of text appears.