2.3 Sprint 3 - JeanyDeVries/ilojo-bar GitHub Wiki

Talk with Joost

We showed our progress to Joost and he was happy with how it looked. Before the standup, Jorn and I struggled on how we wanted to do the zoom in of the panels. Thankfully before we even asked Joost came with a solution. He said that using SVG's with the viewbox could help with a nice animation plus greensock is a library that makes it even easier to make. So that's something that we need to take a look at.

Talk with the client

We had planned our talk on friday, but sadly our product owner was not there on time so we rescheduled to monday. We have made a few improvements from the last meeting. We added a zoom in of the building where you at first can see the environment, this was something Femke really wanted. She was happy with the result on how it looked. We also added the panels that open up with scrolling which is exactly what she had in mind She said that we have made it on how she envisioned it, but even better, so I was happy with how we were doing. The paralex effect on the storyline was something she found funny, which is exactly the reaction we wanted. We wanted the effects to be a fun and suprising effect on the story page to make it more fun. The only tip she gave us was making the stories look more interesting. It is not just text without any images or styling (except the wrecking ball). So that is something we need to take a look at for the next sprint.

My part

For me it was a bit of a short week, sadly because of some mental issues I had going on.

Navigation

A thing I added was navigation to the pages. The user should be able to go back to the last page visited and go to the home screen by clicking on the logo. I used history.back for it, which works perfectly. The only struggle I have with this, is that it uses Javascript. This way people who disabled it cannot got back with this button, but I think that is a sacrifice it needs.

    const goBackLink = document.querySelector(".goBack")
    if(goBackLink){
        const historyGoBack = () => {
            window.history.back()
            goBackLink.removeEventListener("click", historyGoBack)
        }
        goBackLink.addEventListener("click", historyGoBack)
    }

Greensock

The other thing I worked on was adding a wrecking ball scroll effect. After looking at some tutorials from greensock I tried it and it worked! But the issue was that the text was set in different spans from prismic but I couldn't set my element in between because the HTML element is made. So Prismic needed a rework.

https://user-images.githubusercontent.com/44086608/174760290-c1ce1de6-faa8-4456-97c8-32db7932199a.mp4

For the animation I used scrolltrigger. On the trigger I grab the .wrecker class. The start and top or the position on where it starts and ends the scrolltrigger. During the scrolltrigger I move the wreckingball to the right with a rotation. Greensock is to my suprise easy to use without a lot of code. You can create your own animations with scrolltrigger for each element you want to.

gsap.registerPlugin(ScrollTrigger);

gsap.to(".wrecker", {
    scrollTrigger: {
      trigger: ".wrecker",
      scrub: 3,
      start: 'top top',
      end: 'center top'
    }, 
    ease: "ease-in",
    margin: '0 0 0 150',
    transform: 'rotate(-30deg)'
  });

3D model page

We eventually made the decision to add the 3D model to a seperate page. This way it could easily be stashed. Also we would add a button to the home page which makes it clearer that you could see the 3D model. The only issue now was that you needed to wait a long time to see the model, so I added a loading bar to give an indication to the user plus that it works. Sadly it would go to 100% quicker than that the scene is loaded. I first used the loading percentage that I got from loading the model, which is being used right now. But I was not happy with that it went to 100% so quickly even though it was not finished. I then looked at a loading manager (https://threejs.org/docs/#api/en/loaders/managers/LoadingManager). Sadly it just shows the assets being loaded, which for me was one. the model. Sadly this gave the same issue. So I accepted it for how it is. Plus seeing that it is on 100% gives the people some more patience to wait longer :p.

let percentage = (xhr.loaded / xhr.total) * 100;
var roundedPerc = Math.round(percentage * 10) / 10;

loadingBar.style.width = roundedPerc + "%";
loadingBar.innerHTML = roundedPerc  + "%";

https://user-images.githubusercontent.com/44086608/174762203-3fd11331-3024-4b24-8d45-dd0efb79a4c2.mp4