Most of the time a gem is missing one of its three parts. A gem is HTML, CSS and JavaScript working together, so the effect only moves when all three are on the page.
This applies when you used Copy HTML, which opens a window with the code in three boxes.
Check these in order
- All three boxes are pasted. Copy HTML, CSS and JS separately. Pasting only the HTML gives you the shape with no styling and no motion. A gem with no script has no JS box, and that is fine.
- Each box is in its own place. HTML goes into an Embed or your page body. CSS goes in your page head. JS goes right before the end of the page. In Webflow, open Page settings, then Custom code, and use Head for CSS and Footer for JS.
- The whole JS box was copied. It can hold more than one script block. Copy the box with its copy button instead of selecting by hand.
- The CSS box was not skipped. It also holds the colours the gem uses, so without it the gem can look wrong as well as still.
- The gem needs GSAP. A GSAP badge on the gem page means it uses the GSAP animation library. If the gem has a tutorial, open the Tutorial tab in the code window and read it. If you are not sure what to add, use Copy Prompt instead: for GSAP gems it keeps the animation and names the package to install.
Want the files instead of boxes? Download all saves the gem as a zip.
You should see...
After the fix, the effect runs when its trigger fires, such as a hover, a click or a scroll. The gem page lists the trigger under Interaction.
If it did not work
- Paste the three boxes again into a blank page. If it works there, the problem is something else on your page.
- Check that the copy was not blocked. Hitting the hourly limit shows a message, and limits are explained here.
Next: copying a gem.
