Scroll animation almost smooth

[Reinoud]

Hi Guys,

 

First Time using this forum, and I'm scared.... 

 

I made a simple scroll animation, still took me a while since I'm still learning and trying a lot of different ways. 

I was just wondering what the best way is to make this animation run smoothly.

Right now the text is going from y: -100 to y: 100, but since I'm starting with opacity: 0 and wanting to end there as well, I made two fromtTo()'s.

But (i thought) to make it run naturally one ends at y:0 and the next one starts at y:0. this makes it stop for a second. What's the best way to just make the text go from y: -100 to y: 100 in one smooth motion?

 

Thanks a bunch! 

See the Pen dyGNRyK by REDDSTONE (@REDDSTONE) on CodePen

[ZachSaucier]

Hey Reinoud and welcome to the GreenSock forums!

 

1 hour ago, Reinoud said:

First Time using this forum, and I'm scared.... 

Why are you scared?

 

1 hour ago, Reinoud said:

What's the best way to just make the text go from y: -100 to y: 100 in one smooth motion?

I showed how to do this earlier this week in this thread:

Basically use three tweens but use one for the movement and two different ones for the opacity  

[Reinoud]

Thank you Zach, I'll give it a try. 

 

wasn't really scared. 

I don't post all that much on forums, and I learned to program by myself, so most of the time I feel like I'm probably doing it all wrong, but if it works I'm happy! Just when I show my code to pro's like you, I always feel like I'm going to get all kinds of comments on how my code looks terrible ?. 

Luckily I couldn't all that much wrong with this code ?

[ZachSaucier]

9 minutes ago, Reinoud said:

I learned to program by myself

Didn't we all?  

 

9 minutes ago, Reinoud said:

I always feel like I'm going to get all kinds of comments on how my code looks terrible ?. 

Luckily I couldn't all that much wrong with this code ?

Hopefully we do it in an encouraging way to build you up, not tear you down.

 

The only thing that I might have done differently in your code is using a .to() tween instead of .fromTo() since you're using the default values as the start values for several of your tweens. Using relative tweens is one of the tips in my article on animating efficiently which I recommend.

[Reinoud]

Quote

Didn't we all?  

True that!

 

Quote

Hopefully we do it in an encouraging way to build you up, not tear you down.

So far, this forum seems to really cool!

 

Quote

The only thing that I might have done differently in your code is using a .to() tween instead of .fromTo() since you're using the default values as the start values for several of your tweens. Using relative tweens is one of the tips in my article on animating efficiently which I recommend.

Awesome man! I've gotten so much cool stuff from CSS-tricks in the past years. I can add this one to that list! 

[PointC]

4 hours ago, Reinoud said:

First Time using this forum, and I'm scared.... 

I can understand that statement. I was super nervous about my first post. I didn't even know how to get the index of an item in an array.

 

1 hour ago, Reinoud said:

So far, this forum seems to really cool!

This forum is the best. This Sunday marks 5 years since I asked my first question and I've posted once or twice since then.  You'll learn a lot and the community is super friendly. If you're ever bored and need something to do, you can check out my origin story. Happy tweening and welcome to the GreenSock neighborhood.