New project: Shift-Up Consulting

[heldercervantes]

http://shift-up.pt/

Shift-Up is a consultancy company from Portugal that specializes in government incentives and financing.

This is my first project using ProFields and RockFrontend, and I can't really believe how long it took me to start using both. Profields' InputMatrix is a huge step up from my previous custom module that I hacked together using file selects and custom field visibility. And RockFrontend, just by getting latte in the mix, makes everything a lot more polished and professional.

The project is a fresh start from the previous old Wordpress solution they had, taking care as to not harm the SEO standing this site had built up with all its content. I started out by writing a content import script that took hundreds of pages from the oh so messy WP export and turned them into neat PW pages. I also had to handle the URLs in the process, ensuring that the old unstructured WP links would be fed to the Redirects module. So the focus here was more on carrying over the content without having to rewrite everything, and now that we're here, when new programs come up we have a platform that can properly grow and add new layout solutions and features.

[Stefanowitsch]

I love the text-reveal animation for the headlines. Really neat! 

How did you approach this feature? It seems that every letter in the headline text gets wrapped inside a <span> element via JavaScript and is then animated via CSS transforms?

[netcarver]

@heldercervantes Very nice. Perhaps a little more line height needed on .type-title, to stop the descenders in headlines getting cropped? (1.2 worked for me in Firefox)

[heldercervantes]

On 8/11/2023 at 2:56 PM, netcarver said:

@heldercervantes Very nice. Perhaps a little more line height needed on .type-title, to stop the descenders in headlines getting cropped? (1.2 worked for me in Firefox)
 

That's a glitch on my animation script that I still have to improve 😄 It's on my todo list

[heldercervantes]

On 8/11/2023 at 11:30 AM, Stefanowitsch said:

I love the text-reveal animation for the headlines. Really neat! 

How did you approach this feature? It seems that every letter in the headline text gets wrapped inside a <span> element via JavaScript and is then animated via CSS transforms?

It's my own script. Basically I'm identifying every text to animate with a data-attribute. Then my JS starts by breaking each word into a div with overflow:hidden and each letter in a span shifted down and incremented css transition-delay. Then, an intersectionObserver detects when it comes into view and adds a css class that changes each letter's position back to zero and the transition-delay makes them appear one by one.

It's a cool approach and practically a snap-on script that I can reuse (and have done so already) on other pages. It still has that error @netcarver pointed out, though.

I also have something similar for the images that makes a fade-in reveal effect.