weti Posted June 10, 2023 Share Posted June 10, 2023 I wanted to do a opacity animation like apple on their jobs website: https://www.apple.com/careers/us/. They are animating the text first to 0.5 opacity and then to 1 and both on scroll. I don't know if this wanted from them but I like it and wondered how I can achieve this. The second script in the JS didn't work as expected. Thanks for all kind of helpings. See the Pen NWEqrZX by weti (@weti) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted June 10, 2023 Solution Share Posted June 10, 2023 Hi @weti welcome to the forum! I don't think the apple site doesn't animate to 0.5 and then to 1 it just animates from 0 to 1 on the users scroll. This is what ScrollTrigger is build for. Your approach isn't wrong, but having a timeline which gets controlled by Scrolltrigger, is the much easier approach. Keep in mind: The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and will save a lot of headache when debugging. Hope it helps and happy tweening! See the Pen PoxqGbO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
weti Posted June 10, 2023 Author Share Posted June 10, 2023 46 minutes ago, mvaneijgen said: Hi @weti welcome to the forum! I don't think the apple site doesn't animate to 0.5 and then to 1 it just animates from 0 to 1 on the users scroll. This is what ScrollTrigger is build for. Your approach isn't wrong, but having a timeline which gets controlled by Scrolltrigger, is the much easier approach. Keep in mind: The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and will save a lot of headache when debugging. Hope it helps and happy tweening! Hey, thank you for welcoming me! This made sense yes. Thank you! 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