Tips

A collection of tips to solve common issues.

Images are not showing once the build is uploaded to Scoop

Check the Scoop ID in settings.yaml. Once uploaded, the assets are stored in a folder named as the Scoop ID, so their path will be wrong if the value of it is not correct.

⁠

⁠

GSAP can’t import plugins as modules

The page of the Kit gets pre-rendered and GSAP plugins don’t work on a server environment. To solve the problem, import the UMD modules from the dist folder of the package, and register it only in a browser environment, as in this example.

Characters are chipped in type animations

This happens often when we wrap single characters, words or lines to animate them. Try adding a padding to the character elements, compensated by a negative margin of the same value. For example:

Some styles are not respected once the build is uploaded to Scoop

The bundle gets processed by the Paid Post Translator and, in addition to that, the page will inherit the styles from the website wrapper. The NYT styling relies on a hard reset of the browser styles, and sometimes this requires to add more specificity to styles targeting, for example, em or strong elements.

The reset is imported by the Kit during the development, to create an environment similar to the one where the page will live, but it will be always different then the real published page.

My page is lagging, animation are jumping, performance are bad

Try to remove all CSS filter: blur(). Even if you don’t think you are using it, check it again. You might have used it for a quick solution and left there! An element on the bottom of the page could influence element unrelated to it, for example a top bar menu...

Try to avoid having a large number of large DOM elements off screen, by hiding them (display: none) or rendering them conditionally.

Images are not showing once the build is uploaded to Scoop

GSAP can’t import plugins as modules

Characters are chipped in type animations

Some styles are not respected once the build is uploaded to Scoop

My page is lagging, animation are jumping, performance are bad

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.