Transparent object is visible in web browser

Exporting & Previewing
1

I inserted an image and animated a fade in effect when it is scrubbed. The image transparency goes from 0 to 100. When I view the animation in a web browser the image isn't transparent, but when I click the scrubber it becomes transparent. I there anyway to make it transparent when I first launch it in a browser?

2

Do you think you could share your document so we can see what you're seeing?

3

Hi Daniel, I'm very new to Hype. What is best way to share my document.

4

It it's under 3MB, you can make a zip file of your .hype document and drag it into your reply here. Or, you can share it with a file sharing tool like https://wormhole.app/

5

Car test.zip (228.2 KB)

6

The first nugget to know is that when the playhead is over a keyframe, Hype will only modify that keyframe's value. If the playhead is not over a keyframe, Hype will offset all keyframe values. This is most useful for something like a position, but can sometimes work against properties like opacity.

It seems like what you want is the red car to start hidden, and dragging the slider reveals it. To achieve this:

  1. Select the Main Timeline from the timeline popup
  2. Select the red car, and change its opacity to 0%. This is "off keyframe"
  3. Select the Red Car timeline from the timeline popup
  4. Move the playhead to the first keyframe for the red car - you'll now see this is set to -100% opacity, which happened due to the offset.
  5. Change this value in the inspector to 0%.
  6. Move the playhead to the second keyframe for the red car's opacity
  7. Change this value to 100%

Then you should be good to go.

8

Thanks Jonathan. Awesome, that works perfect.
I very new to Hype, can you advise on some beginner tutorials for Tumult hype, javascript.

9

We definitely recommend items on our tutorials page:

Below videos are courses and resources that are good. "A Book About Hype" has a good amount of JavaScript coverage as well.

There are some forum posts here for beginners guides; it is hard for me to recommend since I haven't used them (it has been a while since I learned javascript originally).