Add CSS Animation to Hot Spots ?

[littlee]

my panorama code:

window.pannellum.viewer('panorama', {
  type: 'equirectangular',
  panorama: 'images/p.jpg',
  autoLoad: true,
  showZoomCtrl: false,
  showFullscreenCtrl: false,
  compass: false,
  orientationOnByDefault: false,
  minPitch: 0,
  maxPitch: 0,
  minHfov: 60,
  maxHfov: 60,
  hotSpots: [
    {
      pitch: 38,
      yaw: 10,
      cssClass: 'park-hot-spot hs-park-overview',
      clickHandlerFunc: clickHandlerFunc(e, data) {
        var $o = $(data.target)
        $o.css('display', 'block')
        setTimeout(function() {
          $o.addClass('in')
        }, 50)
      },
      clickHandlerArgs: { target: '#page-4-park-overview' }
    }
  ]
})

this works fine.

but when I want to add css animation to my hot spot, it will always position in the top left corner

.park-hot-spot {
  background-size: 100%;
  background-repeat: no-repeat;
}
.park-hot-spot.hs-park-overview {
  width: 127px;
  height: 95px;
  background-image: url(../images/spot_park_overview.png);
  animation: 3s ease-in-out infinite both anim;
}

@keyframes anim {
  from {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.1);
  }

  to {
    transform: scale(1);
  }
}

Does Pannellum support hot spot css animation ?

[Doniee]

I just had a similar problem. That happens because the plugin defines the hot spot position with transform: translate, and the transform scale will overwrite the original transform, placing the hotspot in the top left corner. You could add an extra element inside the hotspot, then style and animate that. The custom hot spot example shows one way of appending elements inside the hot spot (a span is added there in the hotspot function). In some cases you can create a pseudo element with CSS and animate that, instead of adding an element with JavaScript.

[littlee]

That's cool, I was also thinking to do the trick with :before element

[SebMartinus]

Hi All, I have been trying to fix this issue as well. I want to rotate my symbol when I hover it. I have added the cssClass in the hotspots and I ave added the following code in the css... .custom-hotspot.r50:hover { -ms-transform: rotate(50deg); /* IE 9 */ -webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */ transform: rotate(50deg); background: url(./green-arrow.svg); height: 25px; width: 25px; } With this code, every time I hover my hotspot, the icon moves on the top left corner... Any idea of what I am missing? Thanks

[mpetroff]

You don't seem to be inserting an extra element into your hot spots; your CSS overrides the base hot spot, which breaks the positioning. What's your hot spot creation function?

[SebMartinus]

Thanks Matthew for your answer and your time, I am creating the hotspots the same way it is presented on your example site: https://pannellum.org/documentation/examples/tour/.

[mpetroff]

Did you read the comments earlier in this issue? As is stated in https://github.com/mpetroff/pannellum/issues/440#issuecomment-317991659, you need to insert an extra element inside the hot spot. The hot spot creation function I'm referring to is what's used in the custom hot spot example, not the tour example.

[SebMartinus]

Yes I did.But I was a bit confused. Now I understand that I need to call a function to update the hotspot style. The problem is because I am using a json file, so I have an error because I cannot add a function in a JSON document. I will let you know once I figure out that. Thanks.

[mpetroff]

Custom hot spots require using the API; the configuration is thus a JavaScript object.

[RAHULBAWA777]

I want the custom highlight to be hidden and when I hover over it...it should be visible ..... also I can't rotate it to a specified angle............how to achieve it?