add animationEssential parameter as additional option for flyTo and easeTo in the storytelling template

[fomofahg]

Hello,

many thanks for providing this awesome template. As a person with no experience in javascript, this is very helpfull!

Animations between chapters are often quite essential for telling the story. When a user has set prefers-reduced-motion: reduce #8494 animation is set to never animate camera transitions.

To integrate an essential option is a pull request for Mapbox GL JS as well: mapbox/mapbox-gl-js#8883

It would be nice, if it would be possible to enforce animations, if they are essential. Since the template is focussed on non coding, I would suggest to add a possibility whithin the location parameter of any chapter, for example:

location: { center: [-122.418398, 37.759483], zoom: 8.5, pitch: 60, bearing: 0, animationEssential: true }

since I don't have any knowledge in javascript or within the #Mapbox environment, this is just a naive suggestion, but it would be very nice to have :)

Best wishes,
Frederik

[fomofahg]

Solved:

based on this example of camera animation in Mapbox GL JS, I added essentail: true and that worked! here is an example of a chapter, where animation is enforced and independend of the users preference of prefers-reduced-motion:

        {
            id: 'second-identifier',
            alignment: 'right',
            hidden: false,
            title: 'Second Title',
            image: './path/to/image/source.png',
            description: 'Copy these sections to add to your story.',
            location: {
                center: [-77.020636, 38.886900],
                zoom: 8.5,
                pitch: 60,
                bearing: -43.2,
                essential: true
                // flyTo additional controls-
                // These options control the flight curve, making it move
                // slowly and zoom out almost completely before starting
                // to pan.
                //speed: 2, // make the flying slow
                //curve: 1, // change the speed at which it zooms out
            },
            mapAnimation: 'flyTo',
            rotateAnimation: true,
            callback: '',
            onChapterEnter: [],
            onChapterExit: []
        }