McGee Chrysler Dodge Jeep Ram of Barre
1365 US Route 302 Barre, VT 05641-2351
- Sales: 802-636-5580
- Service: 802-636-6214
- Parts: 802-636-5425
McGee Chrysler Dodge Jeep Ram of Barre
1365 US Route 302 Barre, VT 05641-2351
@media (max-width: 700px) h1 font-size: 2.8rem; h2 font-size: 1.8rem; .card padding: 1.8rem; </style> </head> <body>
// ========== SCENE 1: Fade & scale on enter ========== const card1 = document.getElementById('card1'); // create timeline for first scene: animate from invisible/scale to normal const t1 = gsap.timeline(); t1.fromTo(card1, autoAlpha: 0, scale: 0.85, y: 50 , autoAlpha: 1, scale: 1, y: 0, duration: 1.2, ease: "back.out(0.6)" ); new ScrollMagic.Scene( triggerElement: "#scene1", triggerHook: 0.3, // start when top of scene hits 30% of viewport duration: "40%" // animate during first 40% of scene height ) .setTween(t1) .addTo(controller); scroll magic mouse windows
// extra polish: each gallery item gets a continuous wiggle effect depending on scroll progress within scene3 // but for extra dynamic, we make color pulse on scroll: const galleryContainer = document.getElementById('gallery'); if(galleryContainer) const hueTween = gsap.to(galleryItems, backgroundColor: "#ff6a3d", duration: 0.4, stagger: 0.1, ease: "none", paused: true, overwrite: true ); const reverseTween = gsap.to(galleryItems, backgroundColor: "#1e2432", duration: 0.4, stagger: 0.1, ease: "none", paused: true ); // create scene that toggles between colors based on progress new ScrollMagic.Scene( triggerElement: "#scene3", duration: "100%", triggerHook: 0 ) .on("progress", (e) => const progress = e.progress; // use GSAP to mix background color effect: not perfect but fun if (progress > 0.2 && progress < 0.8) gsap.to(galleryItems, backgroundColor: "#ff6a3d55", duration: 0.1, overwrite: true ); else gsap.to(galleryItems, backgroundColor: "#1e2432", duration: 0.1, overwrite: true ); ) .addTo(controller); @media (max-width: 700px) h1 font-size: 2
// ========== SCENE 2: Dramatic rotation & scale + box color ========== const card2 = document.getElementById('card2'); const magicBox = document.getElementById('magicBox'); const rotateText = document.getElementById('rotateText'); // Complex timeline for scene2: card rotates, text scales, box color & scale changes const t2 = gsap.timeline(); t2.fromTo(card2, rotationY: 0, scale: 0.9, boxShadow: "0 0 0 rgba(255,106,61,0)" , rotationY: 15, scale: 1.05, boxShadow: "0 30px 40px -15px rgba(255,106,61,0.5)", duration: 0.8, ease: "power1.inOut" ); t2.fromTo(magicBox, backgroundColor: "#ff6a3d", scale: 1, borderRadius: "20px" , backgroundColor: "#ffbc3d", scale: 1.3, borderRadius: "40px", duration: 0.6, ease: "elastic.out(1, 0.4)" , 0 ); t2.fromTo(rotateText, rotation: 0, color: "#ffffff" , rotation: 5, color: "#ffb86b", duration: 0.5, ease: "back.out" , 0.2 ); new ScrollMagic.Scene( triggerElement: "#scene2", triggerHook: 0.2, duration: "70%" // animation spans 70% of scene2 height ) .setTween(t2) .addTo(controller); // additional parallax effect: move background shape? For demo we add subtle movement on badge const badge2 = document.querySelector('#scene2 .badge'); if(badge2) new ScrollMagic.Scene( triggerElement: "#scene2", duration: "100%", triggerHook: 0 ) .setTween(gsap.fromTo(badge2, x: 0, opacity: 0.6 , x: 30, opacity: 1, ease: "none", yoyo: false, repeat: -1, repeatDelay: 0 )) .addTo(controller); // But better use scroll-driven x movement relative to scroll progress: // remove previous and implement clean progress: const existing = controller.scene((s) => s.triggerElement() === "#scene2" && s); // hacky, just replace: const cleanParallax = new ScrollMagic.Scene( triggerElement: "#scene2", duration: "100%", triggerHook: 0 ) .setTween(gsap.to(badge2, x: 80, ease: "linear", scrollTrigger: false )) .addTo(controller); @media (max-width: 700px) h1 font-size: 2.8rem
.animated-box width: 100px; height: 100px; background: #ff6a3d; margin: 1.5rem auto 0; border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(255,106,61,0.4);
/* ensure scenes look distinct */ .scene-1 background: radial-gradient(circle at 20% 30%, #10131c, #030507); .scene-2 background: radial-gradient(circle at 80% 70%, #121824, #020408); .scene-3 background: radial-gradient(circle at 40% 50%, #0f1420, #010101); .scene-4 background: radial-gradient(circle at 70% 20%, #1a142b, #02010a);