Jump to content
Search Community

How to build that kind of animation / scroller?

sparks test
Moderator Tag

Recommended Posts

Hi everyone,

 

I'm pretty new to GSAP but really love it so far and was able to make some cool animations with it!

Now I'm facing something I can't grasp on how to build yet and would appreciate any help with that to guide me on the right path.

 

I try to explain what I want to do:

 

I have a "container" div in which I have several "slide" divs. Each of the "slide" divs contain three texts (small headline, big headline and description).

When the main "container" comes into view (with ScrollTrigger) and has come to the middle of the screen (based on its height), I'd like the first "slide" div to show up.

 

But it shouldn't just show up or fade in. As I keep scrolling, the "bigHeadline" should appear in 400px font-size (fade In), when I continue scrolling it should scale down until it reaches the position in my CodePen. As soon as it reaches that position / size, it stays like that. When I continue scrolling, the "smallHeadline" and "description" show up. They both can Fade In or whatever. After everything is visible, and I keep scrolling, I want it to stay on the screen for a few seconds / frames and then fade out. When I then continue scrolling, it should do the same with the next available "slide" div.

 

Once it reaches the last "slide" div and played the animation for it, it shouldn't do anything else. If I scroll up from that position, everything should reverse.

 

I hope I was able to explain it as simple as possible. I've attached a CodePen, so you can better see the structure. 

 

The main problem is, that I don't know where to start or how to assemble this. I'd start with building the animation for each element with a ScrollTrigger and scrub, I guess? But how do I "chain" all the other "slide" divs to that?

 

Edit: I'm also using your SmoothScroll function on the page if that is maybe important to know.

 

Really appreciate any help with this.

 

Thanks a lot.

See the Pen zYWzooO by mr-sparks (@mr-sparks) on CodePen

Link to comment
Share on other sites

The best way to get started is to start! No sorry, but it kinda is, you're working in codepen, so just open your pen start working and when you think you want to do something new hit the "fork" button and create a copy, keep doing this until your happy with it or when you get stuck post back here with a specific question.

 

A great recommendation on creating perfect ScrollTrigger animations is to remove ScrollTrigger! Seems kinda unintuitive, but just focus on the animation at first. ScrollTrigger is just animating a timeline on scroll, so until you've created your perfect animation ScrollTrigger will only be in the way and making things more complicated. Only when you're happy with the animation reintroduce ScrollTrigger, this way you split up your work and it will be easier than doing both thinks at the same time.

 

Just start, this is the best way to learn and when you get stuck post the Codepen back here and there will be someone to help you out. 

  • Like 2
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...