Jump to content
Search Community

How can I achieve this effect?

wondergryphon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi forum. 

 

Apologies if this has been asked + answered before... I've tried heaps of Googling on the topic but I can't seem to find out these guys have achieved this effect.

 

http://www.soyuzcoffee.com/en/home

 

☝️ From what I can see on this (and other) sites, instead of actually scrolling the body, they have a wrapping div which has `overflow: hidden;overflow-y: scroll;` applied. Then the elements within that wrapping div are all absolutely positioned and the scroll event changes the position of that element.

 

In the example above, its absolute positioning and the setting of 'top' values. However on other sites (and probably the route I'll want to go), it'll be `transform:translate()` values which get adjusted.

 

Site's that use _this_ method, have an amazing smooth scroll. ? Ultimately, this is my goal. So far in my efforts, when I apply even the simplest parallax scroll onto a site, I get noticeable jank. But on sites like the above, that method, combined with GSAP/TweenMax/Scrollmagic, seems to achieve a buttery smooth scroll.

 

Would really appreciate some pointers (either in code snippets, or to existing resources that document the processes to achieve this) from anyone here.

 

Thanks kindly :) 

Link to comment
Share on other sites

Sorry, but unfortunately I don't have time to dig through that site to understand how they set everything up. I don't really use ScrollMagic at all so I'm not really sure what the best practices are for setting things up. 

 

If you have a reduced case of GSAP tweens getting janky, we'll certainly take a look and try to help. 

 

 

maybe some of these links from PointC will help you with setting up scroll-driven animations

 

 

 

  • Like 2
Link to comment
Share on other sites

Thanks @Carl. I dont think my question relates particularly to scrollmagic. It's more a 'scroll jacking' method that most of these sites seem to use. IE instead of scrolling the body, they're scrolling elements within a div by means of `translate` positioning. 

 

This seems to be the common method that is used to achieve this smooth scrolling and my question is how to achieve that level of functionality i guess :)

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