Ganbatte

Thank you again! I will try.

Thanks again, Rodrigo. I've tried this solution myself, but it results in having 2 scroll triggers on the homepage. If I create more sections on the homepage that I want to animate, there could potentially be 5-10 scroll triggers. Isn't the goal of the scroll trigger to have just one on the homepage in certain cases, and then modify the trigger itself along with the pinning element? Is this possible, or am I thinking about it in a completely wrong way? How do larger websites usually implement this? Unfortunately, I can't find any tutorials online that cover this scenario, they all demonstrate a single case. I've improved the demo and added an extra section to make my point clearer. Thank you very much in advance for your help! link is the same: https://stackblitz.com/edit/nextjs-hvbhri?file=pages%2Findex.js,pages%2FHero.js,pages%2FBeforeAfterScroll.js,styles%2Fglobals.scss

Yes i did, sorry, I thought the other one was already inactive, please close this one. Thank you.

Hello! I'm new to the world of GSAP, although I have experience with CSS. I'm using NextJS 14 in my project. I've watched quite a few videos from GSAP, but I haven't found any discussing clearing about using more than one scroll trigger on the page (not the same type of objects). Here is my problem: when I put it in a separate component and create the timeline in the main component, then pass it over, I can't properly use the scroll trigger. How can I use scroll triggers for multiple animations on one page? What am I doing wrong? The scroll trigger only work with my first animations. I really want to get the hang of using GSAP, it seems like a great tool, but I just haven't quite gotten the hang of it yet. I would be extremely grateful for any help. Thank you so much in advance. here is the demo:https://stackblitz.com/edit/nextjs-wr4ktj?file=pages%2Findex.js,pages%2FHero.js,pages%2F_app.js

Thanks for the tip and the information, Rodrigo! Unfortunately, I can't use scale or valut in this case because I also modify the cropping of the image. However, I'm satisfied with the solution. But I have a problem: when I put it in a separate component and create the timeline in the main component, then pass it over, I can't properly use the scroll trigger. How can I use scroll triggers for multiple animations on one page? What am I doing wrong? The scroll trigger only work with my first animations. I really want to get the hang of using GSAP, it seems like a great tool, but I just haven't quite gotten the hang of it yet. I would be extremely grateful for any help. Thank you so much in advance. here is the demo:https://stackblitz.com/edit/nextjs-wr4ktj?file=pages%2Findex.js,pages%2FHero.js,pages%2F_app.js

I would be very grateful if you could help me understand better how exactly GSAP works.

While testing on StackBlitz, I managed to figure out a few things. The reason it wasn't responsive was that I used window.innerWidth. I did this because GSAP was overriding the size set in CSS upon loading, which I'm still unsure why it's doing. These lines caused the issue, although theoretically, they shouldn't affect it. When I commented out GSAP, there were no problems. For instance, I set a width of 20% in CSS, but GSAP changed it to 25% even before the animation. Why this happens is unclear. Additionally, it slightly alters the value even without this code. For instance, I set it to 20%, but GSAP overrides it inline to 19.9858%. I'm perplexed as to why it does this. Here's the code (all of this is available on the StackBlitz interface): @mixin containerChild() { > div:not(.img-container) { max-width: 1200px; margin-inline: auto; padding-inline: 10px; } } .cont { @include containerChild(); min-height: 100svh; }

Hello Rodrigo! First of all, thank you for your help, but unfortunately, that's not what I had in mind. I've created the editable version which you can find at my link. My problem is that when I resize the window, the image doesn't adjust accordingly. Also, I don't understand why I can't specify CSS values like percentages or viewport width (vw) through GSAP. It seems to convert them directly into pixels, which I find puzzling. I'm mean for this: https://stackblitz.com/edit/nextjs-auvnxa?file=pages%2Findex.js

Sorry, Of course, I understand. I managed to put together a version of it here in the meantime. Thank you in advance for the help! Link: https://stackblitz.com/edit/nextjs-auvnxa?file=pages%2Findex.js

Here is the showcase of my problem, on a clean new project: https://gsaptest2.netlify.app/ Please try to resize the window, after loaded the images. style.scss *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box !important; text-decoration: none; list-style: none; // outline: 1px solid rgb(255, 0, 0); } .img-container { position: relative; } .hero-cont { position: relative; display: flex; flex-direction: column; min-height: 100svh; } .hero__content { width: 100%; margin-top: 28vh; .hero__title { font-size: clamp(3rem, 6vw + 0.1rem, 5rem); font-weight: 600; line-height: 1.1; letter-spacing: 1px; margin-bottom: 30px; } .hero__text { font-size: clamp(1rem, 6vw + 0.1rem, 1.5rem); max-width: 35ch; } } .hero__bg { position: absolute; z-index: -1; object-fit: cover; } .hero-img__container { position: absolute; height: 60%; width: 400px; // left: 25%; position: absolute; left: 0; right: 0; top: 25%; margin-inline: auto; rotate: 15deg; // transform: translate(-30%, -50%); z-index: -1; border: 1px solid white; border-width: 15px 15px 40px 15px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); // transition: all 400ms ease-in; .hero-photo__img { object-fit: cover; width: 100%; height: 100%; } } page.tsx: 'use client'; import { useLayoutEffect, useRef } from 'react'; import gsap from 'gsap'; import Image from 'next/image'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; const heroImg = '/assets/images/hero/hero2.webp'; const heroPhotoImg = '/assets/images/hero/hero-photo.webp'; export default function Home() { const heroComp = useRef(null); useLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger); let ctx = gsap.context(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: heroComp.current, //trigger start: '+=10 top', end: 'bottom top', toggleActions: 'play', scrub: true, markers: true, pin: true, }, }); tl.to('.hero-img__container', { left: 0, top: 0, borderWidth: 0, transform: 'rotate(0)', height: '100%', width: window.innerWidth, }); tl.to('.hero__content', { opacity: 0, }); }, heroComp); return () => { ctx.revert(); }; }, []); return ( <main > <section ref={heroComp} className='hero-cont cont full-size'> <Image src={heroImg} alt='hero' className='hero__bg' fill /> <div className='hero__content'> <h1 className='hero__title'> Beautiful Moment <br /> is Everything </h1> <p className='hero__text'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, tempora?</p> </div> <div className='hero-img__container'> <Image fill src={heroPhotoImg} alt='hero' className='hero-photo__img' /> </div> </section> </main> ); }

Hello! I'm new to the world of GSAP, although I have experience with CSS. I'm using NextJS 14 in my project. I've watched quite a few videos from GSAP, but I haven't found any discussing clearing inline styles with scrub: true. I have an image positioned in the center of the screen using position: absolute, and I've used GSAP animations to make it go fullscreen on scroll. My problem is that when I resize the screen, it simply enlarges to the original size instead of adjusting to the current size. I've tried various units to specify the width for GSAP, such as using percentages (100%), viewport width (100vw), or window.innerWidth, but none seem to work properly for achieving fullscreen. I don't understand this behavior because it seems to convert the inline style to pixels even when I specify percentages. I've seen in multiple videos that the GSAP team emphasizes not worrying about units, but I've only encountered problems. For instance, I set the image to have a width of 200px in CSS and specified 100% width as the target value in GSAP. Even before the scroller reaches the trigger start, it applies some inline style causing the image to widen. However, if I use window.innerWidth, there's no change in size. But the main issue still remains with responsiveness. If I give GSAP 50%, why doesn't it render that in the inline style? Why does it convert it to pixels? This makes it completely unresponsive, and I have no idea how to make it adjust to fullscreen when the size changes. Is there a way to clear the GSAP inline style when a screen size is changed (I don't mean breakpoints, I know about gsap.matchMedia(), but it is not a solution for this) and recalculate it? I'd be incredibly grateful for any help. Thanks in advance! Here is my css: .img-container { position: relative; } .hero-cont { position: relative; display: flex; flex-direction: column; min-height: 100svh; overflow-x: hidden !important; } .hero__content { width: 100%; margin-top: 28vh; .hero__title { font-size: clamp(3rem, 6vw + 0.1rem, 5rem); font-weight: 600; line-height: 1.1; letter-spacing: 1px; margin-bottom: 30px; } .hero__text { font-size: clamp(1rem, 6vw + 0.1rem, 1.5rem); max-width: 35ch; } } .hero__bg { position: absolute; z-index: -1; object-fit: cover; } .hero-img__container { position: absolute; height: 60%; width: 200px; // left: 25%; position: absolute; left: 0; right: 0; top: 25%; margin-inline: auto; rotate: 15deg; // transform: translate(-30%, -50%); z-index: -1; border: 1px solid white; border-width: 15px 15px 40px 15px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); // transition: all 400ms ease-in; .hero-photo__img { object-fit: cover; width: 100%; height: 100%; } } Here is my component: 'use client'; import { useEffect, useLayoutEffect, useRef, useState } from 'react'; import Hero from '@/components/Hero'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import Image from 'next/image'; const heroImg = '/assets/images/hero/hero2.webp'; const heroPhotoImg = '/assets/images/hero/hero-photo.webp'; export default function Home() { const heroComp = useRef(null); useLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger); let ctx = gsap.context(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: heroComp.current, //trigger start: '+=10 top', end: 'bottom top', toggleActions: 'play', scrub: true, markers: true, pin: true, }, }); tl.to('.hero-img__container', { left: 0, top: 0, borderWidth: 0, transform: 'rotate(0)', height: '100%', width: window.innerWidth, }); tl.to('.hero__content', { opacity: 0, }); }, heroComp); return () => { ctx.revert(); }; }, []); return ( <> {/* <Hero /> */} <section ref={heroComp} className='hero-cont cont full-size'> <Image src={heroImg} alt='hero' className='hero__bg' fill /> <div className='hero__content'> <h1 className='hero__title'> Beautiful Moment <br /> is Everything </h1> <p className='hero__text'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, tempora?</p> </div> <div className='hero-img__container'> <Image fill src={heroPhotoImg} alt='hero' className='hero-photo__img' /> </div> </section> </> ); }