Jump to content
GreenSock

JoeH

ScrollTrigger pin, animate to center of section on click

Recommended Posts

Hi,

 

I was hoping someone might point me in the right direction.

 

I am creating a horizontal scroll of various sections, see this for my basic setup - 

 

My goal is to when someone clicks on one of the sections animate it to be full width, and center.

 

I have animated it full width no problem by just doing

 

function sectionClick(el) {
  TweenLite.to(el.target, {width: window.innerWidth})
}

 

But I am not sure how to animate the pin so that it is centered.

 

The end position should be the section is full width and only it is visible.

 

Hope this makes sense.

 

Thanks

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

Link to comment
Share on other sites

Hi there @JoeH,

 

You've linked to one of our pens here, could you update this with your logic and click event so we can see what you're attempting a little clearer?

  • Like 1
Link to comment
Share on other sites

11 minutes ago, Cassie said:

Hi there @JoeH,

 

You've linked to one of our pens here, could you update this with your logic and click event so we can see what you're attempting a little clearer?

Sorry yes.

 

Here is my forked version. 

 

As you can see if you immediately click the first section it works as it should.

 

Click any other section and it expands, but I'm not sure how to animate it to be centered.

 

See the Pen xxpqYOY by orionJoe (@orionJoe) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

Maybe someone else has some ideas, but I'm not quite certain how you'd approach this by animating the width and the position at the same time.

 

You need to know the size of the container and the position of that section in order to animate to it, but if it's animating to that section when the size is also animating then that size is constantly changing 🙃

Here's an option where the width is animated and then you animate to the position. If I were you I'd probably have a rethink about the behaviour you're after because this seems a bit knotty to me. But maybe I'm missing something

See the Pen oNpZdpe?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

I see Paul is formulating a response, if anyone can help it'll be him!

  • Like 1
Link to comment
Share on other sites

26 minutes ago, Cassie said:

Maybe someone else has some ideas, but I'm not quite certain how you'd approach this by animating the width and the position at the same time.

 

Yep, I've been tinkering with it a bit - not sure if mine is the most elegant or most performant approach, but it works.

 

I used a CSS variable for the width of the sections (because I felt I also had to change the flex at the same time for it to work) and am tweening on that variable instead of the width itself, so the value also changes in the flex.

 

I also use a sort of FLIP (First Last Invert Play) variation for the scrollTo part - First I set it to the wanted width after the tween and get the value to scrollTo after a ScrollTrigger.refresh(), then I set it back to its initial width and ScrollTrigger.refresh() again - and then I tween on the --width to window.innerWidth while calling ScrollTrigger.refresh onUpdate and at the same time scrollTo-tween to the previously gotten position to scroll to.

 

Now this will obiously only get more complex when having to consider resizes e.g. - but maybe that gives an idea to begin with.

 

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

 

Edited by akapowl
Exchanged codepen demo - no changes to the logic, just some narrower sections in there
  • Like 3
Link to comment
Share on other sites

Here is a variation, tweening the CSS variable to "100vw" instead of window.innerWidth - this now also makes the section adapt properly when re-sizing the window. Happy tweening!

 

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

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