bs.choi

@Cassie thanks! I will read the article and refer to it and implement it again.

@elegantseagulls Thank you for answer. I will look at the example you attached and refer to it and implement it again.

hello. I am implementing coverflow. The codeSandBox below is my current implementation. https://codesandbox.io/s/keen-keller-yci76t?file=/src/App.js Navigation and when clicking on each item, it goes over and works properly. However, if you try dragging, coverflow starts working when the dragging ends. I tried several methods, but I didn't know how to give an animation while dragging, so I only implemented it with onDragEnd() as the next best solution. Below is what my example would look like. https://codepen.io/jh3y/pen/WNRvqJP I want to implement a coverflow that moves naturally when dragging like the example above. However, I want to make the item index move from the first to the last and then from the last to the first instead of an infinite loop like the example above. For example, { loof: false } in swiper.js. I've tried gsap's codepen and a lot of googling, but I haven't been able to solve it yet. can you help me? Lastly, I borrowed the help of a translator because I am not good at English. So it can be difficult to read. thank you.

@OSUblake For this reason I can't use <Image />

@OSUblake thank you so much. I found the cause of the issue with the first question. All images used in my project have a dynamic height (ex. width: 100%; height: auto;) The cause seems to be because the image is refreshed in a state where the height of the image is not recognized before the image is loaded. The reason is, if you do not set the height to be responsive and set it to 150px, the height will be set properly in any situation. So I mean. Is there no way to refresh the image after all images are loaded while maintaining the current state (height: auto) without fixing the height of the image? I made all the images into promise objects and refreshed them when they were all completed through promise.all, but this didn't work. And when I used 'ZachSaucier's solution in the link above, it worked fine, but when I have a lot of images, it seems to perform poorly because of too many calls. However, no matter how many images I have in my project, it won't go up to 100. So it doesn't really matter? When I applied all the work done so far and took a picture of the console, the maximum number of calls in ScrollTrigger.refresh() was about 60 times. (Since ssg build is carried out through next export, it cannot be preloaded using Image api.)

@OSUblake This part found the problematic component. Let's try to solve it ourselves! I've been thinking about doing this for a while, but I didn't want to use a third-party library, so I was looking for another way, thank you! useEffect(() => { ScrollTrigger.refresh(); }); Is it ok to refresh the scrollTrigger every time the page is routed in _app.js like this? If you take a picture on the console, it does not operate repeatedly dozens of times, but only once. And maybe this is the last question. Thank you so much for the great answers so far. There are anchors like tabs that change their associated contents when clicked. Is there any performance problem with a method like below code?? When refreshed with onStart, it is sometimes not reset to the changed height, so onUpdate was used. function anchor(e) { const target = e.currentTarget; const tabNum = target.getAttribute("data-tab"); const tabCon = document.getElementsByClassName("tab_contents_box"); const offsetY = document.getElementById("header_wrap").offsetHeight; clear(target.parentElement); target.parentElement.classList.add(`${styles.active}`); gsap.to(window, { duration: 1, scrollTo: { y: tabCon, offsetY: offsetY - 1, }, ease: "power4.inOut", onUpdate: () => ScrollTrigger.refresh(), }); setTabNum(tabNum); } If you look at the console, it takes about 60 console shots while changing the contents to fit each anchor, and then stops. Thank you for your hard work over the past few days with my questions using the translator.

@OSUblake https://codesandbox.io/s/awesome-clarke-r9m579?file=/pages/_app.js:1560-1573 Wow!! thank you. Thanks to you, I know how to create the next project example through 'codesandbox'. The code in that link is not exactly the same as my project, but I have made the structure as similar as possible. First of all, the first question was solved through _app.js 28~33 lines. (It was not found in this 'codesandbox' example, but in my actual project. When you first enter the main page > go to the sub page, the height is properly reset according to the content of the sub page. And when you go back to the main page, the smoothScroll function The height set by refreshHeight is different from when you first entered. // In that state, if you press the route button to the main page once more, it works normally again. // This part is not an issue found in 'codesandbox', so my project It seems to be a problem, but if there is something to be expected, please advise.) Regarding the second question, you can still see that the scrolling goes up when you move the page. I scroll to the top, but I hope the process is not visible to the user. The last question is, is there a part in my code related to scrollTrigger that I wrote wrong or should I fix it to improve performance? thank you.

@OSUblake Sorry, I tried to post an example through JSFiddle, but I don't know how to make a demo of my source. I'll mention you again in the comments if I find a way to make an example, thanks

Hi. First of all, I apologize for my poor English using a translator. I am making a project using next.js. I implemented smooth-scroll using scrollTrigger while looking at the example in the official documentation. It was working fine, but an unexpected problem occurred when the subpage was added. // set(resize) height function refreshHeight() { const headerH = document.getElementById("header_wrap").offsetHeight; height = scrollContent.clientHeight + headerH; scrollHeightBox.style.height = height + "px"; } ScrollTrigger.addEventListener("refreshInit", refreshHeight); As set in the code above, the height of the scroll-wrapper (div) remains the same as the height set in the main page even after moving to the subpage. So I added the code below to fix this. const routeBtn = document.querySelectorAll(".route"); routeBtn.forEach((elem) => { elem.addEventListener("click", ScrollTrigger.refresh); }); As a result, it was confirmed that there is a slight delay when moving the page, but the height is reset properly. But this time, it doesn't change any more after moving once like Main Page > Sub Page, Sub Page > Main Page. Can you help me? There are three main problems for me. 1. When moving a page, I would like the scrollTrigger to be reset to match the content height of the moved page. (softly) 2. When routing using the Link tag provided by next.js, it automatically scrolls to the top of the page. Blocking that scroll doesn't make it look smooth, and leaving it on doesn't make it look smooth. I also want this to look soft. (Do you think page conversion can be solved through a third-party library?) 3. Is there a way to further optimize the overall performance of scrollTrigger in my code? I wanted to provide an example with codepen, but I don't know how to show the code of the next.js project in codepen, so I attach the code. Below is my whole code. // react hook import { useEffect, useRef } from "react"; // component import Header from "@/components/Header"; import Footer from "@/components/Footer"; // style import "@/styles/reset.css"; import "@/styles/globals.scss"; // library import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); // render export default function MyApp({ Component, pageProps }) { const mainRef = useRef(null); const scrollRef = useRef(null); function setHeight(mainRef) { const target = mainRef.current; const headerHeight = document.getElementById("header_wrap").offsetHeight; target.style.marginTop = `${headerHeight}px`; } useEffect(() => { setHeight(mainRef); smoothScroll(scrollRef); window.addEventListener("resize", () => { setHeight(mainRef); }); }, []); return ( <div> <Header /> <div className="scroll_wrap"> <div className="scroll_container" ref={scrollRef}> <main ref={mainRef}> <div> <Component {...pageProps} /> </div> </main> <Footer /> </div> </div> </div> ); } // smooth scroll function smoothScroll(ref) { const scrollContent = ref.current; const scrollHeightBox = scrollContent.parentElement.parentElement; let height; // set(resize) height function refreshHeight() { const headerH = document.getElementById("header_wrap").offsetHeight; height = scrollContent.clientHeight + headerH; scrollHeightBox.style.height = height + "px"; } ScrollTrigger.addEventListener("refreshInit", refreshHeight); gsap.to(scrollContent, { y: () => document.documentElement.clientHeight - height, ease: "none", onUpdate: ScrollTrigger.update, scrollTrigger: { invalidateOnRefresh: true, start: 0, end: () => height - document.documentElement.clientHeight, scrub: 0.6, }, }); // page route - ScrollTrigger height refresh const routeBtn = document.querySelectorAll(".route"); routeBtn.forEach((elem) => { elem.addEventListener("click", ScrollTrigger.refresh); }); } thank you.

hi. First of all, I'm not good at English, so I'm using a translator. please understand. I made a marquee using gsap tween. The function works without any problems. However, when a certain button is pressed, there is an event that the marquee text is changed. Here's the problem. As the text is changed, there is a difference from the x value set when tween is rendered. In my opinion, as the text changed, the width also changed, but it seemed to be a problem because the variable 'distance' was not reassigned after calculation with the changed value. I used MutationObserver to reassign the value of the variable set to the x value when the text changes, but it doesn't work properly. I've searched several forums and documentation, but haven't been able to find the answer I'm looking for. What did I do wrong? current code : https://jsfiddle.net/3bap6dcw/2/ In the above example, even if the marquee text is changed by pressing the 'short' and 'long' buttons, the value of the distance variable assigned to x is reassigned and I want it to proceed like the first time. What should I do? Please help me! Thank you.

@OSUblake Wow! I guess I was thinking too short. Why didn't you think of that?? thank you!!!!!!!!!!!!!!!!!!!!!!!!!

@OSUblake hi. I've seen many examples of smooth scroll using scrollTrigger. However, if you use a pin to fix the contact and marquee divs, scrollTrigger works when you scroll in the contact and marquee areas. The function I want is that the scrollTrigger does not respond when the mouse is placed on the contact and marquee divs and scrolls, and the scrollTrigger works only when scrolling in the archive div. So, I set the scroller to the archive div rather than the default (viewport) in the scrollTrigger option, and the problem occurred. https://jsfiddle.net/9srz07nt/ Like the link above, scrolling does not respond in contact and marquee divs, and I want to implement smooth scroll using scrollTrigger only in archive div so that it responds. Thanks for the example you posted

hi! I am making smooth scroll using scrollTrigger. But unlike many examples I need smooth scroll only in a specific area. In the link below, I want the contact and marquee areas to not scroll, and only the archive to be a smooth scroll. https://jsfiddle.net/js67bxvu/ Changing the scroller to default in the scrollTrigger option and changing the contact and marquee divs to position: fixed works similarly, but that's not what I want. Because scrolling on the contact and marquee divs also scrolls the archive. How can I use gsap scrollTrigger to smooth scroll only the contents in a specific box? I'm not good at English, so I ask through a translator. Thank you for your understanding.

@그린삭스 that's right!! this is it! thanks for your help

Hi. I made a follow cursor using gsap's quickSetter and ticker. Originally there was no problem, but a bug occurred while refactoring. I really don't know why. new ver https://jsfiddle.net/kebqswL4/6/ previous ver https://jsfiddle.net/kebqswL4/7/ The reason I did the refactoring was because I wanted to handle similar calculations in one function. Please help me...

@OSUblake I saw an example and implemented it. However, additional elements are moving at the same time. Is this method wrong? I've looked at the official documentation, but I don't know how to add duration or delay. I want to make a clean and fast (without a lot of easeing) function like the example I asked in the first question. https://jsfiddle.net/b5t9jxh6/4/ gsap is so amazing and awesome but still too hard for me....

@OSUblake opps, Sorry, I spelled the wrong version. I'm using version 3 in my project right now. https://jsfiddle.net/5dpzhfe0/28/

Hi. I made a custom cursor with gsap.TweenMax. However, looking at a few examples, they are created using set() or quickSetter(). The official documentation says there is a performance difference, so I would like to improve the performance. But I'm not sure how to refactor it. (I want to keep the function as it is) Please advise. thank you. https://jsfiddle.net/5dpzhfe0/28/

@Cassie okay Thank u. Have a good year end!

@Cassie ye i got it. thank you!!! one more, What is the performance difference between helper functions or 3rd party libraries?

hi. I found scrollTrigger.scrollerProxy while looking for GSAP scrollTrigger to do smooth scrolling in a specific section of my page, and I was looking at the descriptions and demos. Among the demos, I saw a demo that used only scrollTrigger and a demo that added a third party library. (https://codepen.io/GreenSock/pen/oNLqgBm) There a question arose. Why are you using these together? You can implement smooth scrolling with only scrollTrigger (native), and smooth-scrollbar can implement the same function independently, so why use the two together? In my page, the scrollTrigger and smooth-scrollbar functions were applied first because they needed a function when they were used together rather than independently implemented functions. However, I'm curious about the difference between writing the two separately and writing them together. Lastly, I'm sorry for my poor English