Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

Premium Features

Download Video

Always Show The Globe On Load

Published 4 months ago

Another bug you may have come across also occurs on page refresh—whenever we refresh our page, the globe doesn't show initially, it only shows as soon as we begin to move our mouse.

This occurs due to our use of gsap.to(). If you look at what we are setting our globe group's x and y rotation equal to, you'll see we're assigning them values that are calculated based off our mouse's x and y properties. Whenever we refresh the page, these mouse x and y properties are initialized as undefined. If we try setting our globe group's rotation value to something like undefined, well, the globe won't render, thus we get the issue where there's nothing to show initially.

To fix this, all we need to do is set our mouse's x and y property to something other than undefined to start, or we need to wrap our gsap.to() function in a conditional that checks for mouse.x or mouse.y to be set:

Solution 1
const mouse = {
  x: 0,
  y: 0
}
Solution 2
if (mouse.x) {
  gsap.to(group.rotation, {
    x: -mouse.y * 1.8,
    y: mouse.x * 1.8,
    duration: 2
  })
}

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.