Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ricksanchez

Navigation links compatibility with horizontal scroll

Recommended Posts

hey there, I tried a lot to get this effect in horizontal scroll but I couldn't achieve the second section  where it pins to the screen until it completes the progress or third section animation

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

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

how to pin orange panel until it finishes like above codepen and also purple panel

 

Link to comment
Share on other sites

You need to work out the offset for the start trigger because as you are faking a horizontal scroll, all elements are on the same horizontal line so, all lines are triggering immediately.

 

// --- RED PANEL ---
gsap.from(".line-1", {
  scrollTrigger: {
    trigger: ".line-1",
    scrub: true,
    start: "1000 bottom", // This is based on the offset you defined on the fake horizontal scroll divided by the number of sections you have
    end: "1000 top",
  },
  scaleX: 0,
  transformOrigin: "left center", 
  ease: "none"
});

 

Link to comment
Share on other sites

Posted (edited)
1 hour ago, Dipscom said:

 

 

Edited by ricksanchez
Link to comment
Share on other sites

What do you mean by "what about orange and purple panel animation its different"?

 

If you want a different animation, you create a different tween. If you want the same, you can just repeat the example given and change the necessary offsets.

Link to comment
Share on other sites

9 minutes ago, Dipscom said:

What do you mean by "what about orange and purple panel animation its different"?

 

If you want a different animation, you create a different tween. If you want the same, you can just repeat the example given and change the necessary offsets.

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

 Can I get animation like the orange and purple. I cant figure out a way to pin section with animation

Link to comment
Share on other sites

Hello @ricksanchez

You can not pin in a fake-horizontal scenario as such because you are not actually scrolling horizontally but only just tweening the content to the left on vertical scroll.

 

One way to achieve an effect similar to pinning in a fake-horizontal scenario as such would be to just change the way that the horizontal tweening of the sections behaves altogether - something like was shown in this thread

 

 

...and also suggested in this thread.
 

 

 

Another way would be to tween whatever you want to 'pin' to the right for the same amount over time that your content gets tweened to the left but that will also require a bit of a different setup where it is not the actual sections being tweened to the left a surrounding container, so you can tween on the sections themselves to create that nullifying 'fake-pin' tween on the sections themselves - but this approach will probably become quite tedious as you will have to consider all following sections and re-adjust the values for the fake-horizontal scroll back and forth - so I would definitely suggest going with what was suggested above instead. Nonetheless here is an example of what I mean with this second approach.


See the Pen zYWEpBd?editors=1010 by akapowl (@akapowl) on CodePen

 

 

 

Edit:


If you want to go with that second approach (which again, I wouldn't really recommend as it can become quite cumbersome at some point) you might want to have a look at the containerAnimation property that was used in my demo.

 

containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a 

See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen

 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 
  • Like 2
  • Thanks 1
Link to comment
Share on other sites

why isnt the first animation working

Link to comment
Share on other sites

 

Not sure what you mean - but I was also talking about the other examples in that thread where you got that demo from.

Like this one...

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

 

...which is based on Cassie's example from this thread.
 

 

  • Like 1
Link to comment
Share on other sites

9 hours ago, akapowl said:

Not sure what you mean

See the Pen xxWXMGQ by bharathparihar (@bharathparihar) on CodePen

 

I meant I third animation works but the first animation isnt working.(it works when I place the animation container in last even I change its position it misbehaves. ) and the Cassie's example have many issues like padding, start and stop positions and

also why  it does  the end shifts when section width is increased?

Link to comment
Share on other sites

 

Oh, it does work - only it gets triggered when it isn't in view anymore, at the same time the animation on the third section gets triggered.

 

gsap_forum.thumb.gif.361bf85a88888e874345aa57cdd9b3fe.gif

 

 

The logic of that example was built to work like that - just in that very scenario - because it was only suggested in the first place when I thought that all the OP from that other thread wanted, was to 'pin' the very last section - once I understood that he actually wanted to be able to 'pin' every section, I suggested the other example. So once more; I do not suggest using this example.

Note that these examples in general are not intended for copy/pasting in a way that you can just add some things of your own and expect them to work like you want - most of them are just showing concepts for how to approach certain things in certain scenarios with ScrollTrigger, like this one.

 


 

4 hours ago, ricksanchez said:

 Cassie's example have many issues like padding, start and stop positions and

also why  it does  the end shifts when section width is increased?

 

That too is not a ready-to-go all-in-one copy-and-paste custom-code solution - if you put in the time and effort you can change it to whatever you like as long as you understand the logic that lies underneath it all. As mentioned in that other thread too...
 

On 3/12/2022 at 9:54 AM, akapowl said:

 

...and the position parameter in addition to that.

 

It can not hurt to also have a deeper look at flexbox if you want to have segments with specific widths in this scenario

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

 

 

Besides some general changes with regard to naming (to make it a bit more evident what is what) of the elements and to the layout in CSS, I changed the position parameter of the tweens responsible for the fake horizontal-scrolling here, so it won't have a delay between when the bars are done tweening and the movement to the next slide and with that regard also got rid of the empty tween for the last segment. Also the amount which slide needs to move here isn't dependent on the increment variable anymore but instead on each section's individual offsetWidth.

 

Maybe this will help, but nonetheless, this isn't the most trivial thing you want to do, so I suggest diving into how all those things mentioned work.


One problem now, is that when you do have sections with different widths in there, they will not move to the left at the same speed - wider sections will move much faster than narrower sections because of how the durations of the tweens are set up. If you needed, you could change that by doing some calculations for the durations of the individual tweens of the timelines, but that is getting quite out of scope for what this forum can offer and thus is nothing I can do for you.
 

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

 

  • Like 4
Link to comment
Share on other sites

Quote

That too is not a ready-to-go all-in-one copy-and-paste custom-code solution - if you put in the time and effort you can change it to whatever you like as long as you understand the logic that lies underneath it all. As mentioned in that other thread too...


Just adding a big +1 to this.

Time and effort are necessary to get to an end result, The forums and demos can only help so far.

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