Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dj.Sunrise

Gradient Reveal On scroll

Recommended Posts

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 by Dj.Sunrise
added word "masked"
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

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 ?

See the Pen jOVpLRo by AlibekKulseitov (@AlibekKulseitov) on CodePen

Link to comment
Share on other sites

 

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?

 

  • Like 2
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.
×