Shukur
A slick crypto wearable site packed with some impressive functionality
.png)
Shukur is a world-first cryptocurrency powered tipping system - their site needs to be as slick and functional as their product. I was approached to create an ambitious site with a bucket-load of unique sliders and interactive elements, and despite various challenges, persevered to deliver a flawless, responsive site with no stone left unturned.
What did I do?
I built the entire site, including the various custom solutions needed to achieve the functionality proposed by the agency. A lot of these sliders are solutions I have not created before, so I had to figure out how to best utilise Swiper JS and GSAP to achieve what was being proposed. One of the sliders is comprised of 2 sliders, linked to have a synchronised functionality - making this as smooth and flawless as it is was a challenge, but that's what I life for!
In addition to these clever solutions, there are various animations to give the site a smooth feel, from parralax, to GSAP text animations and more.
ONE FEATURE NOT TO MISS...
If I had to highlight one feature from this site and say 'That is worth checking out!', I would say the slider you see below is a really stand out feature. It's super smooth and functional and I love the variety of glows underlayed to differentiate each feature. Initially, I built this as a slider with Swiper JS, which is the industry leading solution for smooth sliders, but even this was flawed and I kept encountering bugs. In the end, after much trial and error, I used GSAP to animate the sliders movement and add/remove classes to activate the right items - this helped keep the items synced up and the animations seamless with no jittering or bugs.
call me, baby
I'm looking for a challenging new position that will help me squeeze out the best of my creative juices!
If you like to sound of a web designer, developer and graphic designer rolled into one whacky human , then I'm your man.
Don't hesitate to contact me - I'm eager to hear from you!
%402x.svg){kind=icon}