Yunus Emre

Thanks for the answer! Setting images to have an explicit width/height did the job. But sizes can be changeable in the future. Sorry for my inexperience but I couldn't make it. Should I ask this part in another next.js related platform?

I created a simple sandbox here: https://codesandbox.io/s/headless-dream-riz9j?file=/styles/Index.css I fetched and console log the speed data with no problem. gsap seem's don't use it appropriately. Above I said it occurs sometimes and randomly but I now found "a case" that causes this problem. I go linked about page > refresh about page > go back with using link > animation breaks. Besides this, in iOS; even just refreshing the main page or navigating between pages sometimes can cause this issue. Maybe it's about animations don't load in enough time and scrolling without waiting makes animations behave different.

Is it because child elements (images) that has the data attributes is coming from server side and gsap animation try to fetch that speed data after mounting in client side? Simply I used the Parallax component like this: <Parallax> <div data-speed="0.2"><img src="/images/1-1.jpg"/></div> <div data-speed="0.2"><img src="/images/1-2.jpg"/></div> <div data-speed="0.2"><img src="/images/1-3.jpg"/></div> <div data-speed="0.7"><img src="/images/2-1.jpg"/></div> <div data-speed="0.6"><img src="/images/2-2.jpg"/></div> <div data-speed="0.5"><img src="/images/2-3.jpg"/></div> </Parallax>

Hi everyone! I'm scrolling images in different speeds (speed data comes from HTML's data-* attribute as you can see) and creat a parallax effect. The animation has no problem with working but sometimes it's not responding (all the images scrolling in the same speed) when coming back from other (about, works, contact etc.) pages. And sometimes it's working nonetheless. None of other animations (with or without scrollTrigger) have this problem. Is this more related with GSAP or Next.js? Any help on this please? export function Parallax({ children }) { const el = useRef() useEffect(() => { const animations = [] const elements = gsap.utils.toArray(el.current.children) elements.forEach((element) => { const movement = -(element.offsetHeight * element.dataset.speed) const animation = gsap.timeline({ scrollTrigger: { trigger: element, start: "top bottom", end: "bottom top", scrub: 0.2 } }) .to(element, { y: movement, ease: "none" }, 0) animations.push(animation) }) return () => { animations.forEach((animation) => animation.scrollTrigger.kill()) } }, []) return <div ref={el}>{children}</div> }

Thanks OSUblake! I felt stupid not seeing something obvious. Is that more about a css or gsap problem? I can give a codepen sample if you like. (Solved with gsap anyway)

I have two problems. 1) I'm trying to fade in images by staggering them. Fade in part works but stagger part is not. Where is the problem, am I doing a logic mistake? Is using a hook approach like in the https://codesandbox.io/s/xph6v?file=/src/useTextReveal.js would fix this? export function FadeInStagger({ children }) { const el = useRef() useEffect(() => { const animations = [] const elements = gsap.utils.toArray(el.current.children) elements.forEach((element) => { const animation = gsap.from(element, { duration: 1, opacity: 0, ease: "none", stagger: 0.3, scrollTrigger: { trigger: element, markers: true, start: "center 60%", end: "center 60%", toggleActions: "play play reverse reverse", } }) animations.push(animation) }) return () => { animations.forEach((animation) => animation.scrollTrigger.kill()) } }, []) return <div className="brands-images" ref={el}>{children}</div> } <FadeInStagger> <img src="/images/brands/samsung.png" alt="Samsung" /> <img src="/images/brands/trt.png" alt="TRT" /> <img src="/images/brands/altinpusula.png" alt="Altın Pusula" /> <img src="/images/brands/aydindogan.png" alt="Aydın Doğan Vakfı" /> <img src="/images/brands/yildizholding.png" alt="Yıldız Holding" /> </FadeInStagger> 2) And it seem's like animated elements breaks some css attributes. For example "img:hover { opacity: 1 }" is not working but "img:hover { background-color: red } works. Is this a bug? .brands-images { width: 100%; display: flex; justify-content: space-around; align-items: center; img { transition: 0.3s; opacity: .5; max-width: 100%; height: auto; } img:hover { opacity: 1; background-color: green; } }

Thanks for all the solutions OSUblake! All of them are great for me. But I must say that I now understand why GSAP doesn't go so well with React. Nonetheless it's framerwork/library agnostic and has great support though. First approach ok for me. Is other solutions has any advantage over this in terms of best practices? Custom Hook and other approach seems perfect for modularity but has some extra steps. I learned a lot about parent/child ref management from them anyway, so thanks again.

Hello! Me again. I have this codepen here: https://codepen.io/ynsmrsk/pen/PomEvLR I want to implement it to my React / Next.js project. I wanted to have gsap animation codes be seperate from my page/component codes. So the codebase could be clean and I would have reusable animation component. But I have problems with Ref's I think. Here is the error I get when I try to animate multiple imported children element with a loop, in parent gsap animation component: https://codesandbox.io/s/gsap-react-nextjs-tuli0?file=/src/App.js I may be using the Refs wrong but not sure. What do I have to change to get it to work?

Yes! that did the trick. But in this way trigger area can be narrow due to size of the element. For example when font-size set to 16px, between the scrolltrigger area narrowses so much and there is not remain enough space to scroll. Setting a padding solved the problem. I think javascript could handle it without tricky ways but this is fine too. Yes but what I want to do is mimic that airpods max animation. So I gotta slide in/out text when entering and leaving the trigger area. I tried using toggleActions but didn't get exactly what I wanted. You can see the problem here: https://codepen.io/ynsmrsk/pen/PomErRV?editors=0010 So I did it like this and it's almost perfect now: https://codepen.io/ynsmrsk/pen/PomEvLR?editors=0010 Thanks for all the help!

Thanks for the answer Jack! As you said I realized scrub is unnecessary for this type of animation. And looping through each element using forEach must be the solution. I can give up using trigger points if it's logic don't go well with the sequenced animations but what I'm trying to achieve is the animation like on Apple's AirPods Max website. If I must make this animation without using trigger points I'm totally okay with that but don't know how to do it anyway. I edited the code like this but can't go further. https://codepen.io/ynsmrsk/pen/gOWoryK?editors=0010

Sorry if this is a logic problem here. I want to show only "text 1" once it entered scroller area and keep "text 2" waited until "text 1" leaves the scroller area. When "text 1" leaves the scroller area, I want "text 2" to enter the scroller area at the same time. How can I achieve this?

Yes this was the approach I went first. Code was like the following: https://codepen.io/ynsmrsk/pen/RwVrQvv?editors=0010 This time the target's opacity can stay between 0 and 1. So the text looks a bit faded but visible for the most part in the scrolltrigger area. I wanted it to fully opaque between scrolltrigger area and totally fades out to zero when goes out from that area. -- I solved problem through adjusting y values in gsap.to() in callbacks. https://codepen.io/ynsmrsk/pen/BaRjWEO?editors=0010 Thanks for the help though.

I tried the timeline way but didn't work for me. By making it scrollable I wanted to users had the ability to see text as much as they want. Not just in a timeline duration. If you are talking about using scrolltrigger with timeline instead of callback events, I don't have an idea how to do that. And tried a tricky way like playing on start/end values but that didn't help either. Actual problem is when onEnter and onLeave, the fading in/out works but sliding text don't because of its start/end point is shifted. Do you have any other advise about achieving this type of animation? I think GSAP is robust enough to do it how apple does exactly.

Hi, After animating y axis position in callback functions like "onEnter" in ScrollTrigger, the target moves but its start/end points doesn't follow it. How can I fix it? I'm trying to make a text fade-in / fade-out animation like in the "apple.com/airpods-max" website. I might ask other questions as the work progress. ( eg: how to effectively manage multiple targets for this example )