Hi all.
I have been tasked my by company to revamp our site. We have designs and a concept for a single-page site that makes use of animations tied to scroll progress.
GSAP and Scrolltrigger has been amazing for this so far. At this point I have the full animation orchestrated from the top to the bottom of the page. Scrolling at a reasonable speed results in the desired effect. However scrolling too quickly or jumping to certain points on the page results in elements ending up in places where they shouldn't be.
The animation is quite a complex one when all put together. It involves the same elements being animated multiple times, as they move around the page while scrolling. I've divided the single-page into various sections, and have a separate timeline that handles each section. I'm unable to share a full codepen as I'm not allowed to share certain information such as our assets, but I have included code below that I hope adequately shows my approach.
I've tried various solutions suggested already on this forum, including: setting "immediateRender" and "overwrite", using only fromTo's, relative vs absolute values.
I think that my mistake lies in my approach to the task, I believe I'm not employing the optimal practices in order to complete a complex animation of this nature.
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
planetFloat();
landingPhase();
discoverPhase();
discussPhase();
decidePhase();
}, []);
export const landingPhase = () => {
gsap
.timeline({
scrollTrigger: {
trigger: ".scroll-trigger",
start: "10% bottom",
end: "+=2000",
scrub: 0.25,
},
})
// Move landing text off screen
.to(".landing-text", {
opacity: "-=1",
x: "+=300",
})
// Bring greatness text onto screen
.fromTo(
".greatness-text",
{ autoAlpha: 0, x: -300 },
{
autoAlpha: 1,
x: 0,
},
">-50%"
)
// Scale up discover system
.fromTo(
".discover-system",
{ opacity: 0, scale: 0 },
{
opacity: 1,
scale: 1,
},
// ">-60%"
"<"
)
// Telescope ledge rises into view
.fromTo(
".telescope",
{ y: 350 },
{
y: 0,
},
// ">-60%"
"<"
)
// Greatness text descends below telescope ledge
.to(
".greatness-text",
{
opacity: "-=1",
y: "+=550",
},
">100%"
)
// Journey text descends into view
.fromTo(
".journey-text",
{ y: -550, autoAlpha: 0 },
{
y: 0,
autoAlpha: 1,
},
">-70%"
)
// Beginning of system rearrange -->
.to(
"#moon-container",
{ x: "-=50", y: "-=100", scale: "-=0.7", overwrite: true },
">100%"
)
.to(
"#galaxy-swirl-container",
{ x: "-=400", y: "+=50", rotate: 7, scale: "+=0.4", overwrite: true },
"<"
)
.fromTo("#sun-container", { scale: 0 }, { scale: 0.3 }, "<")
.to(
"#ringed-planet-container",
{ x: "-=500", y: "+=100", overwrite: true },
"<"
)
.fromTo("#red-planet-container", { scale: 0 }, { scale: 1 }, "<")
.fromTo("#darkBlue-planet-container", { scale: 0 }, { scale: 1 }, "<")
.to(
"#lightBlue-planet-container",
{ x: "-=160", y: "+=240", scale: "+=0.5", overwrite: true },
"<"
)
.to(
"#dark-planet-container",
{ x: "+=50", y: "-=150", scale: "-=0.5", overwrite: true },
"<"
)
.to(
"#turquoise-planet-container",
{ x: "-=260", y: "+=60", scale: "+=1.5", overwrite: true },
"<"
)
// <-- Ending of system rearrange
// Telescope ledge zooms out of view
.to(
".telescope",
{
y: "+=500",
x: "-=800",
},
"<"
)
// Journey text zooms out of view
.fromTo(
".journey-text",
{
y: 0,
x: 0,
},
{
y: 500,
x: -800,
},
"<"
);
};
export const discoverPhase = () => {
gsap
.timeline({
scrollTrigger: {
trigger: ".scroll-trigger",
start: "25% bottom",
end: "+=2000",
scrub: 0.25,
},
})
// Phase 1 text moves in from the right
.fromTo(".phase1-text", { x: 1500 }, { x: 1200 }, "")
// Discover text fades in
.fromTo(
".discover-text",
{ autoAlpha: 0, scale: 2.5 },
{ autoAlpha: 1, scale: 2.5 },
"<"
)
// Phase 1 text moves over the screen
.to(".phase1-text", { x: "-=135%" }, ">100%")
// Beginning of system rearrange -->
.to(
"#galaxy-swirl-container",
{ rotate: -15, x: "+=300", scale: "-=0.4", overwrite: true },
">-50%"
)
.to(
"#sun-container",
{ x: "+=250", y: "+=25", scale: "-=0.05", overwrite: true },
"<"
)
.to("#moon-container", { x: "+=250", overwrite: true }, "<")
.to(
"#lightBlue-planet-container",
{ x: "+=200", y: "-=50", scale: "-=0.5", overwrite: true },
"<"
)
.to(
"#dark-planet-container",
{ x: "+=200", y: "+=25", scale: "-=0.1", overwrite: true },
"<"
)
.to(
"#turquoise-planet-container",
{
x: "+=200",
y: "-=75",
scale: "-=0.5",
overwrite: true,
},
"<"
)
.to(
"#red-planet-container",
{ x: "+=400", y: "+=50", overwrite: true },
"<"
)
.to(
"#darkBlue-planet-container",
{ x: "+=400", y: "+=50", overwrite: true },
"<"
)
.to(
"#ringed-planet-container",
{ x: "+=450", scale: "-=0.2", overwrite: true },
"<"
)
// <-- Ending of system rearrange
// Discover text moves away with system
.to(
".discover-text",
{ rotate: -25, x: "+=450", scale: "-=0.6", opacity: "-=1" },
"<"
)
// Curiosity header text slides in
.fromTo(
".curiosity-header-text",
{
x: -700,
},
{ x: 0 },
"<"
)
// Curiosity paragraph 1 text slides in
.fromTo(
".curiosity-paragraph1-text",
{
x: -700,
},
{ x: 0 },
">-70%"
)
// Curiosity paragraph 2 text slides in
.fromTo(
".curiosity-paragraph2-text",
{
x: -700,
},
{ x: 0 },
">-70%"
)
// Beginning of system rearrange -->
.to(
"#lightBlue-planet-container",
{
x: "-=500",
y: "+=500",
scale: "+=15",
overwrite: true,
},
">200%"
)
.to(
"#turquoise-planet-container",
{
x: "-=825",
y: "+=30",
scale: "+=1.5",
overwrite: true,
},
"<"
)
.to(
"#ringed-planet-container",
{
y: "-=50",
x: "-=50",
scale: "+=1",
overwrite: true,
},
"<"
)
.to(
"#red-planet-container",
{
x: "-=1500",
opacity: "-=1",
overwrite: true,
},
"<"
)
.to(
"#darkBlue-planet-container",
{
x: "-=1500",
opacity: "-=1",
overwrite: true,
},
"<"
)
.to(
"#dark-planet-container",
{
x: "-=900",
y: "-=150",
scale: "+=0.5",
overwrite: true,
},
"<"
)
.to(
"#moon-container",
{
y: "-=0",
x: "-=200",
scale: "+=0.5",
overwrite: true,
},
"<"
)
.to(
"#galaxy-swirl-container",
{
x: "-=1500",
opacity: "-=1",
scale: "+=10",
overwrite: true,
},
"<"
)
.to(
"#sun-container",
{
opacity: "-=1",
x: "-=1500",
y: "-=200",
scale: "+=2",
overwrite: true,
},
"<"
)
// <-- Ending of system rearrange
// Curiosity header text moves off screen
.to(
".curiosity-header-text",
{
x: "-=700",
},
"<"
)
// Curiosity paragraph 1 text moves off screen
.to(
".curiosity-paragraph1-text",
{
x: "-=700",
},
"<"
)
// Curiosity paragraph 2 text moves off screen
.to(
".curiosity-paragraph2-text",
{
x: "-=700",
},
"<"
)
// Phase 1 text moves off screen
.to(
".phase1-text",
{
x: "-=1000",
},
"<"
)
// Discuss text fades up and in
.fromTo(
".discuss-text",
{
autoAlpha: 0,
scale: 0,
y: 500,
},
{
autoAlpha: 1,
scale: 2.5,
y: 0,
},
">-50%"
)
// Phase 2 texts slides on screen
.fromTo(
".phase2-text",
{
x: -1700,
},
{
x: -800,
},
"<"
);
};
