Jump to content
Search Community

Combining Horizontal Scroll with Observer yPercent animation

purple-lightsaber test
Moderator Tag

Recommended Posts

The first panel in this code pen (last code pen at the bottom) is 200vw, I'd like this panel to horizontally scroll to the end of the panel, and then trigger 'Observer.create({ slide from the left animation})' instead of having the Observer trigger right away on mousewheel.

 

Would a timeline be best for this solution? Or how can I trigger a custom function at the bottom of the .panel viewport?

 

 

I''m essentially combining:

Horizontal Scroll

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

 

with Observer yPercent Animation

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Thanks for your help!

 

200vw panel I'd like to horizontally scroll until the end before the slide over animation occurs

See the Pen MWVxzmr by ac09 (@ac09) on CodePen

Link to comment
Share on other sites

Hi there, 

 

We create codepen demos to show techniques, but a lot of these techniques are very setup specific and they're not really intended to just be combined into new combo-demos.

The best way to approach this kind of thing is by really digging into and understanding each pen. Then with that knowledge you can start from scratch to craft a solution specific to your use case.

Here's a simplified example of using observer alongside scrolling. Maybe that will set you off on the right foot!

See the Pen 1ccf60146d680c09ba6074bf9132778d by GreenSock (@GreenSock) on CodePen

Good luck!

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