Jump to content
GreenSock

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

Container Animation (Gsap 3.8)

Go to solution Solved by akapowl,

Recommended Posts

Dear All,

 

Hello to all,

I would like to have some explanations about "Container Animation" seen in Gsap 3.8.

 

In my Codepen demo, I can't scroll to the orange DIV and I don't understand what I am doing wrong.

 

Thank you for your help.

 

 

See the Pen LYzePeL by pattocheu (@pattocheu) on CodePen

Link to comment
Share on other sites

  • Solution

Hello there, @pattocheu

 

First up, I would suggest taking a closer look on how flexbox handles things - e.g. if you want your sections to have specific widths, make sure to set the flex properties for them, or else flexbox will kind of do its own thing.

 

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

 

With that corrected, your tween will still not work because you have sections with different widths, so using xPercent with calculations based on the number of sections you have for where to tween things to won't work - those calculations you are using work for sections that all have the same width, filling the screen.

 

As an alternative approach you could tween on the x instead and do your calculations based on the scrollWidth of the container and the clientWidth (or alternatively window.innerWidth).

 

That works better already - Hope it helps

 

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

 

  • Like 3
Link to comment
Share on other sites

Hi @akapowl

 

Thank you for your reply and the additional information.

 

It is now clearer for me.

 

 

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