Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vasyl Shvets

write mix-blend-mode on gsap

Recommended Posts

Hi. everyone! 

I would like to create a mix-blend-mode effect on fixed element.
css "mix-blend-mode: different" not work ok for my needs.
As I need this effect (see img example)

I need exactlly white color if i scroll on image

Maybe i can create this effect on gsap?

image.thumb.png.de12b8aba63342c48e67571cae371a81.png

See the Pen abqQRbm by vasyl-shvets (@vasyl-shvets) on CodePen

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

@GreenSock maybe some advice what to read, or some advice what direction i need to move?

Link to comment
Share on other sites

@Vasyl Shvets please do not randomly ping people like that. Your questions will be seen and if someone finds the time, they will reply.

 

You can certainly do something like that with ScrollTrigger but in the end it all comes down to the correct setup in the first place.

 

You might need to use a mask/clip-path maybe or try something like discussed in the thread linked below, as I don't think getting this effect with mix-blend-mode alone will be really possible if you need it to go to a specific color above the image.

 

As an alternative, if wrapping your head around that with ScrollTrigger is too much, you could also try and use a library dedicated to these sorts of effects, like immerser.js.

 

 

  • Like 3
Link to comment
Share on other sites

It might not be exactly what you need but I just dropped a new demo using clip-paths to transition fixed position images on scroll. Happy tweening.

See the Pen zYRyveM by PointC (@PointC) on CodePen

  • Like 3
  • Haha 1
Link to comment
Share on other sites

 

I only just reacted with a 'Haha' because it fits the theme :D

 

Love the demo, @PointC !

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