Jump to content
Search Community

Vertically scrolltriggering panel inside horizontal scrolltriggered section

laurentnicolas test
Moderator Tag

Recommended Posts

Hi GreenSock team, 

 

I am trying to nest a vertical scrolltriggered element inside an horizontal scrolltriggered section.  My goal is to be able to "freeze" the main container horizontal animation when we reach the panel with the element to move vertically, and then keep sliding horizontally when the vertical animation has ended. I'm playing with the "onEnter", "onLeave" and "onLeaveBack" methods but it is not fully satisfactory (see codepen, where I reused one of your demo I forked).  In particular, I'm trying to find a way to get a "smooth" transition to the next panel (panel 4) after the "leave" event.

Do you have any idea how to make it possible? (maybe changing the scrolling speed dynamically?)

 

Thanks a lot for your support and the great toolset

 

See the Pen WNEweMa by Loonixo (@Loonixo) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @laurentnicolas. If I understand your goal correctly, you'd need to build out a single timeline animation that handles all of those motions, sequenced in whatever way you want. For example, the first part of the animation moves all the panels xPercent: -200, then you insert an animation that animates [whatever] vertically, then an animation that moves the panels to xPercent -400 for example. That way, as you scrub that timeline, it does precisely what you want in the proper order and everything is smooth.

 

Don't try to overthink things and make one ScrollTrigger force another one to stop and start again with onEnter/onLeave callbacks. That'll get very messy and likely inaccurate. A single timeline is the way to go. 

 

My advice: don't hook it up to ScrollTrigger at first. Just get the animation to play in the way you'd expect, and THEN hook it up to the scroll position with ScrollTrigger. 

 

Good luck!

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