Problem with scrollTrigger, moving headers/text using gsap.to()

[Selenee]

Hello there

This is my first program with this library so im little bit confused for now.

I created a little demo showing my problem.

 

I want to create effect that triggers on scroll and moving my headers to the center of content. This works ok, as you can see in my code.

Start position should be out from left side of window and moves to center. Looks "okay" but i have a couple questions:

 

1. How to avoid: my header jumps on center of the content when you scroll back (it should be out from window). U can see that text moves on the left side (out of the window) and immediatley jumps on center. - it should be stay out of the window.

 

https://greensock.com/docs/v3/GSAP/gsap.to()

Have I done something wrong?  Maybe because im using startAt{}?

instead use fromTo? - i tried with this but had problem with working well on my class using more than 1 header. Probably it is caused because of my low experience.

 

2. How to slow my animation? - too agressive for now.

3. A little problem to understand syntax of ScrollTrigger start: 

syntax start: "trigger" "viewport" ?

I want start on top of my page and end of the center. In my main code i have navigation menu and u can jump on header and center of section pressing the appropriate button (anchor). - then header has to be centered.

• When you scroll up header should hide himself. - a little animatin
• When you scroll down (out form the window header) - header should move smoothly to center.
• When you scroll down (from center position) - nothing.

So should i use       start: "center bottom",?

It looks ok. But when im scrolling up im unable to see if header goes back out from the window. 

 

Maybe this is a simple answer but im tired and i'm unable to figure it out. Thanks for any help and sources!

See the Pen WNgWNra by Selenee (@Selenee) on CodePen

[elegantseagulls]

Using from is probably a better bet for this animation:
to lengthen duration, you'll want to add a duration: to your tweens.

See the Pen NWLmGbO?editors=0110 by elegantseagulls (@elegantseagulls) on CodePen

 

I'm a bit confused as to what you're looking for for "#3"

[Rodrigo]

Hi @Selenee and welcome to the GreenSock forums!

 

The start position considers the position of the element relative to the viewport. So "center bottom" means when the center of the trigger element hits the bottom of the viewport. In the case of "center center" means when the center of the element hits the center of the viewport. The default is "top top", when the top of the element. Right now your example has "center 60%", that means when the center of the trigger hits 60% of the viewport from the top, while @elegantseagulls example has "center 70%". In these situations is always a good advice to use markers: true in your configuration in order to better understand how start/end points work and when your animations will be triggered.

 

Finally I recommend you to read the ScrollTrigger docs to get a better grasp of how the plugin works:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Hopefully this helps.

Happy Tweening!

[Selenee]

Hey,  @elegantseagulls thank you for this example! Looks really good.

Thanks for explanation and advice @Rodrigo. It really helped me!

I changed my code and tried something like that: 

See the Pen NWLmyoX by Selenee (@Selenee) on CodePen

I think its the similar effect like Elegantseagulls did? (Only changed my x -  changed my mind)

 

Thank you for help ?!