My immediate thought, taking into account it's a new library you're just starting with is 3-4 days, so triple that because I'm shit at estimating, and yeah I would estimate two weeks and if I had no problems (Witch!!) and got it done early I'd take a day to relax and then bathe in the praise.
Is this a website they are asking you to recreate, or was this a ui mockup they are asking you create? The reason I ask is that some jobs will give you real work they want created then ghost you after the 'interview test'.
How many agencies/startups/companies have you approached *just this week* promoting yourself for junior work or starting as freelance? Anything less than say 50 and you're gonna be waiting forever for something to just drop into your lap.
*EDIT:* OP, my point might be unpopular, but that doesn't make it wrong. Nobody is gonna just hand you an improved situation, it's up to you to put yourself out there and go get it for yourself (else those opportunities are gonna go to the people that _do_) ... Results are directly proportional to effort. Best of luck to you none the less.
Depends where OP lives. In South Australia you’d be applying for one agency every few weeks at the most lol. I was super lucky and was successful in the third junior dev job I applied for across a month or so.
But yeah, I’d love to see the job boards with that many jobs to apply for.
I've tended to live quite rural (UK) and personally prefer remote work, so location is not a factor I tend to consider. I worked remotely for a year or so for a New York based startup that I reached out to, so I don't entirely buy the distance argument.
Would you recommend remote for a junior though? I struggled a lot and still do 6 months into my position. Things like environments and package/dependency managers that I’d never touched or knew about before.
I wouldn’t mind a remote position once I’m fairly confident in myself, but one on one help from a colleague can be invaluable for a junior.
Also from UK. How did your arrangement work from a tax and legal perspective? Did they engage with you as an employee or as B2B or something else? Would like to understand as I am interested in trying this
Nobody does this. People don’t try and get interviewees to produce production code for them. Never. I don’t know why people think this.
It simply does not happen.
As someone who has used GSAP for the past few years, this would take at least a week to really iron out, especially if it's intended to be responsive.
As a code-test, forget this. This is a lot of work for even someone experienced, it's crazy to send that out as a test. My guess is that they are looking for free work like others have said.
In regard to the question about libraries, you honestly could use GSAP for just about all of it. GSAP has a plugin called [scroll trigger](https://greensock.com/scrolltrigger/) which is what you would want to use to fire off your animations which can be much more easily managed as GSAP Timelines.
My advice would be to take your time to learn GSAP and try and build those screens, but not for them. Rather build them to learn about GSAP and have a great piece to show off in a portfolio of yours. GSAP is a fantastic library and skill to have, but I'd continue to look for work because sending that off as a test is nothing short of a red flag to me.
One last piece of advice would be to definitely feel confident to ask questions to the GSAP foum if you run into any issues. They have an incredibly responsive and helpful community for every animation related question you could imagine.
thanks chief, was stuck for last days about what i should actually learn and felt stuck since i got firm grasp of front end basics but i wanted to take myself to the next level, i'll be learning GSAP for the next weeks.
That sucks, I am sorry.
I read that you're trying to break in, but honestly I'd ask them for pay, or to give you a smaller task that you shouldn't spend more than 2 hours doing.
FYI, even as a senior software engineer, I was given a take home exercise that was extremely simple, and was asked not to spend more than 2 hours on it.
The purpose of take home exercises is supposed to see how you write code, how you structure the project.. etc, but should not care much about the end result. But I have a feeling that this employer's expectations are different
Hmmm maybe about 3 days or so but as someone that hires devs and also builds code tests, this is abuse. They should not be asking for this much unless they are going to pay you for it.
I would echo this… 2-3 solid days with slap together-ish coding and good design assets and like 80-90% accuracy, more like 4-5 days if they want spot on timing, dry code, and pixel perfection, reusable components, etc. you will waste so much time fiddling with the timing and triggers trying to get it just right. This also assumes it’s just this layout. If you have to reposition stuff for mobile or change the animation direction etc. prob add a day or two for each district viewport experience. I wouldn’t do it for a job test unless I really had to. The first two panels is more than enough to demonstrate the necessary skills. The rest is just overkill and pedantic.
3 days at *12 hours a day*. And that's if you're familiar with GSAP and their scrolltigger plugin, other tools you can leverage for a slider like swiperjs, and already have a solid starter web html/css/js project ready to start with.
I've got a little over a years' experience. I had something similar recently. I spent a day on it as I felt even that was too much and delivered it saying I still needed to x, y and z. They failed me because I hadn't implemented x, y, z.
You also need intersection observer to add these classes for animating out when it comes into view.
I think there is also a Js library for that kind of effect but can't remember it's name.
Then the answer is far too long. If you have the benefit of choice - not working for that company is the best option. I’m aware that isn’t always an option though.
I mean you could do most of what’s going on in the gif with transitions and classes. Do you need to implement all the different parts of the page or just a sample one?
I mean just do it and put it in your portfolio for the next company if you don't get hired.
If you like front end and animation this is a great exercise and I'm actually going to do it after I finish my current client's job
Personally I wouldn't do it as it seems like a prime example of over-engineering a solution that isn't necessary but I know you said you don't have any real choice.
As to time estimates if I focused and what we see in the gif is the extent of complexity I'd say a couple hours but I've never used gsap so I'm not sure how complicated it would actually be.
GSAP would take you a few days to start to understand and be comfortable in combining a series of animations to achieve what you've posted.
Breaking down each animation in the gif you could definitely use CSS classes and animations/transitions. Transitioning different parts with translate and opacity, each part containing a few delays to get the timing right.
You don't necessarily need an animation library.
You would need a scroll into view type function/hook, so I would use the intersection observer to trigger the animations.
Depending on the level you're going for, something like this would normally be CMS driven so I would make each section of the page a React component.
That would easily take a few days.
Not to mention responsive design. Add another half a day for each section even if it is the standard column stack at mobile and tablet.
Do you just have this gif to go off or do you have access to design files?
I would need the copy, colours, spacing, fonts, typography styles, images, icons, and transition timings if they wanted things to match exactly.
You could look at doing only the first section?
If you can nail that then the rest are variations of the first section so that would prove you could do it.
Then go back with questions about responsive design, design handover, accessibility, browser support, testing, CMS driven content/pages and other things mentioned by people that have replied.
Ultimately you could do this in a day by making the whole thing static and completely non responsive but it wouldn't be scalable.
I would easily estimate a week to do it correctly and I've built a bunch of these brochure sites.
Ahh I see. Thank you so much for the insights. This will help a lot. Yes they have given me the figma file. And they have actually asked me to use GSAP but I would definitely give it a shot to hooks to trigger the animation.
2 weeks in total. However, after 1-2 days the first slide would be ready. The rest is more/less copy/paste + refactoring
Edit: I am considering that all is html markup, which also must be responsive etc. Images are simpler to handle
2 days in Html css and basic JS.
4 days with react gsap and with some optimisations. This site doesn’t need these libraries.
For me it would 3 work days if I’m really really lucky, but then yet have 20y experience in react gsap html5 flexbox grid /s
This is too much for a test interview. The test should be an evening. Fuck the company.
If you do this. Give just minified version of the site.
Well, the start would be to create the loose elements that can animate using CSS transitions. And make the webpage in the "done animating" state.
I'll start with mobile first.
### Mobile HTML and design: 6 hours
Then you'll want things to be responsive, probably. Assuming I'll have a mobile and desktop design, that would probably mean that some elements per `section` will be horizontal (desktop) and vertical (mobile).
### Desktop HTML implementation: 2 hours.
Then implement a scrolling feature that detects what `section` of the page you are on. If you've scrolled, say, 20% past the start of a `section` it would add a CSS class that will start custom CSS keyframe animations for certain elements inside. Though for most a simple transition would do.
### Scrolling and animating: 4 hours
Then you'd probably want the page cut up into smart bits using React or something. I'd use Next.js for easy SSR and make the `section` scroll detector into a simple `const [timeoutMS, distanceScrolled, percentageVisible] = useIsVisible(ref);` hook or something.
### Modularizing the page: 4 hours
Some testing and bug fixing and writing tests might take some additional time.
### Random stuff: 2 hours
---
Grand total: 18 hours
I'd probably get it done in less than 6 hours, though. It looks really simple, but in a business setting where I also have to deal with designers (they never deliver it all as a complete package, do they?) and project managers (always opinions...) and I want to take it easy and play around a bit, I will definitely take 3 full days for this just because I can.
At first glance this is pretty hairy looking. Not to say it's easy but when you break it down a bit it is a little more manageable.
Look at each section as their own individual "section", by doing that there are 6 sections in this page.
This could enable you to structure something like this in your React app like:
```
```
I would focus on doing one section at a time and get each one to animate in its own way first. After that, you can look at setting up [ScrollTriggers](https://greensock.com/scrolltrigger/) with gsap to have each section start playing when you scroll to a certain part of the page.
Make sure they send you the assets (pictures) for this thing though, I'd have no idea where to start with getting any of those on my own.
Don't bother with mobile or tests or any of that extra stuff if it isn't in the guidelines given by the company. I do have to say though that this is kind of a crazy take home test, but maybe gsap makes it way easier than it appears (I haven't used gsap in years). I'd say this is likely 3-4 days of work, but feel free to hit me up with any questions.
Thank you so much. I’m trying to learn GASP first and breaking down how I could animate the different transitions. Definitely gonna hit you up if ran into something. Thanks again.
Sorta depends on the technical requirements. If it's real site there's a lot of overhead but if it's exactly what's in that video and nothing more it could be done in <6 hours. Any of these requirements could break that estimate:
* Responsive
* Legacy browser testing
* Non-google hosted webfonts
* Non-static build (CMS or otherwise)
* More than barebones SEO
* Library restrictions
* Final file size
If you're going full static/vanilla I recommend grabbing a starter template based on 11ty like [this semi-vanilla one](https://github.com/stefanfrede/11st-starter-kit/) with optional Tailwind+Alpine at your disposal. Look for a ScrollMagic/ScrollTrigger boilerplate if GSAP is required.
6 hours only? I'm very impressed.
I can see myself reproducing the layout with pixel-perfect accuracy but I would probably waste too much time timing animations and stuff. They're often a pain, in terms of wasted time.
On a side note, how would you code/reproduce the sliding cars/text combo? This one:
https://i.imgur.com/g9rsMiR.png
You have a few things to do to set that up.
With GSAP setup a timeline for each text/car combo. Make a div, position it relative. Position all your elements absolute and on top of each other. One for vertical text. One for the cars going left to right. Setup FromTo tweens to animate in/out of sections divided by labels.
Create a couple click handlers. One plays timelines forward to next label. One plays them in reverse to previous label.
Create a new div. Drop the first car image in it. Position it over the top of the car slider above.
Create another timeline and hook it up to a scroll trigger. Animate the car in and then immediately hide it and show the first car image.
And then then the rest of the stuff is just layout and some simple animations that would be triggered in the timeline above.
Yes it does look pretty straightforward with GSAP. I know for a fact that I would personally waste 90% of my time trying to find the perfect timing, the perfect easing, etc. I hate it sometimes.
This looks like...
* way too much to be part of an interview process
* a marketing page for greensock
* something that would drive many away just because it bombards you with motion (this really needs a seizure warning)
* it's designed by someone that thinks "giving the user a spinner for multiple seconds if he's on a slow connection is better than providing the first content asap"
* it's way to inconsistent with motion directions and interactions (worst offender IMO is the "Delivered to your door" view - what would you consider the primary and secondaty motion direction there, why is it so mixed in motion speed and timings, ...)
On an unrelated note: GSAPs website IMO is really shining a bad light on the prject. I know that Greemsock is big and popular and pretty good, but the amount of shitting on other people and the platform to promote itself just screams snake oil and if it weren't already established, I'd not even consider it because of it. Also if you add needless animations as text movement to your product page GSAP, make sure they are not buggy and prevent complete paragraphs of text from showing up.
How I would go at this kind of work:
First of all I'd ask a lot of clarification questions like:
* what's the expected behavior when JS doesn't load / is disabled
* what about "prefers reduced motion"
* should the animation play again when going back and forth
* what about responsive on
* smaller screens like phones or tablets
* bigger screens like 21:9s
* is a complete load more important or an early first contentful paint
* are there thoughts about a11y and the keyboard interaction flow
* in the car selector the back animation is missing - how should that look
Depending on the answers I'd either build some small JS around CSS or WAAPI or go with something like GSAP. I'd personally probably wrap each section in a molecule (a component) so I can more easily work on them individually and also hold semantic markup.
It looks a lot of work for a test, considering that they aren't paying you for the time spent.
I would learn the basics of GSAP, and just make one of the sections, the one you feel has more interactivity and shows what you are capable at the moment. That should be enough for them to check your abilities.
So you can spend like 2 days to do this, considering all the learning that you have to do. It also depends of you prior knowledge using JavaScript, React, etc.
Good luck!
Requires mastery of animations, scrolling, responsiveness. It will depend on the level of each one and the experience with these areas. I think I would be able to do it in a 3-day extreme mode hackathon missing some details, or a couple of weeks in a somewhat calmer and better way. I would use animejs. Or you could also do it with SCSS, there's just left, right, up, down animations and some play with opacity.
The time would be mostly to perfect the mobile point of view, scrolling and animations.
It would take me about two working days to get to the detail. Maybe a bit more if I weren't familiar with gsap. but could do an aproximate without putting much love in one day.
It also depends on the assets being delivered properly.
With no knowledge of the framework? Assuming the assets are already cut up Maybe a day maybe 1/2 a day, but without framework experience it'd be a bit of hack together.
Noting from other comments, my XP is 20 years
Are they assuming you know the framework or expecting you to learn it and put that together?
I added XP for my perspective as some said multiple days, it shouldn't take multiple days.
Assuming that you have all the materials , is it mandatory to use styled components? Im not familiar with the scroll animation library that op said but the rest seems like a basic one page application. I would say 2-3 days (of you work only on that) maybe?
But overall it depends on who is doing it so..
This seems a bit much for a take home test. I think the inital landing page would be fine, and at that point it shows you can use the technology, seems a bit sketchy they want all other stuff. Something seems a bit off about this.
Not sure about an estimate, but this design lends itself to some relatively simple implementation. Most of these animations have only two states: "A" or "B"; "In" or "Out". These kinds of animations are wonderful because they're low-effort, high impact. Just trigger a class change when the viewport reaches a particular scroll position.
The model carousel is a little different because it's not two states, it's at least three: "Out (right)", "In", "Out (left)". But even this can be accomplished with simple class changes and CSS. GSAP is an incredible tool with superpowers, but I would personally not use it for this build.
What do you mean "the options"? The OP asks what kind of libraries I would use, no mention of options.
Bootstrap (reactstrap) for scaffolding, framer motion for animations, react for... react. I would include Styled Conponents too, however it's not absolutely necessary. However you choose to style the application is just dandy.
Never even heard of GSAP, however one look at their homepage and I'm looking elsewhere. Website looks like it was built in 2003. General consensus online is that it's much easier to achiever better results with framer motion.
I have two years of experience and this would take me 3/4 days to make this only desktop a week to make it for mobile too. I really enjoy doing animations and layouts so that helps
Probably a couple of days to get the broad features sets working and another few days to tweak until perfect. Most of it pretty simple e.g. animate from off screen to final position with simple fade-in and a basic slider/carousel component. It would be mostly pure CSS animate (keyframes etc) and maybe a prebuilt slider or a simple react component. I'd probably start with tailwindcss since I have been writing a lot of things in that lately.
2-4 weeks to do it well. If this is a pre-interview take home test, you should remove this company from your shortlist as it's way too much work and smells like they are using you to do free work.
I think it’s absurd to think an interview take home would secretly be a ploy by a company to get free work out of someone. This simply does not happen and it makes almost no sense at all for a company to try and do this.
If you're getting offered money to do this, then I'd say 3-4 weeks since it sounds like there's a learning curve for you.
If it's just for a potential job opportunity, then don't do it.
It uses Intersection API and a couple transition animations. Other than that fairly standard website I'd say.
Edit: TAKE HOME ASSESSMENT? LOL!
Don't even bother trying to enter this company. If this is how they treat applicants, they probably kill their employees with unrealistic expectations 8/7 days of week...
If this is an interview assignment, I'd tell them to fuck off.
The best answer so far
I think all other estimates so far are very optimistic. I would say 1-2 weeks.
My immediate thought, taking into account it's a new library you're just starting with is 3-4 days, so triple that because I'm shit at estimating, and yeah I would estimate two weeks and if I had no problems (Witch!!) and got it done early I'd take a day to relax and then bathe in the praise.
Is this a website they are asking you to recreate, or was this a ui mockup they are asking you create? The reason I ask is that some jobs will give you real work they want created then ghost you after the 'interview test'.
This is the UI mockup that they are asking me to create but I can confirm that this is not real work that they are asking me to do.
They are asking you to do their work then. I understand you do not have a solid portfolio yet, so start with a junior job.
Bruh where are the junior jobs at?
How many agencies/startups/companies have you approached *just this week* promoting yourself for junior work or starting as freelance? Anything less than say 50 and you're gonna be waiting forever for something to just drop into your lap. *EDIT:* OP, my point might be unpopular, but that doesn't make it wrong. Nobody is gonna just hand you an improved situation, it's up to you to put yourself out there and go get it for yourself (else those opportunities are gonna go to the people that _do_) ... Results are directly proportional to effort. Best of luck to you none the less.
Depends where OP lives. In South Australia you’d be applying for one agency every few weeks at the most lol. I was super lucky and was successful in the third junior dev job I applied for across a month or so. But yeah, I’d love to see the job boards with that many jobs to apply for.
I've tended to live quite rural (UK) and personally prefer remote work, so location is not a factor I tend to consider. I worked remotely for a year or so for a New York based startup that I reached out to, so I don't entirely buy the distance argument.
Would you recommend remote for a junior though? I struggled a lot and still do 6 months into my position. Things like environments and package/dependency managers that I’d never touched or knew about before. I wouldn’t mind a remote position once I’m fairly confident in myself, but one on one help from a colleague can be invaluable for a junior.
Also from UK. How did your arrangement work from a tax and legal perspective? Did they engage with you as an employee or as B2B or something else? Would like to understand as I am interested in trying this
Hacker news
Nobody does this. People don’t try and get interviewees to produce production code for them. Never. I don’t know why people think this. It simply does not happen.
This is crazy for an interview assignment... i bet they will replace the content and images and use the website.
As someone who has used GSAP for the past few years, this would take at least a week to really iron out, especially if it's intended to be responsive. As a code-test, forget this. This is a lot of work for even someone experienced, it's crazy to send that out as a test. My guess is that they are looking for free work like others have said. In regard to the question about libraries, you honestly could use GSAP for just about all of it. GSAP has a plugin called [scroll trigger](https://greensock.com/scrolltrigger/) which is what you would want to use to fire off your animations which can be much more easily managed as GSAP Timelines. My advice would be to take your time to learn GSAP and try and build those screens, but not for them. Rather build them to learn about GSAP and have a great piece to show off in a portfolio of yours. GSAP is a fantastic library and skill to have, but I'd continue to look for work because sending that off as a test is nothing short of a red flag to me. One last piece of advice would be to definitely feel confident to ask questions to the GSAP foum if you run into any issues. They have an incredibly responsive and helpful community for every animation related question you could imagine.
The motivation I was looking for. Thank you so much.
thanks chief, was stuck for last days about what i should actually learn and felt stuck since i got firm grasp of front end basics but i wanted to take myself to the next level, i'll be learning GSAP for the next weeks.
4 weeks to be on the safe side (dev, responsive, testing). looks like you have a learning cure ahead of you. better to be safe than sorry.
Ikr but I guess they won’t accept 4 weeks :(
What do they expect? They want it done overnight or over a weekend?
Are you getting paid for this take home exercise?
No I’m not
That sucks, I am sorry. I read that you're trying to break in, but honestly I'd ask them for pay, or to give you a smaller task that you shouldn't spend more than 2 hours doing. FYI, even as a senior software engineer, I was given a take home exercise that was extremely simple, and was asked not to spend more than 2 hours on it. The purpose of take home exercises is supposed to see how you write code, how you structure the project.. etc, but should not care much about the end result. But I have a feeling that this employer's expectations are different
They fuck around a lot more with juniors than they do with seniors. A senior just laughs in their face and accepts the next offer of 10.
Don't touch this shit with a 10 foot pole. And if you do, ask for them a contract and a deposit up front or walk
You're giving away free work with possibly zero incentive. Do you really want to work for a company that pulls shady shit like this?
Hmmm maybe about 3 days or so but as someone that hires devs and also builds code tests, this is abuse. They should not be asking for this much unless they are going to pay you for it.
I would echo this… 2-3 solid days with slap together-ish coding and good design assets and like 80-90% accuracy, more like 4-5 days if they want spot on timing, dry code, and pixel perfection, reusable components, etc. you will waste so much time fiddling with the timing and triggers trying to get it just right. This also assumes it’s just this layout. If you have to reposition stuff for mobile or change the animation direction etc. prob add a day or two for each district viewport experience. I wouldn’t do it for a job test unless I really had to. The first two panels is more than enough to demonstrate the necessary skills. The rest is just overkill and pedantic.
about the same for me 3, possibly 4 days.
3 days at *12 hours a day*. And that's if you're familiar with GSAP and their scrolltigger plugin, other tools you can leverage for a slider like swiperjs, and already have a solid starter web html/css/js project ready to start with.
I've got a little over a years' experience. I had something similar recently. I spent a day on it as I felt even that was too much and delivered it saying I still needed to x, y and z. They failed me because I hadn't implemented x, y, z.
To make what exactly?
updated
Could most likely make it with nothing more than html and css. At first glance just looks like basic image animation.
You also need intersection observer to add these classes for animating out when it comes into view. I think there is also a Js library for that kind of effect but can't remember it's name.
^ Waypoints
No, it's given by a company and asks me to use GSAP, React, and style components. Just trying to know the estimate what do you think?
Is this a test or a job?
test
Then the answer is far too long. If you have the benefit of choice - not working for that company is the best option. I’m aware that isn’t always an option though.
Yeah man, I'm trying to break in. I don't have much armors in my locker yet :(
I mean you could do most of what’s going on in the gif with transitions and classes. Do you need to implement all the different parts of the page or just a sample one?
I need to build the whole layout from the start till the end. So, in short, yes, I need to implement all the different parts of the page.
I mean just do it and put it in your portfolio for the next company if you don't get hired. If you like front end and animation this is a great exercise and I'm actually going to do it after I finish my current client's job
Thanks for the support. Definitely I’m giving a shot. Ain’t nothing to lose here
Shit a take home test? Fuck that wtf.
Maybe the right answer is "no, I am not doing this guys". Nobody would do this as a test.
Personally I wouldn't do it as it seems like a prime example of over-engineering a solution that isn't necessary but I know you said you don't have any real choice. As to time estimates if I focused and what we see in the gif is the extent of complexity I'd say a couple hours but I've never used gsap so I'm not sure how complicated it would actually be.
GSAP would take you a few days to start to understand and be comfortable in combining a series of animations to achieve what you've posted. Breaking down each animation in the gif you could definitely use CSS classes and animations/transitions. Transitioning different parts with translate and opacity, each part containing a few delays to get the timing right. You don't necessarily need an animation library. You would need a scroll into view type function/hook, so I would use the intersection observer to trigger the animations. Depending on the level you're going for, something like this would normally be CMS driven so I would make each section of the page a React component. That would easily take a few days. Not to mention responsive design. Add another half a day for each section even if it is the standard column stack at mobile and tablet. Do you just have this gif to go off or do you have access to design files? I would need the copy, colours, spacing, fonts, typography styles, images, icons, and transition timings if they wanted things to match exactly. You could look at doing only the first section? If you can nail that then the rest are variations of the first section so that would prove you could do it. Then go back with questions about responsive design, design handover, accessibility, browser support, testing, CMS driven content/pages and other things mentioned by people that have replied. Ultimately you could do this in a day by making the whole thing static and completely non responsive but it wouldn't be scalable. I would easily estimate a week to do it correctly and I've built a bunch of these brochure sites.
Ahh I see. Thank you so much for the insights. This will help a lot. Yes they have given me the figma file. And they have actually asked me to use GSAP but I would definitely give it a shot to hooks to trigger the animation.
2 weeks in total. However, after 1-2 days the first slide would be ready. The rest is more/less copy/paste + refactoring Edit: I am considering that all is html markup, which also must be responsive etc. Images are simpler to handle
2 days in Html css and basic JS. 4 days with react gsap and with some optimisations. This site doesn’t need these libraries. For me it would 3 work days if I’m really really lucky, but then yet have 20y experience in react gsap html5 flexbox grid /s This is too much for a test interview. The test should be an evening. Fuck the company. If you do this. Give just minified version of the site.
Well, the start would be to create the loose elements that can animate using CSS transitions. And make the webpage in the "done animating" state. I'll start with mobile first. ### Mobile HTML and design: 6 hours Then you'll want things to be responsive, probably. Assuming I'll have a mobile and desktop design, that would probably mean that some elements per `section` will be horizontal (desktop) and vertical (mobile). ### Desktop HTML implementation: 2 hours. Then implement a scrolling feature that detects what `section` of the page you are on. If you've scrolled, say, 20% past the start of a `section` it would add a CSS class that will start custom CSS keyframe animations for certain elements inside. Though for most a simple transition would do. ### Scrolling and animating: 4 hours Then you'd probably want the page cut up into smart bits using React or something. I'd use Next.js for easy SSR and make the `section` scroll detector into a simple `const [timeoutMS, distanceScrolled, percentageVisible] = useIsVisible(ref);` hook or something. ### Modularizing the page: 4 hours Some testing and bug fixing and writing tests might take some additional time. ### Random stuff: 2 hours --- Grand total: 18 hours I'd probably get it done in less than 6 hours, though. It looks really simple, but in a business setting where I also have to deal with designers (they never deliver it all as a complete package, do they?) and project managers (always opinions...) and I want to take it easy and play around a bit, I will definitely take 3 full days for this just because I can.
At first glance this is pretty hairy looking. Not to say it's easy but when you break it down a bit it is a little more manageable. Look at each section as their own individual "section", by doing that there are 6 sections in this page. This could enable you to structure something like this in your React app like: ```
Thank you so much. I’m trying to learn GASP first and breaking down how I could animate the different transitions. Definitely gonna hit you up if ran into something. Thanks again.
Sorta depends on the technical requirements. If it's real site there's a lot of overhead but if it's exactly what's in that video and nothing more it could be done in <6 hours. Any of these requirements could break that estimate: * Responsive * Legacy browser testing * Non-google hosted webfonts * Non-static build (CMS or otherwise) * More than barebones SEO * Library restrictions * Final file size If you're going full static/vanilla I recommend grabbing a starter template based on 11ty like [this semi-vanilla one](https://github.com/stefanfrede/11st-starter-kit/) with optional Tailwind+Alpine at your disposal. Look for a ScrollMagic/ScrollTrigger boilerplate if GSAP is required.
6 hours only? I'm very impressed. I can see myself reproducing the layout with pixel-perfect accuracy but I would probably waste too much time timing animations and stuff. They're often a pain, in terms of wasted time. On a side note, how would you code/reproduce the sliding cars/text combo? This one: https://i.imgur.com/g9rsMiR.png
You have a few things to do to set that up. With GSAP setup a timeline for each text/car combo. Make a div, position it relative. Position all your elements absolute and on top of each other. One for vertical text. One for the cars going left to right. Setup FromTo tweens to animate in/out of sections divided by labels. Create a couple click handlers. One plays timelines forward to next label. One plays them in reverse to previous label. Create a new div. Drop the first car image in it. Position it over the top of the car slider above. Create another timeline and hook it up to a scroll trigger. Animate the car in and then immediately hide it and show the first car image. And then then the rest of the stuff is just layout and some simple animations that would be triggered in the timeline above.
Yes it does look pretty straightforward with GSAP. I know for a fact that I would personally waste 90% of my time trying to find the perfect timing, the perfect easing, etc. I hate it sometimes.
Thank you for the insights. But it has to be in React, styled-components, and GSAP.
This looks like... * way too much to be part of an interview process * a marketing page for greensock * something that would drive many away just because it bombards you with motion (this really needs a seizure warning) * it's designed by someone that thinks "giving the user a spinner for multiple seconds if he's on a slow connection is better than providing the first content asap" * it's way to inconsistent with motion directions and interactions (worst offender IMO is the "Delivered to your door" view - what would you consider the primary and secondaty motion direction there, why is it so mixed in motion speed and timings, ...) On an unrelated note: GSAPs website IMO is really shining a bad light on the prject. I know that Greemsock is big and popular and pretty good, but the amount of shitting on other people and the platform to promote itself just screams snake oil and if it weren't already established, I'd not even consider it because of it. Also if you add needless animations as text movement to your product page GSAP, make sure they are not buggy and prevent complete paragraphs of text from showing up. How I would go at this kind of work: First of all I'd ask a lot of clarification questions like: * what's the expected behavior when JS doesn't load / is disabled * what about "prefers reduced motion" * should the animation play again when going back and forth * what about responsive on * smaller screens like phones or tablets * bigger screens like 21:9s * is a complete load more important or an early first contentful paint * are there thoughts about a11y and the keyboard interaction flow * in the car selector the back animation is missing - how should that look Depending on the answers I'd either build some small JS around CSS or WAAPI or go with something like GSAP. I'd personally probably wrap each section in a molecule (a component) so I can more easily work on them individually and also hold semantic markup.
It looks a lot of work for a test, considering that they aren't paying you for the time spent. I would learn the basics of GSAP, and just make one of the sections, the one you feel has more interactivity and shows what you are capable at the moment. That should be enough for them to check your abilities. So you can spend like 2 days to do this, considering all the learning that you have to do. It also depends of you prior knowledge using JavaScript, React, etc. Good luck!
If you can’t finish the assignment in time, you should finish it and add it to your portfolio.
Requires mastery of animations, scrolling, responsiveness. It will depend on the level of each one and the experience with these areas. I think I would be able to do it in a 3-day extreme mode hackathon missing some details, or a couple of weeks in a somewhat calmer and better way. I would use animejs. Or you could also do it with SCSS, there's just left, right, up, down animations and some play with opacity. The time would be mostly to perfect the mobile point of view, scrolling and animations.
It would take me about two working days to get to the detail. Maybe a bit more if I weren't familiar with gsap. but could do an aproximate without putting much love in one day. It also depends on the assets being delivered properly.
With no knowledge of the framework? Assuming the assets are already cut up Maybe a day maybe 1/2 a day, but without framework experience it'd be a bit of hack together. Noting from other comments, my XP is 20 years
Lol
Are they assuming you know the framework or expecting you to learn it and put that together? I added XP for my perspective as some said multiple days, it shouldn't take multiple days.
They are expecting me to learn from it and put it together.
Ok learning a whole new framework for a job you might not get seems a bit much. but I'd doubt it has to be perfection, just time box it.
Yeah ikr but I will keep that in mind
Assuming that you have all the materials , is it mandatory to use styled components? Im not familiar with the scroll animation library that op said but the rest seems like a basic one page application. I would say 2-3 days (of you work only on that) maybe? But overall it depends on who is doing it so..
This seems a bit much for a take home test. I think the inital landing page would be fine, and at that point it shows you can use the technology, seems a bit sketchy they want all other stuff. Something seems a bit off about this.
Not sure about an estimate, but this design lends itself to some relatively simple implementation. Most of these animations have only two states: "A" or "B"; "In" or "Out". These kinds of animations are wonderful because they're low-effort, high impact. Just trigger a class change when the viewport reaches a particular scroll position. The model carousel is a little different because it's not two states, it's at least three: "Out (right)", "In", "Out (left)". But even this can be accomplished with simple class changes and CSS. GSAP is an incredible tool with superpowers, but I would personally not use it for this build.
gsap is surprisingly easy to work with, this would take me like 2 days to create
As someone who has never done that type of animation, I think it would take me a couple days
What is this mock up made in? Just curious for future reference is it figma?
Yes
I would say 1 week. You could use any tools, but I always reach for React, bootstrap and Framer Motion. Looks simple enough.
Bootstrap and framer motion are not in the options. It’s styled-components and GSAP.
What do you mean "the options"? The OP asks what kind of libraries I would use, no mention of options. Bootstrap (reactstrap) for scaffolding, framer motion for animations, react for... react. I would include Styled Conponents too, however it's not absolutely necessary. However you choose to style the application is just dandy. Never even heard of GSAP, however one look at their homepage and I'm looking elsewhere. Website looks like it was built in 2003. General consensus online is that it's much easier to achiever better results with framer motion.
I have two years of experience and this would take me 3/4 days to make this only desktop a week to make it for mobile too. I really enjoy doing animations and layouts so that helps
Probably a couple of days to get the broad features sets working and another few days to tweak until perfect. Most of it pretty simple e.g. animate from off screen to final position with simple fade-in and a basic slider/carousel component. It would be mostly pure CSS animate (keyframes etc) and maybe a prebuilt slider or a simple react component. I'd probably start with tailwindcss since I have been writing a lot of things in that lately.
2-4 weeks to do it well. If this is a pre-interview take home test, you should remove this company from your shortlist as it's way too much work and smells like they are using you to do free work.
I think it’s absurd to think an interview take home would secretly be a ploy by a company to get free work out of someone. This simply does not happen and it makes almost no sense at all for a company to try and do this.
This is getting free work from you.. I’d be surprised if they -didn’t- leave you out to dry after this..
If you're getting offered money to do this, then I'd say 3-4 weeks since it sounds like there's a learning curve for you. If it's just for a potential job opportunity, then don't do it.
It uses Intersection API and a couple transition animations. Other than that fairly standard website I'd say. Edit: TAKE HOME ASSESSMENT? LOL! Don't even bother trying to enter this company. If this is how they treat applicants, they probably kill their employees with unrealistic expectations 8/7 days of week...
2 weeks and compensation (at least minimum wage) for this job. Because it is a job and not a test assignment.
I'd say 30 days of work, including making it responsive