Jump to content
Search Community

Section and text animation on scroll

edisonbk test
Moderator Tag

Recommended Posts

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

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!

 

  • Like 5
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...