edisonbk Posted January 29, 2022 Share Posted January 29, 2022 Hello, I am working on a web project and it seems GreenSock is a great start. I have a few questions after some intensive research. 1. How to snap instantly on scroll, even just scrolling a few pixels? The example you put on codepen ( See the Pen YzyaKrq by GreenSock (@GreenSock) on CodePen ) is using css scroll-snap. It stops when you stop scrolling, then snap to the next/current section. I am looking for something smoother like fullpage.js or onepage-scroll.js (http://peachananr.github.io/onepage-scroll/Demo/demo.html). Is it possible? I also went through a similar thread below, but the solution won't work well after the browser is resized. 2. For the horizontal sections, how to implement the following effect (section wipes in 45 degrees) on scroll? https://www.transition.style/#in:wipe:top-left 3. Text animation on scroll. (I want to get some rough ideas how to do the followings using GreenSock) - All letters of a word are placed on a random spot within the viewport. - Letters are returning to the center of the screen and composing the word. - The fill color is fading out (keep the outline only). - The outline is animating out. Something like this See the Pen XBGqro by davebitter (@davebitter) on CodePen - Another word in black is fading in and it keeps increasing its size, then the next section reveals from the black color. Sorry for so many questions and I hope someone can point me to the correct direction. Thank you so much!! See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 29, 2022 Share Posted January 29, 2022 Welcome to the forums @edisonbk As we state in the forum guidelines, we don't have to capacity to explain how to create custom effects, but we'll try our best to nudge you in the right direction if you get stuck. The best way to get help is by providing a minimal demo, meaning the bare minimum need to show an issue or what you are trying to do. 😀 1. As Zach stated in that thread you linked to, it's a hack. A lot of people seem to conflate what fullpage.js does with ScrollTrigger as they both seem to be controlled by scrolling, but they are completely different. Fullpage is controlled by mouse wheel and touch events, while ScrollTrigger is completely driven by the scrollbar position. Since ScrollTrigger is controlled by the scrollbar, snapping cannot happen until scrolling has stopped. If you're going for the fullpage effect, you're going to have to code that up by hand, kind of like demo. Notice how there are no scrollbars. See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen 2. I'm really not sure what you mean by apply that effect to horizontal sections, but the animation in general is fairly simple, you would just animate the clip-path property. 3. For that animation, it would be best to create the text as a path in an SVG editor, wrap each letter in <g> tag, and then you can easily animate from a a random position using GSAP's built in random utility. tl.from(myElement, { x: "random(-400, 400)", y: "random(-400, 400)" }); To fade out the fill, you would just animate the fill-opacity of the element, and for the stroke animation you can use the DrawSVGPlugin. And like I said above, if you get stuck, just create a minimal demo showing the issue. Good luck with the project! 5 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now