Jump to content
GreenSock

ShaniaKC

Image stack reveal on scroll

Recommended Posts

Hello Everyone,

 

I was wondering if this was possible with only gsap ( the featured projects section in cuberto.com )

Link to comment
Share on other sites

You can definitely reveal a stack with just GSAP. That wavy filter on top of the images is something you'd likely need to use WebGL or PIXI.js for because it's a rendering thing (GSAP is renderer-agnostic - it just animates anything you throw at it). 

 

There are a bunch of ScrollTrigger demos (some of which may have image/section stacks) at https://greensock.com/st-demos

 

Good luck!

  • Thanks 1
Link to comment
Share on other sites

Thank you so much!. 

I will have a look at  pixi.js and WebGL for the filter.

 

 

 

Link to comment
Share on other sites

WebGL looks quite intimidating. 

 

Please does anyone have any links to good resources for learning it?

Or is anyone able to achieve this wave effect using it? 

I will really appreciate it.

Link to comment
Share on other sites

Yeah WebGL is definitely not easy. Shaders are a very complex rabbithole to go down.

Pixi.js is a great place to start, most of the work is done for you.


If you do want a deep dive - This looks like a great course
https://simondev.teachable.com/p/glsl-shaders-from-scratch

 

Matt DesLauriers is very good to learn from

And this series
 


Good luck!
 

  • Like 1
Link to comment
Share on other sites

Thanks you Cassie, 

 

I am checking out these videos right now!

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