Arunn

How to create waark.com like scroll ?

Recommended Posts

Can anybody help me create waaark.com like scroll. On mouse scroll the document should not scroll but the animation created using tweenmax should trigger. Unlike waaark.com, I have some content below the fullscreen fold which will appear after the 3rd scroll.The technologies that i'm using are ScrollMagic and Tweenmax.

See the Pen mGwNwR by arun-venugopal (@arun-venugopal) on CodePen

Share this post


Link to post
Share on other sites

The waark site appears to use a dom element that is the size of the window and loads all animated elements into it.

 

Just a guess but because the content is the size of the viewport the document does not actually scroll it is likely using an event listener to activate animation using deltaY.

 

See:

https://www.w3schools.com/jsref/event_wheel_deltay.asp

https://www.sitepoint.com/html5-javascript-mouse-wheel/

https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY

 

With wheel events you can trigger animations with deltaY changes.

Setup the container 100% high and wide with overflow hidden then you can place all animation content inside it and show hide and animate it to the deltaY changes.

 

 

  • Like 7

Share this post


Link to post
Share on other sites

Thank you so much @Visual-Q, Really appreciate you for taking time and effort to help the community. Let me try to solve the problem using deltaY. Thanks once again.

  • Like 2

Share this post


Link to post
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.