Jump to content
Search Community

Zoom in on scroll & fade in to new section

Daan Ketelaars test
Moderator Tag

Recommended Posts

Hi all,

 

I'm quite new to GSAP, used it once or twice but i'm curious how to get this effect to work with GSAP.

 

Example 1: https://www.moooi.com/nl/a-life-extraordinary

Example 2: https://browserhistory.squarespace.com/

 

They both make use of pixijs for 2d webgl rendering and then GSAP if i'm correct. Can this effect be done with just ScrollTrigger? 

 

Thanks for answering!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Yeah both sites use PIXIJS which is great. Basically what it seems they're doing is creating one container for each scene adding the elements in those containers to create the parallax effect on mouse move. Then it seems that they scale and translate the current container, to simulate the zoom in feature and then create some sort of swap between the containers.

 

With that being said I don't think this sites work using some sort of scroll value detection but instead they check for specific events, mouse wheel, keyboard arrows, touch, etc. in order to move to the previous/next stage.

 

That of course doesn't mean you can't use ScrollTrigger to do it, you'll have to hide the scroll bar, which is not the same than using overflow: hidden, but is not the approach I would take to tackle something like this. I'd use events detection.

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

@Rodrigo Thanks for your extensive answer! Now I know a bit more about how these sites are build and how these animations/transitions work. I will have a look at ScrollTrigger and maybe try it with that. Never looked at events detection, maybe good to have a search and browse about that. 

 

Again thanks for all the information and will do more research about this specific effect!

Link to comment
Share on other sites

This codepen by @PointC is a great sample of using events to trigger GSAP instances:

 

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

 

Although PIXI uses it's own event methods it's not really that hard to port Craig's sample to PIXI:

 

https://pixijs.io/examples/#/interaction/click.js

 

http://pixijs.download/release/docs/PIXI.DisplayObject.html

 

Happy Tweening!!!

  • 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.
×
×
  • Create New...