Jump to content
GreenSock

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

similar effect with gsap of scrool help / ideas.

Recommended Posts

Hello everyone, any idea of how to create this immission effect with scroll-trigger?

I don't care about the opening on the images but only the zoom effect of scroll section .

Thanks
https://2018.craftedbygc.com/#enter

Link to comment
Share on other sites

That site isn't using native scrolling, which is what ScrollTrigger is for. Notice how it doesn't have any scrollbars, which usually means they are using wheel events. They are using GSAP for the animations, but using three.js for rendering.

 

How, to create that effect is beyond the scope of this forum. I'm sure if you search on CodePen you can find a similar effect. I'm pretty sure I've seen something like that before.

https://codepen.io/

 

  • Like 1
Link to comment
Share on other sites

Thanks, 
I badly explained myself. I am not interested in the rendering part or the non-custom scroll but I was wondering if with scrolltrigger it was possible to do that type of animation form navigation, a zoom inside a zoom loop. see image of website https://2018.craftedbygc.com/#enter

zoom-image.jpg

  • Like 1
Link to comment
Share on other sites

Sure - the scale itself will just be something along these lines - very simple.
 

gsap.to(object, {
  scale: 2,
})


If you try to do this with HTML elements you'll may end up with pixelation or juddering though. It would be quite hard on the browser. This brings us back to the rendering side - They're adjusting properties of three.js objects.

 

The hard bit will be creating the three.js scene.

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