Jump to content
Search Community

Looking for an awesome animator for a cool one-page project

bakk test
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

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.

Link to comment
Share on other sites

Thanks for your replies gentlemen,

 

I understand that the provided timeframe is short but I appreciate if someone can get it done within 3 days, however I'm ok to extend it to 4 days if that would make things sound more appealing :)

 

The page has only 4 scenes with simple to medium complexity animations, 1 day for each scene seems good enough for a skilled animator to get the job done.

 

If you're reading this and the timeframe is the only issue then please PM me to discuss how it would be done based on your estimated time.

Link to comment
Share on other sites

The "amount" of time is not the issue here .. the fact that it is stated that the amount of time must fit into 3 consecutive days is what I see as an issue. I think you will find it rare for a "skilled animator" or "kickass developer" to have 3 consecutive open days unless you are willing to schedule a few weeks lead time. Add to that the fact that you'd like them to document their every move and intent ... all other things aside, I'd say you'd have to be more than open to the developer's timeline.

 

Full disclosure: I have no intent on bidding on this ... I'm only trying to bring realistic expectations to the table.

  • Like 2
Link to comment
Share on other sites

On top of what Shaun has said. Have you considered that nothing is ever right first time?

 

You will want to review the work, tweak the animation, make it fit what you have in your head. 

 

Add to that the fact that you are talking about a web-animation - there's myriad of browsers out there, OS's, screen ratios etc, all and each needing testing. Where are you going to draw the line on support?

 

Like Shaun, I'm not trying to shoot you down, just raise other overheads you might want to consider. Also, I do not bid on projects, I deliver solutions to set budgets.

  • Like 3
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.
×
×
  • Create New...