Jump to content
Search Community

horizontal reveal on scroll

Jean Polkin test
Moderator Tag

Recommended Posts

Hello Jean.

 

If all you want to behave different is that the images change their width on scroll instead of their height, then all you'd need to change is that exact property in the tween responsible for that.

 

// this...

.fromTo(image, { width: () => { return "100%" } }, { width: () => { return "0%" } })

//...instead of this

.fromTo(image, { height: () => { return "100%" } }, { height: () => { return "0%" } })

 

See the Pen vYRMJZy by akapowl (@akapowl) on CodePen

 

 


But I also wouldn't recommend using the approach from the codepen you probably 'forked' your demo from as it is technically flawed and not 100% correct. The other thread you already posted in does for one contain a corrected version (although using GreenSock's ScrollSmoother instead of smooth-scrollbar.js for the smooth-scrolling)...
 

 

 

 

...and another approach, likely more comprehensive, following the suggestion by Blake in that same thread. I hope this will help.

 

  • Like 1
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...