ncti Posted January 15, 2021 Share Posted January 15, 2021 Hi Is it possible to change the font in the box while scrolling? I have three boxes in a row with the text and while scrolling, I would like the text color in the middle left and right to change sequentially. Link to comment Share on other sites More sharing options...
mikel Posted January 15, 2021 Share Posted January 15, 2021 Hey @ncti, Welcome to the GreenSock Forum. It can be done. Show us your case in a CodePen. Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
ncti Posted January 15, 2021 Author Share Posted January 15, 2021 I am just starting my adventure, please understand See the Pen LYRMpJN by memek42 (@memek42) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted January 15, 2021 Share Posted January 15, 2021 Hey @ncti, Start your adventure step by step. See the Pen WNGLrxm?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
ncti Posted January 18, 2021 Author Share Posted January 18, 2021 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 More sharing options...
mikel Posted January 18, 2021 Share Posted January 18, 2021 Hey @ncti, Hmmm - this forum is not a 'request concert'. Please focus on understanding questions about GSAP. See the Pen yLaZvoa by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
ncti Posted January 18, 2021 Author Share Posted January 18, 2021 I'm sorry. I forgotten add codepan with my current work I mean, that a want to minimalize moving all boxes, and minimalize white background. I want to focus on changing font color on scroll. So until he changed color he shouldn't go lower See the Pen LYRMpJN by memek42 (@memek42) on CodePen Link to comment Share on other sites More sharing options...
ncti Posted January 19, 2021 Author Share Posted January 19, 2021 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 making. Iny my case, animation is making but section is moving. Link to comment Share on other sites More sharing options...
mikel Posted January 19, 2021 Share Posted January 19, 2021 Hey @ncti, Please take a look at the notes and examples for the property pin. In my last example the wrap is pinned during the color changes. Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
ncti Posted January 19, 2021 Author Share Posted January 19, 2021 Yes but I'd like to lock pinned section during animation and unlock after animation end Link to comment Share on other sites More sharing options...
mikel Posted January 19, 2021 Share Posted January 19, 2021 In my last example the wrap is pinned during the color changes. And it will be unpinned after animation. Can you see that too? Link to comment Share on other sites More sharing options...
ncti Posted January 19, 2021 Author Share Posted January 19, 2021 Yes, I saw your example. My problem is I scroll down and my section is pinned it creates a lot of white background on top and bottom and won't lock up, it moves Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 19, 2021 Share Posted January 19, 2021 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 More sharing options...
akapowl Posted January 19, 2021 Share Posted January 19, 2021 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. 3 Link to comment Share on other sites More sharing options...
ncti Posted January 19, 2021 Author Share Posted January 19, 2021 @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 More sharing options...
akapowl Posted January 19, 2021 Share Posted January 19, 2021 @ncti If I understand correctly this should be exactly what I showed above. 1 Link to comment Share on other sites More sharing options...
ncti Posted January 19, 2021 Author Share Posted January 19, 2021 Just now, akapowl said: @ncti If I understand correctly this should be exactly what I showed above. Thank you ! I'll check it Link to comment Share on other sites More sharing options...
Sunny Shah Posted January 30, 2022 Share Posted January 30, 2022 I wanted to know that may I change the Text color upon scroll like there's an animation used in https://www.lucidmotors.com/air on the very 1st content of Introducing Lucid Air..... You can see there kindly let me know as soon as possible. Link to comment Share on other sites More sharing options...
mikel Posted January 30, 2022 Share Posted January 30, 2022 @Sunny Shah There are different ways. Here is a variant for a color change. See the Pen GROpYbO by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 6 Link to comment Share on other sites More sharing options...
Wiktoria Posted May 10, 2022 Share Posted May 10, 2022 @mikel Thank you very much for your reply I used your example in my project, but there is a problem with the animation when the text is centered. I would be very grateful if you could tell me how this can be corrected: See the Pen eYVZxJz by Wikt (@Wikt) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted May 10, 2022 Share Posted May 10, 2022 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 2 Link to comment Share on other sites More sharing options...
dotsinspace Posted December 23, 2022 Share Posted December 23, 2022 is it possible to only show text colored where mouse pointer ends. means if mouse pointer is on end of letter 'r' in given text 'Hover' then text 'hove' should be green expect letter 'r' ? Link to comment Share on other sites More sharing options...
akapowl Posted December 23, 2022 Share Posted December 23, 2022 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! 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now