Marnau
Members-
Posts
7 -
Joined
-
Last visited
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
Marnau's Achievements
- Rare
- Rare
Recent Badges
7
Reputation
-
@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
-
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.
-
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 https://codepen.io/osublake/pen/VwaKMpw/2152a28cffe2c2c0cca8a3e47f7b21c6 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;
-
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!
-
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!
-
Thanks for your help, Jack. And you are right, it is an unnecessarily unintuitive solution.
-
Hi, I'm new to the forums and I created this codepen to show what I'm trying to achieve: https://codepen.io/marnau/pen/PoewRRO 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.