gclassDev

A styled wrapper around GSDevTools.create() that matches the docs palette. It registers GSDevTools via gsap.registerPlugin(GSDevTools) (AnimToggle.js:4) and re-exports from index.js:1.

js
import { gclassDev } from 'gclass-anims'

// defaults - slate-900 bg, slate-700 border, centred
gclassDev()

// CSS string verbatim
gclassDev("width:50%; bottom:30px")

// style object shorthand merged with defaults
gclassDev({ width: "50%", bottom: "30px" })

// full GSDevTools opts, css merged with defaults
gclassDev({ css: { width: "50%" }, animation: tl, minimal: true, id: "my" })
gclassDev({ css: "width:50%;", container: "#dev", animation: tl })

Defaults

backgroundColorrgba(15,23,42,0.96) slate-900
border1px solid rgba(51,65,85,0.8) slate-700
borderRadius12px rounded-xl
boxShadow0 0 0 1px rgba(51,65,85,0.5), 0 8px 32px rgba(0,0,0,0.45)
backdropFilterblur(8px)
color#e2e8f0 slate-200
bottom / width / maxWidth / left / transform16px / 92% / 860px / 50% / translateX(-50%) centred bottom bar

Defined in AnimToggle.js:185 gclassDev(cssOrOpts) and typed in index.d.ts:35 gclassDev(cssOrOpts?: string | Record). Returns GSDevTools.create({ css, ...opts }). Pass animation: tl to control a specific timeline, or call with no args to get the global dev tools bar.

When to use

Use during development to scrub and debug GSAP timelines. It is the same GSDevTools from gsap/all, just pre-styled to the docs. No extra setup - import and call once after initAnimations().