CSS & Javascript Transitions

Q&A about the latest versions
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Wed Aug 12, 2020 10:23 pm

I was playing around, seeing what I could all do with this software. A little bit of javascript, a little bit of CSS and you can make some cool transitions. Here is an example of what I came up with. Each node has a different transition. This is meant to show the transitions, not the property. It is for use here only.

https://hvolnew.com/Pano/transitions/output/index.html
Last edited by Neal on Wed Aug 12, 2020 11:13 pm, edited 1 time in total.
User avatar
360Texas
Moderator
Posts: 3506
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Wed Aug 12, 2020 10:59 pm

Yes, transitions are a great option. But remember please.... while presentation is essential but FIRST and FOREMOST show the product. It is not so much how you present ... as it is seeing what the client is buying. The buyer is spending their money to purchase the property... not the presentation.

Just being honest.... Hope this helps
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Wed Aug 12, 2020 11:10 pm

360Texas wrote:
Wed Aug 12, 2020 10:59 pm
Yes, transitions are a great option. But remember please.... while presentation is essential but FIRST and FOREMOST show the product. It is not so much how you present ... as it is seeing what the client is buying. The buyer is spending their money to purchase the property... not the presentation.

Just being honest.... Hope this helps
While I agree that showing the product is the most important, I don't understand what that comment has to do with this thread. That presentation was nothing more than a means of showing the transitions here, it wasn't meant for a sales presentation.

I thought others might find them interesting.
User avatar
Hopki
Gnome
Posts: 10865
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Wed Aug 12, 2020 11:29 pm

Hi Neal,
I am a child of the sixties and find this very funky :lol:
Not that I remember much about the sixties.
Can you share your workflow?
Regards,
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Wed Aug 12, 2020 11:54 pm

Hopki wrote:
Wed Aug 12, 2020 11:29 pm
Hi Neal,
I am a child of the sixties and find this very funky :lol:
Not that I remember much about the sixties.
Can you share your workflow?
Regards,
It involves a little bit of intermediate CSS and Javascript. It is a combination of CSS filters and transition settings, with javascript triggers. On the body element set the filter options to their default values. Use CSS transition to set the timing for half of the pano transition. To the node click event, add javascript to change one or more of the filter options. If you want a blur effect with a fade to black, set the brightness to 0 and the blur to 50px. The transition that was set in the CSS will determine the time it takes for those effects to complete. Using a timeout function, trigger a node change, and have the javascript return the filter values back to default.

The sequence is:
1) Node icon click
2) Transition fade in
3) node change
4) transition fade out

Since I was using this to show some of the various transitions that were possible, I added some additional code to tie the effect to the specific nodes. You normally wouldn't want to mix transitions in a presentation. So that code is unnecessary.

for those interested:

The CSS

Code: Select all

body {
				height:100%;
				margin: 0px;
				overflow:hidden; /* disable scrollbars */
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove highlight on tab for iOS/Android */
				filter:
					blur(0px)
					brightness(1)
					contrast(1)
					grayscale(0)
					hue-rotate(0deg)
					invert(0)
					opacity(1)
					saturate(1)
					sepia(0);
				transition: filter 3s ;
			}
The Javascript:

Code: Select all

At the beginning of the skin.js
let body = document.getElementById('body');
body.style.filter = "brightness(1) blur(0px) contrast(1) grayscale(0) hue-rotate(0deg) invert(0) opacity(1) saturate(1) sepia(0)";

me._ht_node.onclick=function (e) {
			let body=document.getElementById('body');
			let nextNode=me.hotspot.url;
			body.style.filter = "brightness(4) blur(0px) contrast(1) grayscale(0) hue-rotate(0deg) invert(0) opacity(1) saturate(1) sepia(0)";
			setTimeout(function(){
				pano.openNext(nextNode);
				body.style.filter = "brightness(1) blur(0px) contrast(1) grayscale(0) hue-rotate(0deg) invert(0) opacity(1) saturate(1) sepia(0)";
			},1000)				
Josh
Posts: 11
Joined: Wed Aug 05, 2020 1:54 pm

Thu Aug 13, 2020 1:30 am

No dice in FF I'm afraid. Just shows a white screen with the hotspots floating on it.

Checked it in Chrome and yeah, those are some funky transitions, thanks for sharing. Nice house too...
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Thu Aug 13, 2020 1:38 am

Josh wrote:
Thu Aug 13, 2020 1:30 am
No dice in FF I'm afraid. Just shows a white screen with the hotspots floating on it.

Checked it in Chrome and yeah, those are some funky transitions, thanks for sharing. Nice house too...
I checked it in Firefox, it does work. Everything I used is compatible with the current browsers. Really the only issue would be IE9 and the mini version of Opera (Opera Mini).
Josh
Posts: 11
Joined: Wed Aug 05, 2020 1:54 pm

Thu Aug 13, 2020 10:36 am

Neal wrote:
Thu Aug 13, 2020 1:38 am
Josh wrote:
Thu Aug 13, 2020 1:30 am
No dice in FF I'm afraid. Just shows a white screen with the hotspots floating on it.

Checked it in Chrome and yeah, those are some funky transitions, thanks for sharing. Nice house too...
I checked it in Firefox, it does work. Everything I used is compatible with the current browsers. Really the only issue would be IE9 and the mini version of Opera (Opera Mini).
Hmm. It's working on the laptop, manjaro/ff. Must be something up with the windows rig. Might warrant some testing before you deploy to a wide market but that is up to you :)

J
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Thu Aug 13, 2020 11:13 am

Neal wrote:
Wed Aug 12, 2020 10:23 pm
I was playing around, seeing what I could all do with this software. A little bit of javascript, a little bit of CSS and you can make some cool transitions. Here is an example of what I came up with. Each node has a different transition. This is meant to show the transitions, not the property. It is for use here only.

https://hvolnew.com/Pano/transitions/output/index.html
Not sure what I'm supposed to be seeing, but I'm not getting any actual panoramas, just the hotspots and thumbnails. Although clicking on each of those does do something different each time and I can see colour effects blurs etc. applied to the thumbnails.

I'd be very interested on how you're doing them, as anything would be an improvement on the standard transitions, especially as they're broken if you set FoV Mode:Diagonal.

I'd actually be happy with a simple short Zoom in, fading into another short Zoom in to the next pano. Sort of a poor man's Matterport. :) But although you can select that in Pano2vr, it doesn't work. If you haven't seen my video about this, it's here: https://youtu.be/d20hJKu_q2w
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Thu Aug 13, 2020 3:04 pm

@Josh, @Branigan, What version of FireFox are you running? Firefox reports this working on all recent versions and I can't reproduce it.
User avatar
360Texas
Moderator
Posts: 3506
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Thu Aug 13, 2020 3:50 pm

Pano2VR content needs OpenGL. Check to see if your FireFox version is 80-81.

80 - 81 contains OpenGL

https://caniuse.com/#search=openGL
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
Hopki
Gnome
Posts: 10865
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Aug 13, 2020 4:02 pm

Hi Neal,
I just tested your link in Firefox (79.0 (64-bit), Mac 10.15.6.
It opens really slow and it is unresponsive.
If I go to pan the image nothing happens for a few seconds then it starts to rotate in steps.
Works fine in Chrome and Safari.

ScreenFlow.gif
ScreenFlow.gif (6.23 MiB) Viewed 480 times

If I make the browser window much smaller it start to be more responsive.
Regards,
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Thu Aug 13, 2020 4:31 pm

Thanks for the help guys. I did some research. According to Chrome, Edge and Firefox they all handle the filter CSS properly correctly and properly. Of course, as is typical, they define correct differently. It appears that Firefox, under specific conditions modifies the position of the child elements for the container with the filter applied. This resulted in the player going elsewhere.

I have modified where the filter is applied, so I hope it will resolve the issue. I have checked it on my side, but it appears to have a hardware aspect.

@Hopkin - tell me how this works - https://hvolnew.com/Pano/2447-Hwy-N/pano.html
User avatar
Hopki
Gnome
Posts: 10865
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Aug 13, 2020 4:34 pm

Hi Neal,
There are no transitions effects but the pano moves as it should.
Regards,
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Neal
Posts: 177
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Thu Aug 13, 2020 4:46 pm

Hopki wrote:
Thu Aug 13, 2020 4:34 pm
Hi Neal,
There are no transitions effects but the pano moves as it should.
Regards,
Thanks.
Try the initial link again. I made a change to how the filter is applied. I don't think if will help, however.

The Javascript code is short and tied to an onClick event. It shouldn't affect panning or anything else. Is sounds like something to do with how Firefox on Mac handles the filter CSS effect. I'll see if there is a workaround.
Post Reply