Jump to content
Search Community

It is possible to change only font color during scroll?

ncti test
Moderator Tag

Recommended Posts

On 1/15/2021 at 3:12 PM, mikel said:

Hey @ncti,

 

Start your adventure step by step.

 

 

 

 

Happy tweening ...

Mikel

 

Thank you for your answer Mikel.

My idea is that when you scroll, the middle section lights up first, then the left and right, just scrolling.

I almost achieved this effect, but I would like to prevent the fixed position on the element that should be animated as it creates a lot of empty space

Ultimately, I would like the boxes to brighten by scrolling by scrolling, and then only after they are all brightened I can go lower.

Link to comment
Share on other sites

4 hours ago, ncti said:

animation is making but section is moving.

Do you mean that there is a small jump when the element is pinned and un-pinned? If so you can try some different values for the anticipatePin property to see if that helps.

 

Besides that, I don't understand what you're asking our help with.

Link to comment
Share on other sites

Hey @ncti

 

I'm guessing that this is what you mean by 'moving' (see pens in full pageview - it doesn't really show in the previews in here)

 

See the Pen d68c2513215e13e70d4b647cc89cf0b5 by akapowl (@akapowl) on CodePen

 

 

If you want not only the #pricing to stay fixed, but everything else too, you should apply the pin to an element that contains all of what you want to stay still.

 

I added a .content-wrap here that surrounds all your content there, and pin that one instead.

 

See the Pen a4900831167d41f67171a460b7767dba by akapowl (@akapowl) on CodePen

 

 

 

On a sidenote:

I wouldn't load all the js in the head of the page - this could cause issues with elements not being fully loaded when your js gets executed.

You also have transitions applied via CSS to elements you want to be tweening the color on - those transitions interfere with GSAP's tweens, so I got rid of them. 

 

 

Hope this helps.

  • Like 3
Link to comment
Share on other sites

@ZachSaucier

I try to explenation it once again.
I'd like an effect like on this page : https://www.the-cradle.de/
When you scroll down to image with tower, section not moving, but animation is doing.

 

I try to figure it out again.
I would like to get an effect like on this page: https://www.the-cradle.de/
When you scroll down to the tower image, the section doesn't move, but the animation works.


My section moves as I scroll. The section with the tower from the example is static, but it is animated as it scrolls.
My section animates as you scroll, but the entire section is moving.

I would like my section to be like the one in the example, that only the animations will not move when you scroll, and after the animation is finished, I can only go lower.

Link to comment
Share on other sites

  • 1 year later...
  • 3 months later...

Welcome to the GSAP forums, @Wiktoria

 

Under the premise of how mikel's example works, I'm not sure if it would even be possible to get it working with centered text-align via tweening on the width, unless you were to wrap every single word in a div and set up a span inside every of those divs. I might be wrong, but I couldn't get it to work otherwise. I might very well be wrong though.

 

See the Pen zYRqbwm by akapowl (@akapowl) on CodePen

 

 

 

Now since that could/would potentially lead to a ridiculous amount of divs and spans with more text, like in your case, you might be better off just creating that effect by tweening on clip-paths instead. I hope that will help. Happy tweening!

 

See the Pen VwQaRGL by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

  • 7 months later...

 

With the setup as it is in any of the demos above, probably not.

 

First you'll need some sort of way to target any specific character on hover - for that, I would suggest having a look at SplitText, which is a Premium Plugin for Club GreenSock members of the ShockinglyGreen tier and above, so you might want to consider joining the club. Of course, you could somehow try splitting your text into individual characters yourself by wrapping each character manually, but SplitText will spare you quite some time and headache - plus you will get support for it here, whereas that likely won't apply to issues with your own implementation or a 3rd party script.

 

If you have the basic setup done you will need to adjust the ScrollTriger logic to accomodate for those changes AND to work alongside some logic you'll need to add for the hovering of a character. Instead of tweening on a clip-path via ScrollTrigger, you could e.g. tween on the color of each individual character in a staggered manner (this will not result in the exact same effect you see above, but it should generally be pretty similar) and then maybe add logic for overwriting tweens on mouseenter/mouseleave of any specific character to change its color when hovering.

 

If you have any GSAP specific questions along the way, please make sure to create a new thread with a minimal demo of what you have tried.

 

Good luck and happy tweening!

 

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