For the main page and Prosphere, the video is just supposed to be a "nice video banner", that only should function as a backdrop on larger screens. But the showreel should be available for all platforms.
Not sure what I should look for? I see the code block, but there is no animation? Great if you can fix the showing accents.
Great 
Well, almost done. http://clockworkstudio.squarespace.com/click it's still missing a better responsive layout for mobile. And I was thinking in adding a magnifying icon instead of click name for more information. In the same way as I'll add that X soon enough.
For this test, you can tweak at your will the "people gallery". I decided to go with it, and I think it's looking good!
Tomorrow or maybe Thursday I'll record a video explaining everything I've done, to address things such as item (2) you just asked there.
Now, am I missing anything else?
Hi, I have visited the link, (click), but I am not sure what I should look for. All I see is a large image with some text beneath. Regarding the "on hover" and "on click" function, should that be working now or is it supposed to look like this for the moment?
Magnifying glass is a great idea!
I have have really no clue about the magic you do behind the scenes. So if there is something I´m missing regarding text-animation and onHover/OnClick, please to a video that show both me and my client how to best deal with this.
Regards,
Tor Martin
I'm sorry. It's working on Google Chrome. I'll be fixing that soon and probably finish the rest by tomorrow, with the video. This is how it should look like, for hovering:
And for clicking:
I just really have no clue where I got that baby photo from! 
Aha! Now I can see both the text-animation and the hover/click function - great work indeed!
2) I hope you can make sure that the marker is both blinking and is visible. (And those accents). The animation is looking good.
• how hard is it for my client to change the sentences?
• how hard is it to change the animateIn and animateOut speed?
• how hard is it to change the marker behaviour? Faster/Slower blinking etc.
3) Its nice to see how this is evolving!
• How hard is it for my client to change the text?
• Picture size, any constraints here or could we go for square pictures if the client would like that?
• The magnifying glass is a nice touch, how hard would it be to change the cursor into "something" that informs the viewer about the ability of clicking on the name. I.e. when the cursor is hovering the name, the cursor changes to magnifying glass? Please give your thoughts here on best practice. Its important that the viewer understand that the names are "clickable". But if we are able to not have a "you can click the name for more information" disclaimer, that would be nice. I like to keep it smart and simple.
Really great work so far!
Regards,
Tor M
I'll answer all "how hard" questions within the video tomorrow.
Already fixed the bug. It wasn't working on Safari, iOS and IE.
There are basically no constraints for picture aspect ratio, you can go for anything. Picture size is constrained only in height, to keep it more consistent.
I was already planning to change the cursor into a hand as usual. That's not to say I have a flawless checklist, I still pull these things out of my memory and taste... But I like your idea. Sure, I'll change the cursor into a magnifying glass as well!
It still have to have one printed on screen as suggested before for not all screens will have a cursor (i.e. mobile). 
By the way, I still have to fix the layout for phones.
So, here's the video, and I believe most of the work is now done:
You can find files for basically everything that was done in here: https://github.com/cauerego/cregox-scripts/tree/master/squarespace
As I said in the video, there are still a few things to do, and I'll be finishing them between today and tomorrow. Take a look, and let me know if there's anything missing.
If it's fine, I believe the next step will be implementing them on the main page. You can go ahead and add the people click where it is, and tweak the animation text as you wish, we can adjust it all later. Don't be afraid of losing anything, since all the work is very well saved on github.
There is only one catch on implementing there... The scripts under the page injection won't work on the index, so we'll have to either copy all of them together into the index or in the global site code injection.
Well, I hope it's all finished now!
Except, there was a bug with hovering mouse on tablets, so I removed it for now. Take a look, maybe if you like it better that way, I won't even need to bother fixing it!
But I'll check on that later anyway.
Waiting to hear from ya!
Hi, I have been through some crazy busy days, and taking the weekend off. I'll look forward to get back on this on Monday!
Thank you for your great service so far 😀
Hi,
Thank you for making the tutorial, it makes it all much clearer.
Here is my feedback on the current progress:
1) I reckon this is how it should be. I totally agree about the "showreel". We will remove the video, and have 4 links, that each go to their separate showreel. When watching your tutorial, my hearing was almost shattered to pieces when you started to play the showreel. What an annoying sound..
2) This looks nice, but the marker is rather big. This is just a design issue, and knowing the client, I guess less is more. Could you change to a marker that is more like a "text-marker", and not like a "code marker"? Reminds me of an old movie, I think it was called "wargames".
3) There is no hover function (tested on safari and chrome), but I can click the name. Not actually sure if we need the hover function..?
Here is a proposal for the final design:
The images will be 1500px wide, so it covers the whole width. Would it be easy for you to implement a new design along all platforms?
I notice that the magnifying glass does not change into the X before you move the cursor. I.e.
• you click the name
• move cursor over image - magnifying glass appear
• click picture - cursor is still magnifying glass. Does not change until the user moves cursor.
This is nitpicking, but its a part off the "experience" the visitor has on this site.
Is the magnifying glass and the x easily swappable? Is it a little image that I could change out?
Im looking forward to show this to my client on Wednesday
Regards,
Tor Martin
3) And here the separate elements:
1500px x 479px
Hover or first-click
Second-click
Second-click (no text hardcoded into the graphics)
Regards
Tor Martin
Yeah, I wanted to see what you'd say (or not say) about the blinking cursor!
Changed it, I think this is what you meant. All I did there was moving the CSS from the Code Block into Custom CSS and changing width from 0.5em to:
width: 0.1em;Being a movie with Matthew Broderick, I've got no clue if I watched it or not, but it's on my watchlist now.
And I wasn't very clear about the hovering, but I meant I did remove it completely. If you also feel like it's good this way, I was finding the hovering too bothersome so I do agree it's probably better off without it!
The mouse cursor not changing before moving the mouse I haven't noticed before but looks like it's a browser issue. In fact, after a while it just stopped happening here (maybe that's why I haven't noticed it). But then I can see the same issue on Safari now. I'll investigate more and get back to you.
We can easily change the cursor icons. It's just a matter of throwing the images there. I've added a link to them under cregox pages. You can just change those link files to change the cursor.
As for implementing this new design, it would be quite tricky, and I'd need to charge more. I gave it a good shot, but it's just not that simple.
Tweaking the gallery image to fill up the screen like that is more complicated than it may look, by just handling the pre-formatted HTML which is all we can do.
The hardest part, however, is probably the new text placements... It'd also be a lot more hackish to input data than what it is now. Now you simply add title and text as you wish. On the new one we'd need a separated subtitle and a contact info area, which don't exist. One option would be choosing a few special characters. In any case all that sums up to a lot more work.
And it would be also hard to make it responsive. Picture reducing the screen size down to 320px for iPhone 4. I can't even picture it right now.
I see there's no more icons (magnifying glass on the first-click and X on the second), though. Is that on purpose? Removing them would be very easy, but I think it would be a worse UX on mobile. It's already not clear we can click on names there.
In any case, see if you like what I've made so far or if you rather I revert it back. This current design also work without a problem on smaller screens:
We can easily change the font if it's a web font. I just have no clue on fonts or which one you're using.
Hm, I had written a long answer and I managed to click on a image on this thread. And when I went back, my answers was gone..
I´ll try again.
I think we need to compromise design vs easy update for client. The current solution, where the client can upload a picture and edit the text is good. And the changes you have made is not bad at all. I can see that its a nice solution regarding smaller screens.
A few questions though:
1) The white line on the image above, I reckon that is a easy fix to get rid of?
2) This is the text that I enter into the text field, but when shown on the site, the text does not follow my paragraph.
The text should be able to use the whole container. And not have a text break two thirds on the way. (Hope that you understand what I mean. Its sometimes hard to describe what I want to achieve on a second language)
3) On smaller screens, the picture get "squeezed", the ratio changes. The image needs to be at a constant ratio.
4) On smaller screens, no need for the "two steps". If the user clicks on the name, just goes straight to the picture + bio.
5) You're absolutely correct. We need to keep the icons for clarity. Can we also change them as easily as the cursor icons?
6) How "hard" is it to have two pictures? One picture for the "first click" (Character facing left), and another picture (character facing camera) on the "second click"
7) No need for Hover, agree with you that its not needed.
8) Great work on the text animations
Regards,
Tor M
9) I tried to implement the text animation on the "studio" page and I failed miserably
Regards,
Tor M
That's weird. After a few seconds you stop writing anything, it will automatically save anything you wrote on the server. So, even if you go to another device and log in with your account, your draft should be there.
See the saved there? If you write, stop writing for about 2 seconds, and pay attention to it, it should show up as saving... and briefly after, saved.
Anyway...
I was aware of a few issues there (almost none you brought in though), but didn't want to bother fixing them if you'd want to change the layout again! 
Fixed. Note to self: nowadays there are actually so little problems with cross-browser compatibility (compared to the old days) in most things I do that quite often I forget to check / test those! But this little white line fix I've found, in specific, is much more complicated than it may seem... I still have to find a better way to test it.
Fixed. On yet another side note, I was planning on making everything below --- into a different style, that grey area you wanted, but I figured it would not look too good in this new design.
Aware and fixed. Also hacked a fix on the little disproportional alignement on small screen.
I'm not sure that makes sense, but I'd have done it anyway if it were simple enough. Maybe it makes more sense to remove the first step all together, and I'm laughing while I suggest this, but that's the way this kind of job goes.
I'm using font awesome there, in the code block. You sure can change them, just not as easily as the cursor icons. The relevant part of the code looks like this, for the magnifying:
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>It could be replaced by an <img> but we'd need to change jQuery code for that as well. This is all simple enough, if you want me to do it.
Right now, quite hard. Image galleries don't allow for thumbnail, which would be an easy hack around solution. The whole problem with tweaking anything is still keeping it easy for the squarespace admin to use it.
All this could be very facilitated by going with developer mode, though.
I still think we're missing an UX for mobile, so users can know it's clickable. Maybe a little icon beside each name, making them <a> style or, last case, a simple (and sad) written instruction on the top "click to see more". By now you probably know I just find it so much better UX when there's no text necessary!
Thanks! 
I sure can do it, but if you do want to do it yourself I need more specifics on what have gone wrong. Your call.
Waiting for replies on 4 and 9, I suppose.
4) Your call What do you think? Is it a little cumbersome the way it is now? That you have to click two times for information? Im not sure.
9) Yes please help me I copied all your code to the "Studio" page, but the text animation is not working.
The studio page starts with "CLOCKWORK ER NORGES MEST EFFEKTIVE REKLAMEFILMSTUDIO" This should not be animated in, but the rest should. I have used a code block and copy/pasted your code, and also doing this in the "settings/advanced/PAGE HEADER CODE INJECTION". But still no animation..
Yeah, I actually think the first step only made sense while hovering. It is a little cumbersome the way it is now. I could bring hovering back for big screens as well. But if it's my call, I'd try both, see what's best and then you tell me what you think. I'm actually going to do that...
As for the animated text, my bad. I should've just looked there! Now, there were 2 issues there.
The first was a bug on my script. Fixed.
The second one was the catch I've mentioned before:
So the way you've done it, it will work only under /studio, you see? This wasn't working before because of the first issue. I think you knew that, so I've left this second issue on, which looks like you would have solved if it weren't for that first issue there.
I've also fixed another issue with the latest "hack fix" I've had done for that weird accent behaviour.
On a second thought, for today I'll keep it simple. It's without the first click now. Let's see how that goes and if we need to do any further work.
Yes, lets try I will present the site to the client tomorrow.
Can you help me with implementing the people click gallery also? You could just do Andre De Young, I´ll do the rest.
Could you also take another look at the "studio" text animation? I tried to add another sentence, "Clockwork er norges mest effektive reklamestudio^2000" But it would not animate the new sentence, it only respected the "^2000" pause.
And when I removed the sentence, the text animation stopped. I may have messed something up..
Cool.
Taking a look at studio text animation now... I think that's getting way more buggy than it should be. I can already see it's something related to the previous bug.