Zoom on Image, Crossfade to new Scene glitch


#1

Hey all,

Hype is awesome, finally using it on a full interactive project. However, I’m trying to get a desired effect and its not working.

Basically, I’m zooming into a room on a house and the image is flat perspective, and I’d like to crossfade to the next screen where the background image is that same room from 2 point perspective (psuedo scene rotation hack).

However, on crossfade, it seems to flip back to the unzoomed image for a couple frames, instead of a smooth crossfade.

Any idea on why it does that, and can I prevent it?


#2

Is the attached what You had in mind?

The two images I used are of the same room with the same perspective. The color is processed differently for differentiation.

zoom_transition.hype.zip (2.1 MB)


#3

Hey Jim, thanks for that.

Yes that’s very similar, but there’s a few differences, I’m not sure if it’s in there at all.

  • It’s not the main timeline that causes the zoom, it’s a triggered timeline.
  • It doesn’t just zoom and scale to the center point, it also translates down and to the left.

#4

@LucasKA
Would You post your example? That will be the best way to see your exact set-up.


#5

Sure, here it is.

So watch on the zoom into the kitchen before it changes scenes, it will flash back to unzoomed state before cross fading.

I’m getting this on all browsers and in Hype Reflect

PalmOilPervasion.hype.zip (783.9 KB)


#6

@LucasKA
It’s just after midnight - I will look at this tomorrow - though perhaps someone else will respond first.

But I did give your file a quick scan and I was curious about two things involving the Background - not necessarily connected to your issue:


  1. When I ran the Preview of it the zoom was quite jerky & I noticed that You are using “Width” & “Height” to enlarge the Background. I tried using “Scale” instead and it was a much smoother rendition. Is there a particular reason why You are using "“Width” & “Height”.

  2. I couldn’t divine the purpose of the innerHTML. So I deleted it and everything appeared to work the same.


#7

Pure unadulterated noobdom. However, I just tried scaling it, and in responsive mode, it doesn’t move to the center of the room, which is not what I was going for. :frowning:

What InnerHTML are you referring to?


#8

You have an animation (in the timeline) attached to the innerHTML of one of your objects. I’m pretty sure it’s nothing hence why it doesn’t effect anything when deleted. Perhaps it was an old idea that wasn’t completed.

Nice! sounds interesting. I think when you scale you still have to move the background so it finishes where you want it.

Also, try un-pinning the background from all sides so that it doesn’t try to adjust itself when being scaled. I think this will get rid of your glitch.


#9

Unpinning the background fixed my issue with the positioning of the scaling. Thanks.


#10

@LucasKA

I’ve attached a “v2” of your Hype document. To me it looks like the effect You are requesting. There will be adjustments needed, of course. This version is intended to (hopefully) offer an idea of the way ahead. I also like the theme of what You are creating. We are living in a society where consumerism has a paucity of feedback loops re: the consequences of our purchasing decisions.


Notes:
Used “Scaling” and created a new motion path to match the Scaling.
And as @DBear suggested unpin the “Background” image.

Something unusual happened - or maybe this is typical, I’m rather new to this program - when I adjusted the scaling of the “Background” image in the “Zoom House” timeline, the “Background” image in the “Main Timeline” was also switched to the max scaling used in the “Zoom House” timeline (200%). I had to go to the “Main Timeline” and reset the “Background” image to 100%. It took me a bit to figure out what was going on.


#11

I think you may have forgot to attach it?

Main timeline plays automatically, so I think most things are on Sub-Timelines if they explicitly triggered.

Kinda weird.

Thanks for the positive feedback. This is part of a larger Deforestation Campaign I’m working on, I’ll link it when I’m done.


#12

think you may have forgot to attach it?

Oh! that part… ;->

PalmOilPervasion_v2.hype.zip (721.3 KB)