sagexiang

Why does "scroll-behavior: auto;" appear in the body tag when I use ScrollTrigger?What does it do?Thanks～

Yes, there are no pin jumps in codepen, but there are pin jumps in my own html ~ please see: https://soshow.cc/block/versus/ss/demo3.html

Why pictures cause pin jumps? when the animation inside the fixed element starts ~ I set ～ scrub: true Please visit the web page https://soshow.cc/block/versus/ss/demo3.html

Please tell me how to set it according to the following code: when the top of ".section" reaches 30% of the distance from the top of the window, automatically capture the top of ".section" to the top of the window ~ Thank you! const tl = soshow.timeline({ scrollTrigger: { trigger: ".section", pin: true, // pinSpacing: false, start: "top top", end: "+=" + (lis.length - 1) * 100 + "%", scrub: true, snap: { snapTo: 1 / (lis.length - 1), duration: 0.2, }, } });

You solved my pain, thank you so much! Sorry, I am a perfectionist in details, thank you GSAP~🫡❤️

Is this way of writing reasonable? When there are two divs in the panel that need to be animated simultaneously~Is there a more advanced way of writing it? tl.to(".section .panel div:first-child", { duration: 1, x: "80vw", stagger: 1, }) .to(".section .panel div:last-child", { duration: 1, x: "-80vw", stagger: 1, }, "<");

What you said is right, I just want to know the reason~ why is not this? snap: 1 / (sections.length - 1) = 1 /3

Is this code written correctly? Is there a better way to write it? tl.to(".items li .item:first-child", { duration: 1, xPercent: 100, yPercent: -20, stagger: 1, }) .to(".items li .item:last-child", { duration: 1, xPercent: -100, yPercent: 20, stagger: 1, }, "<");

Can the natural scrolling stops response time be controlled?

I want to know: There are 4 panels in total, why do only 3 move to the left? Is this dictated by the underlying code?

I really like scroll-snap-stop: always in CSS Scroll Snap~ But I think you are right. Having to capture pauses one by one may not be liked by users~ Thank you so much! The United States is really great, we are very envious of it. When I develop my product, I will definitely thank you very much and buy premium membership~❤️👍👍👍👍👍I want to add a small dot to the switch to indicate the current one. Is there any good way to implement it? As shown in the picture~

Please tell me how to increase the snap speed. Capture is too slow now. And how to limit the user to move only one block to the left at a time when the user slides the page quickly?

I can see gsap.registerPlugin(ScrollTrigger) & gsap.registerPlugin(Observer)~ What is the relationship between Observer() and ScrollTrigger.observe()? Thank you~!

https://codepen.io/GreenSock/pen/YzyaKrq When there are regular parts before and after the content of this effect, the browser scroll bar will be confused and the page turning will be abnormal. What is the best way to achieve this situation? The built-in snap effect of GSAP is too slow. I hope to scroll up and down so that when I encounter a page turn, I can turn the page smoothly ~

Do I need to register the plug-in if I only use GSAP on the PC browser and Mobile browser?

GSAP Version 3.12.1

The latest version of GSAP is not 【gsap.registerPlugin(ScrollTrigger)】, but it still works normally, so I want to know: is 【gsap.registerPlugin(ScrollTrigger)】 necessary?

Thank you so much! I mean is there a better, simpler and more efficient way for this requirement?

Is this the best way to resolve block overlaps? ? By adding 【toggleClass: "active"】【.block{visibility: hidden;}】【.active {visibility: visible;}】 https://codepen.io/Sage-Xiang/pen/XWyWEGr

<section class="block"> <b>1</b><strong>A</strong> </section> <section class="block2"> <b>2</b><strong>B</strong> </section> <section class="block3"> <b>3</b><strong>C</strong> </section> I want show the "section" when it is triggered, For example : "display:block".

Thank you! How to show the box when it is triggered?

How to deal with ScrollTrigger overlap? What is the best way?

Thank you so much! But the overall height of the page has doubled, what is the reason for this?

gap means between previous end and next start.

defaults: { ease: "none" } Is it necessary?