We're new here on dribbble and we've been waiting to show you all this.
We've been super busy working on a fresh look for Si digital, this has included the creation of new branding and a website to accompany it. The site has loads of fun illustrations and animations, above is just a little snippet.
Thanks for the feedback @David. This was something we did consider, but the the darker pink seemed a little too high contrast when flowing through the tubes.
btw @Si digital it's a ini mini minor detail but the logo at the footer isn't horizontally aligned. (or it's a mindfuck because of the wave border) When following the pipe trough the end you see that it's 2/3px off.
We used jQuery animate for the liquid, using it's step % to work out where it is in the tube, when it's complete and if it needs to trigger any other animations on it's journey.
The beaker, bulbs and heartbeat are all canvas. CSS3 keyframes for the pulsating A/B split choices.
32 Responses (page 1 of 2)
Pro
Si digital
We're new here on dribbble and we've been waiting to show you all this.
We've been super busy working on a fresh look for Si digital, this has included the creation of new branding and a website to accompany it. The site has loads of fun illustrations and animations, above is just a little snippet.
Come and check out the site in all it's glory here. It's responsive too, but be sure to view it on your desktop for the full interactive experience.
5 months ago
Pro
Glynn Smith
Loving the new site, guys (and girl!). Fantastic work.
Can't wait to see what you do next.
5 months ago
Pro
Simona Merlini
Nice, welcome!
5 months ago
Pro
David Jakes
Welcome!
I like the way in which you pulled my attention down through the different sections. Very original.
One small point... think you need to match up the pink so it is the same in the first flask, in the animation and in the footer.
5 months ago
Pro
Si digital
Thanks for the feedback @David. This was something we did consider, but the the darker pink seemed a little too high contrast when flowing through the tubes.
Glad you like it!
5 months ago
Pro
Greg Dlubacz
great work guys. Welcome aboard
5 months ago
Pro
Si digital
Thanks @Glynn Smith, @Simona Merlini and @Greg Dlubacz. :)
5 months ago
Pro
Luboš Volkov
awesome!
5 months ago
Pro
Eelco Guntlisbergen
Awesome website, awesome animations, awesome whitespace usage... i love it!!
5 months ago
Pro
Si digital
So pleased you guys like it. @Eelco Guntlisbergen and @Luboš Volkov :D
5 months ago
Pro
Tyler Fry
Awesome looks great! Amazing animation it took me through the whole page and I actually read most of it too!
5 months ago
Pro
Tom Brennessl
Saw the whole presentation, looks great! Welcome to Dribbble :)
5 months ago
Pro
Eelco Guntlisbergen
btw @Si digital it's a ini mini minor detail but the logo at the footer isn't horizontally aligned. (or it's a mindfuck because of the wave border) When following the pipe trough the end you see that it's 2/3px off.
5 months ago
Pro
Morgan Jones
Love this guys :) Very well done
5 months ago
Pro
Si digital
Thanks @Eelco, we're looking into fixing it. :)
5 months ago
Pro
Mike Busby
Nice stuff, welcome to the site!
5 months ago
Pro
Spencer Hamm
THIS IS AWESOMEEEEEEEE
5 months ago
Pro
Kyle Schmitz
Gorgeous. Great job.
5 months ago
Pro
culas creative
Wauw!
5 months ago
Pro
Mladen Zivanovic
Wow! Great job guys!
5 months ago
Pro
Si digital
Thanks so much @Morgan, @Mike, @Spencer, @Kyle, @culas creative, @Mladen and anyone else we might have forgotten. :)
5 months ago
Pro
Giorgio Pia
well done! welcome to the game!
5 months ago
Pro
Benjamin Roesner | 6Wunder...
Great idea and lovely animations. How do you create the pipe animation?
5 months ago
Pro
Si digital
We used jQuery animate for the liquid, using it's step % to work out where it is in the tube, when it's complete and if it needs to trigger any other animations on it's journey.
The beaker, bulbs and heartbeat are all canvas. CSS3 keyframes for the pulsating A/B split choices.
5 months ago
Pro
harwen
Nice
5 months ago