Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
UncleMuscles

ScrollTrigger, Images and mix-blend-mode help.

Go to solution Solved by GreenSock,

Recommended Posts

What I'm trying to do?

I've got 2 images on top of each other I want to alpha-in (opacity)  via the blend-mix-mode layer with ScrollTrigger. 

 position: relative;
  height: 100vh;
  width: 100vw;
  overflow-y: scroll;
  }
  img {
    min-width: 100vw;
    max-width: 100vw;
    height: 200vh;
    position: absolute;
    object-fit: cover;
    &#imageOne{
      overflow-y: scroll;
    }
    &#imageTwo {
      overflow-y: scroll;
      mix-blend-mode: multiply;
    }
  }

I'm having trouble just getting the images to animate with a scroll bar. I'm using big images about 5000px in size becuase I want them to be in a container with a scroll bar that I can use as the 'Scroller' for the Opacity for the image with blend modes on.

 

What I've come up with:

So far not really much luck. Here is a running view of what I've got so far. https://react-pvbx1r.stackblitz.io/ I have the project here you can see the code at the bottom is the images and the styling is in BackgroundStyle. I feel I have got the right Idea with GSAP in using useEffect to set options after the DOM has been rendered and using useRef for referencing Nodes to give to GSAP. But I don't think my problem is with React. I just cant seem to get the scroll and the animation to work.

 

Here is the Editor link https://stackblitz.com/edit/react-pvbx1r?file=src/components/landing.js

 

Thanks :)

 

P.S I'm learning a bunch of frameworks at the moemnt so there is a chance im using quite a lot of this stuff wrong, if you spot any bits that aren't written well I would be very gratefull if you highlighted them! :D

 

All the best :)

 

Link to comment
Share on other sites

  • Solution

I noticed a few things:

  1. You didn't set the scroller. By default, ScrollTrigger uses the main window/body as the scroller but your setup has no scrolling at all on the body. Your content is inside another <div> that does the scrolling. As a quick fix, I added this to your ScrollTrigger: scroller: start.current.parentNode.
  2. You're animating the opacity of start.current but that element has a height of 0, so you won't see anything :) Maybe you meant imageTwo.current
  3. Both of your images are using the same URL, so you won't really see anything when you crossfade. 
  4. Be careful about using super big images and blend-mix-mode because those are tough on the browser to render (unrelated to GSAP).

Good luck!

Link to comment
Share on other sites

9 hours ago, GreenSock said:

I noticed a few things:

  1. You didn't set the scroller. By default, ScrollTrigger uses the main window/body as the scroller but your setup has no scrolling at all on the body. Your content is inside another <div> that does the scrolling. As a quick fix, I added this to your ScrollTrigger: scroller: start.current.parentNode.
  2. You're animating the opacity of start.current but that element has a height of 0, so you won't see anything :) Maybe you meant imageTwo.current
  3. Both of your images are using the same URL, so you won't really see anything when you crossfade. 
  4. Be careful about using super big images and blend-mix-mode because those are tough on the browser to render (unrelated to GSAP).

Good luck!

Thank you for the help Mr Jack :) I think I got a bit confused over the Trigger and Scroller use cases. For some reason it didnt make any changes to my code. I tried to implement what you said to no luck. So now I have tried to dumb it down as much as I can to this.

gsap.set(imageTwo.current, { opacity: 1 });
    timeline.current = gsap.to(imageTwo.current, {
      opacity: 0,
      yoyo: true,
      repeat: -1,
      scrollTrigger: '#bg'
    }

Only one of the images has a mixblendmode enabled so  in contratc to the image behind it I should see an effect when fading with the opacity.

image.thumb.png.17bfcc04d7836dddc0733472b4584c28.png

I have ID'd the div container #bg as it holds the Y scroller. I assume this is the scrollTrigger? and has the 2 images inside

 

You can see in this example https://stackblitz.com/edit/react-pvbx1r?file=src%2Fcomponents%2Flanding.js That I'm trying to do this animation but with the scroller rather than using yoyo and -1 repeat. If you change the mix-blend-mode on &#imageTwo you can see the diffrent effects that I tihnk would be cool to controll with the opacity and the blend modes via the scroller/trigger

 

Thanks for replying Mr Jack :) I wrote out that whole post and then I made it as simple as I could and Now it works :). An example https://stackblitz.com/edit/scrolltrigger-blendmode-example?file=src/components/landing.js

Thanks for the help :)

 

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