[GSAP animation (maybe) crashing homepage]

@Rodrigo, thanks a lot for your help,

 

I fixed it in the end. The initial problem I had (the one that crashed the site) had to do with Next.js's ISR.

And I managed to reveal the nav by using React context. I just had to be very careful because the component re-rendered midway unless I isolated the ref that was responsible for the tween. A bit tedious, but it worked out!

 

This is the website: edubarcelo.com

 

[GSAP animation (maybe) crashing homepage]

Thanks a lot @GSAP Helper,

 

I think I might have been making a mistake of putting canvasRef as a dependency of my useLayoutEffect, and that might have been breaking things.

Here's my stackblitz: https://stackblitz.com/edit/nextjs-jadegt?file=components%2FAnimatedSequence%2FAnimatedSequence.js

 

I still have a doubt of how to handle one thing. My timeline should do this:

1) Animate image sequence

2) Reveal navigation

3) Animate red images

 

The problem I have is with 2). I need to tween a DOM element which is not inside the context of my timeline.

So how should I do this?

 

I hope you can understand what I mean. Otherwise I can clarify.

[GSAP animation (maybe) crashing homepage]

I'm creating a website in Next.js and in the homepage I have a scrollTriggered and scrubbed timeline.

The animation consists of two parts:
1) An image sequence, which I've done with the help of the codepen at the end 

2) Simple tweens fading and zooming images

 

This is a snippet of what the animation does: 

 

The animation works. I've deployed it to Netlify and it seems ok.

The thing is, though, that every once in a while, the homepage crashes. And what it shows is a weird DOM:

 

When I disable the animation I never get this weird DOM. Now, I'm not sure if the deployment is to blame or my gsap code is.

So I'd like to ask you if you could take a look at my code and see if I'm doing something obviously wrong. Thank you so much!

 

"use client";

 

import { useRef, useLayoutEffect, useContext } from "react";

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

import NextImage from "next/image";

import { useRouter } from "next/navigation";

import { MenuContext } from "@/Providers/MenuProvider";

 

import styles from "./AnimatedSequence.module.css";

 

const AnimatedSequence = ({ projectImages }) => {

const router = useRouter();

const canvasRef = useRef(null);

const animation = useRef(null);

const { setHeaderAndMenuHidden } = useContext(MenuContext);

 

useLayoutEffect(() => {

setHeaderAndMenuHidden(true);

 

// Here's the canvas that will hold the image sequence

const canvas = canvasRef.current;

const context = canvas.getContext("2d");

canvas.width = 3024;

canvas.height = 1983;

const frameCount = 18;

const currentFrame = (index) => `imageSequence/frame_${index.toString().padStart(2, "0")}.jpg`;

const images = [];

const crack = {

frame: 0,

};

for (let i = 0; i < frameCount; i++) {

const img = new Image();

img.src = currentFrame(i);

images.push(img);

}

function render() {

context.clearRect(0, 0, canvas.width, canvas.height);

context.drawImage(images[crack.frame], 0, 0);

}

images[0].onload = render;

 

let ctx = gsap.context(() => {

 

let tl = gsap.timeline({

scrollTrigger: {

trigger: ".wrapper",

scrub: true,

pin: true,

// markers: true,

start: "top top",

end: "+=200%",

onEnter: () => {

gsap.fromTo(".bg", { autoAlpha: 1 }, { autoAlpha: 0, duration: 1, delay: 0.2 });

},

onLeave: () => {

router.push("/projects");

},

},

});

 

//Here's the tween that animates the sequence

tl.to(

crack,

{

frame: frameCount - 1,

snap: "frame",

ease: "none",

duration: 9,

onUpdate: render,

onComplete: () => setHeaderAndMenuHidden(false),

},

"crack"

);

 

//This tween fades the canvas to reveal what's underneath

tl.to(canvas, { opacity: 0, duration: 1, onReverseComplete: () => setHeaderAndMenuHidden(true) }, ">");

 

// Here's the tweens fading the images

projectImages.forEach((image, i) => {

tl.fromTo(

`.image-${i}`,

{ autoAlpha: 0, scale: 0.3 },

{

autoAlpha: 1,

scale: 1.25,

duration: 9,

},

">"

);

tl.to(`.image-${i}`, { autoAlpha: 0, duration: 1 }, ">");

});

 

tl.to(".scrollDown", { autoAlpha: 0, duration: 1 }, "crack+=1");

}, animation);

return () => ctx.revert(); // cleanup

}, [canvasRef]);

 

return (

<div ref={animation}>

<div className={`wrapper ${styles.wrapper}`}>

<div>

<NextImage

className={`scrollDown ${styles.scrollDown}`}

src="/scrollDown.svg"

width={108}

height={99}

alt=""

/>

<canvas ref={canvasRef} className={`canvas ${styles.canvas}`} />

</div>

<div className={`bg ${styles.bg}`}></div>

{projectImages.map((image, i) => (

<NextImage

key={image.file.url}

className={`${styles.image} image-${i}`}

src={image.file.url}

width={image.file.width}

height={image.file.height}

alt=""

/>

))}

</div>

</div>

);

};

 

export default AnimatedSequence;

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

[REASON to use the gsap lib given it's big file size]

A funny anecdote is that a few years ago I kept the memory of your website as the "developer who had a nice animated logo and she made a tutorial about it", but I forgot your name so I couldn't find it. And then sometime later you popped up on GSAP tutorials and it was a nice way to find you again. Your videos are great!

[REASON to use the gsap lib given it's big file size]

That was a nice read. I think it deserved a reply: thank you!

 

Lately I've mostly been working with React, and there's a big temptation to switch to something like Framer Motion, which is built for such frameworks. But this afternoon I was trying to accomplish something with both libraries to see which one would get me there faster. I definitely appreciate your great tutorials that are so clear and easy to digest, thanks to them I managed to achieve my goal much faster.

Your great learning materials and the forums make a big difference when deciding to pick an animation library.

 

Again, just wanted to say thanks!

[Disabling Observer on Vertical Scroll]

Thanks for your help, Jack. And you are right, it is an unnecessarily unintuitive solution.

[Disabling Observer on Vertical Scroll]

Hi, I'm new to the forums and I created this codepen to show what I'm trying to achieve:

 

 

I used some of the code from Cassie's introduction to Observer to make this sections that move when we scroll down and up (.swipe-section). But when we get to the middle section (.scroll), I would like Observer to disable and allow for normal vertical scrolling. And in the last two sections it should go back to Observer action. I hope I made myself clear.

 

I don't know how I should go about disabling and re-enabling Observer properly. And I'm also having trouble because I have to make the middle section position:relative but then the scrollbar starts progressing at the beginning of the page.

 

I hope someone can point me in the correct direction. Thanks.

See the Pen PoewRRO by marnau (@marnau) on CodePen