Loading ...

Responses by Christoffer Klungerbo, 3-D designer; Christopher Køltzow, creative director and digital designer; Marius Nohr, developer; and Linda Tiller, producer, TRY Apt.

Background: The goal of this site is to provide visual information about the health effects of cannabis on young people. As part of a larger social media campaign, the site features banners and videos that explain the effects in a casual, fun way. We hoped to offer a visually appealing way to inspire young people to take a second look at information that they feel they already know.

Core features: The 3-D elements. We emphasized the smooth visual animations and responsiveness while scrolling to keep our target audience’s attention. The blue, clinical client profile is used to not only give the site and elements a distinct style but also to convey the neutral stance of the clients on the subject.

Favorite details: How the scrolling 3-D animations turned out. We got some really nice parallax and immersion from some of the scenes.

Challenges: We faced a lot of struggles in making the site work responsively. Combined with the 3-D scenes and text, the scrolling turned out to be quite complicated to pull off, as the 3-D elements ran independently of the text. The text also had to withstand being translated into different languages in real time and still maintain the overall layout.

New lessons: With sites like this, all you want to do is go bananas with 3-D, animation and interactions. But responsiveness in WebGL is a lot more finicky and tough to do than we initially anticipated.

Navigation structure: Navigation is kept simple. Our main purpose was to create a linear story, so scrolling is the main means of navigation. We also have a chapter menu on the right to help show visitors where they currently are and enable them to jump around if they would like.

Technology: The site is purely a front end. We used three.js for the rendering of 3-D assets. Animation of the text and 3-D assets were done using GSAP. All systems—scrolling, shaders, translations and tracking—were built from scratch using good old HTML and JavaScript with Webpack.

weedensenteret.no

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In