Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@deck.gl/arcgis - unable to use transition property

See original GitHub issue

Description

With the current implementation of @deck.gl/arcgis I’m unable to use the transitions:{...} property.

Repro Steps

Clone repo
Navigate to deck.gl/examples/get-started/pure-js/arcgis
npm install
npm install d3
open app.js
add import {easeCubicInOut} from 'd3';
within new GeoJsonLayer({...}) under getFillColor:..., add the transitions property per https://deck.gl/docs/api-reference/core/layer#transitions :

        new GeoJsonLayer({
        ...
        getRadius: (f) => 11 - f.properties.scalerank,
        getFillColor: [200, 0, 80, 180],
        transitions: {
          getFillColor: {
            duration: 3000,
            easing: easeCubicInOut,
            enter: (value) => [value[0], value[1], value[2], 0] // fade in
          }
        },
        ...
     })

Observe that points do not fade in as expected

Example: https://codesandbox.io/s/festive-smoke-u8de0?file=/app.js

Environment (please complete the following information):

Framework Version: @deck.gl/arcgis v8.2.10
Browser Version: Chrome 85
OS: macOS 10.15.7

Logs

deck: WebGL2 not supported by this browser. Transition animation is disabled.

Note: I am using a WebGL2-compatible browser, I do not receive this error when running a standard deck.gl example

Issue Analytics

State:
Created 3 years ago
Comments:10 (1 by maintainers)

Top GitHub Comments

1reaction

damix911commented, Apr 24, 2022

It’s still early to say for sure, but the ArcGIS JS API team is on track to merge WebGL 2 support in the upcoming release of the API.

This effort should fix this issue and close it “for real”.

1reaction

damix911commented, Jul 20, 2021

Hello @zakjan sorry for the super-late reply.

It’s not in 4.19, nor in 4.20. As far as I know all of our code base is working fine in WebGL 2 mode, but we haven’t flipped the switch yet.

I think both the options of defaulting to 1 and allowing opt-in to 2, as well as defaulting to 2 and allowing opt-out to 1 are on the table.

I’ll keep you posted.

Top Results From Across the Web

Adding Interactivity - deck.gl

To add a transition animation, see view state transitions. Add Constraints to View State. An application can optionally supply the onViewStateChange callback ...

transition-property - CSS: Cascading Style Sheets | MDN

The transition-property CSS property sets the CSS properties to which a transition effect should be applied.

Allowed properties for CSS transition-property - Stack Overflow

Is there a de facto list of properties that can be transitioned using CSS3 transitions? For example the display property cannot currently be ......

CSS3 Transition Property Basics - SitePoint

The same is true for visibility ; you can't expect a block to be half hidden which, by definition, would be visible !...

Animating with CSS Transitions - A look at the ... - YouTube

The easiest way to add animation to your website is by using ... In this video, I explore the four different transition properties, ......