sagexiang
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by sagexiang
-
-
Yes, there are no pin jumps in codepen, but there are pin jumps in my own html ~ please see:
-
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
See the Pen abMKoPR?editors=0010 by Sage-Xiang (@Sage-Xiang) on CodePen
-
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,
},
}
});See the Pen yLwKeGM?editors=0010 by Sage-Xiang (@Sage-Xiang) on CodePen
-
You solved my pain, thank you so much! Sorry, I am a perfectionist in details, thank you GSAP~🫡❤️
-
3
-
-
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,
}, "<");See the Pen yLwKeGM?editors=0010 by Sage-Xiang (@Sage-Xiang) on CodePen
-
2 hours ago, GreenSock said:
我不明白这个问题。您是说您希望第四个面板在最后也从屏幕左侧飞出吗？那么屏幕会完全空白吗？你几乎可以获得任何你想要的效果......我只是不清楚你在问什么。如果有 4 个面板，您自然只希望其中 3 个移出屏幕，这样您就不会留下空屏幕，对吗？
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,
}, "<"); -
12 hours ago, GreenSock said:
Just beware that it has to wait until natural scrolling stops for a brief moment before it begins the snapping motion
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?
-
11 hours ago, GreenSock said:
对于速度，只需使用一个对象进行捕捉并定义持续时间：
请注意，它必须等到自然滚动停止一小会儿才能开始捕捉运动。否则，可能会干扰用户交互。
我不确定你在这里的意思。您是说您确实想强制用户无法拖动滚动条超过一定的量吗？抱歉，这听起来像是一个糟糕的用户体验。作为用户，如果网站对我这样做，我会讨厌的。但也许您想完全消除滚动条，而只使用类似滚动的事件来触发动画。这就是观察者插件的用途。 👍
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?
See the Pen VwRQXxr?editors=0010 by Sage-Xiang (@Sage-Xiang) on CodePen
-
10 hours ago, mvaneijgen said:
您是否见过观察者插件 https://gsap.com/docs/v3/Plugins/Observer/而不是使用滚动条，它只使用滚动事件本身并基于此执行逻辑。
这是一个将普通滚动与观察者插件 混合在一起的示例
希望它有帮助，祝补间快乐！
I can see gsap.registerPlugin(ScrollTrigger) & gsap.registerPlugin(Observer)~ What is the relationship between Observer() and ScrollTrigger.observe()? Thank you~! -
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 ~
See the Pen YzyaKrq by GreenSock (@GreenSock) on CodePen
-
7 hours ago, mvaneijgen said:
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?
-
7 hours ago, Cassie said:
I don't know what you mean by 'best way' I'm afraid, if it works for you then it looks fine to me! There aren't really best ways, just different solutions for different use cases.
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;}】
-
<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?
Why does "scroll-behavior: auto;" appear in the body tag?
in GSAP
Posted
Why does "scroll-behavior: auto;" appear in the body tag when I use ScrollTrigger?What does it do?Thanks～