Pointer animations

As of version 0.1.14, Point it out includes some basic, ready-to-use animations.

Some pointers (currently all) support an animate option. At the moment, there is only one basic animation available for rects and arrows: 'pulse'.

create('rect', {
    target: '#box-1', 
    container: 'main',
    animate: {
        name: 'pulse',
        duration: 0.75
    }
})

#box-1

create('arrow', {
    target: '#box-2', 
    container: 'main',
    distance: 30,
    fromAngle: 'top-right',
    animate: 'pulse',
})

#box-2

The animate option can be a string with the name of one known animation or an AnimationOptions object

AnimationOptions

name Required

'pulse'

Only 'pulse' available. There will be more in future releases.

duration Default: 1

number

Duration of an animation cycle. The higher this number, the lower the speed.

direction Default: 'alternate'

'normal''alternate'

If should play forward or alternate forward and backward.

repeat Default: 'infinite'

number'infinite'

Number of repetitions or 'infinite'

Why so few options?

The goal is not to create a full-fledged animation system, but rather to provide some basic, ready-to-use animations. If you want to implement more complex custom animations, read the section below.

Custom animations

To facilitate customization, pointers are not WebComponents and do not hide any of the properties they use. They are simple HTML elements in your site or web app.

You can use the className option to add a custom class to a pointer, or do anything else you want with the pointer reference, such as assigning an ID. This way, you can write your own CSS animations.

JavaScript

create('rect', {
  target: '#example', 
  container: 'main',
  className: 'rainbow-spinny-pointer'
})

CSS

.rainbow-spinny-pointer {
  animation: 2s infinite rainbow-spin;
}

@keyframes rainbow-spin {
  0% { 
    transform: rotate(0deg);
    filter: hue-rotate(0);
  }
  100% { 
    transform: rotate(360deg); 
    filter: hue-rotate(360deg);
  }
}

#example

Do not mix animate option and custom animations.

Unsafe CSS properties

Some CSS properties of pointers can be overridden during updates. Specifically, you should be aware of the left and top properties, which are used to position the pointer over the target.

On the other hand, most styling properties are set when the pointer is created and are applied inline using the style attribute on the pointer element or its child elements. Fortunately, animation properties take precedence and override inline styles.

Besides animations, if you need to modify some styles via CSS instead of using the options, you will need to replace the inline styles via JavaScript or use the infamous !important keyword. Don't be afraid to use it, this is one of the legitimate uses of that keyword and one of the reasons for its existence.