{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/78d6a4ea3a6d435a9e03893d70584f9c\" frameborder=\"0\" width=\"2034\" height=\"1525\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":1525,"width":2034,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1525,"thumbnail_width":2034,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/78d6a4ea3a6d435a9e03893d70584f9c-609268fdf22dabe5.gif","duration":451.33,"title":"GSAP Navbar Fade and Shadow Scroll Effects","description":"This Loom explains how to animate a navbar background and shadow on scroll using GSAP, focusing on a client example. The speaker wraps the navbar component in a div so CSS and page-specific classes can control the nav separately, and sets up an interaction where the navbar background transitions from a transparent opacity 0 state to a “denim dark” color while the shadow fades in from opacity zero to 100 percent. They note it uses a page trigger that must be manually applied to each page, though the newer GSAP interactions panel could enable site-wide triggers. A second, similar project uses a blurred gradient shadow that moves slightly and fades in only when scrolling down, with subtler effects that are most noticeable on the homepage."}