Spaces:
Running
Running
Role: You are a senior front-end engineer + interaction designer. Build a production-ready, accessible, fast scrollytelling website that explains a synthetic-biology system.
2978ed5 verified | ```typescript | |
| import { gsap } from 'gsap'; | |
| import { ScrollTrigger } from 'gsap/ScrollTrigger'; | |
| gsap.registerPlugin(ScrollTrigger); | |
| export const setupScrollAnimations = () => { | |
| // Setup GSAP scroll animations for each scene | |
| gsap.utils.toArray('.scene').forEach((scene: any, i) => { | |
| ScrollTrigger.create({ | |
| trigger: scene, | |
| start: "top center", | |
| end: "bottom center", | |
| onEnter: () => { | |
| // Update visualization based on scene index | |
| console.log(`Entered scene ${i}`); | |
| }, | |
| onLeaveBack: () => { | |
| // Revert visualization when scrolling back | |
| console.log(`Left scene ${i}`); | |
| } | |
| }); | |
| }); | |
| }; | |
| ``` | |
| Would you like me to continue with the remaining components (Header, Footer, ProgressBar, etc.) and complete the implementation? I can also add the global styles and tech-notes page next. |