Dj.Sunrise Posted March 4, 2021 Share Posted March 4, 2021 (edited) Hello. Is it possible to do masked gradient reveal text or image like on https://www.apple.com/iphone-12-pro/ 1. I want to reveal first headers on page load like on iphone presentation. It's reaveling left to right. 2. Other sections i want to reveal on scroll trigger with scrub option with gradient also. See the Pen jOVpLRo by AlibekKulseitov (@AlibekKulseitov) on CodePen Edited March 4, 2021 by Dj.Sunrise added word "masked" Link to comment Share on other sites More sharing options...
Dj.Sunrise Posted March 4, 2021 Author Share Posted March 4, 2021 I found this article but that's not a good idea to use inline svg. As i see on apple's website they use css gradient Link to comment Share on other sites More sharing options...
Dj.Sunrise Posted March 4, 2021 Author Share Posted March 4, 2021 1 hour ago, Dj.Sunrise said: 1. I want to reveal first headers on page load like on iphone presentation. It's reaveling left to right. First task solved :)) Now I need to addmask dissapering while scrolling down 1 Link to comment Share on other sites More sharing options...
akapowl Posted March 5, 2021 Share Posted March 5, 2021 11 hours ago, Dj.Sunrise said: Now I need to addmask dissapering while scrolling down To get there you'd best want to loop over all your sections or titles and forEach create the animation and ScrollTrigger targetting the specific title and using that or the specific section itself as a trigger. This recent thread here contains one example of how you could achieve that Since you did not set the mask-image to cover your title via CSS, I'd recommend doing so and/or using a fromTo tween for the animation to make sure, your titles are hidden before they reach the trigger. Give it a try and let us know if you run into any problems along the way. 3 Link to comment Share on other sites More sharing options...
Dj.Sunrise Posted March 5, 2021 Author Share Posted March 5, 2021 12 hours ago, akapowl said: To get there you'd best want to loop over all your sections or titles and forEach create the animation and ScrollTrigger targetting the specific title and using that or the specific section itself as a trigger. This recent thread here contains one example of how you could achieve that Since you did not set the mask-image to cover your title via CSS, I'd recommend doing so and/or using a fromTo tween for the animation to make sure, your titles are hidden before they reach the trigger. Give it a try and let us know if you run into any problems along the way. Ok. All goes right for now except of one thing.. Could you expalin how to animate mask on scroll? For example from left to right on scoll scrub I have some code gsap.fromTo(".section02__header", 3, { '-webkit-mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 100%, rgba(0,0,0,0) 150%, rgba(0,0,0,0) 0%)', }, { '-webkit-mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 100%, rgba(0,0,0,0) 150%, rgba(0,0,0,0) 0%)', }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 6, 2021 Share Posted March 6, 2021 Create the mask that you want before and after and use those values as the values in the from and to vars. Maybe Clippy can help you generate the masks that you need. Keep in mind that you should animate the appropriate (prefixed or non-prefixed) property. 1 Link to comment Share on other sites More sharing options...
Dj.Sunrise Posted March 6, 2021 Author Share Posted March 6, 2021 11 hours ago, ZachSaucier said: Create the mask that you want before and after and use those values as the values in the from and to vars. Maybe Clippy can help you generate the masks that you need. Keep in mind that you should animate the appropriate (prefixed or non-prefixed) property. I dont get how clippy will help me. As you can see on first section i've already create mask reaviling. But How to make it (from - To) on scroll scrub ? Link to comment Share on other sites More sharing options...
akapowl Posted March 6, 2021 Share Posted March 6, 2021 As Zach said: 12 hours ago, ZachSaucier said: Create the mask that you want before and after and use those values as the values in the from and to vars. That is what clippy could be helpful for. Another way would be to simply just play with the values of your gradient without any animation and see what they do. See the Pen a6d41698f59c5cfff3ade7895ed87385 by akapowl (@akapowl) on CodePen When you found a nice gradient mask that fits your needs, you could set the stops further to the left in proportion to each other, so they mask everything initially (or use these values as the from part of your tween ) and then animate the stops to the right in proportion to each other so things get revealed. Getting an understanding of how masks/gradients work is key to this besides of getting an understanding of how ScrollTrigger works. On 3/5/2021 at 12:05 PM, akapowl said: To get there you'd best want to loop over all your sections or titles and forEach create the animation and ScrollTrigger targetting the specific title and using that or the specific section itself as a trigger. I linked to a thread that contains an example of how to hook your animation up to ScrollTrigger. Did you give it a try? 2 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