Jump to content


Responsive Tweens

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone! I was wondering if someone could help me with a scaling problem I'm having. 


I have five sections inside a div and every section is the width of the window. The div is the width * 5. When pressing the next buttons inside a section the div translates X the width of the page to show the next section (see codepen URL). I have this function in a window.resize but I don't know how to change the position of the current section so that it always fits and centers the window width. 


Any help would be much appreciated!


- Helle

See the Pen jrrYaG by helle_railway (@helle_railway) on CodePen

Link to comment
Share on other sites

instead of trying to rewrite your code perhaps this demo from Diaco will help:



I think you can do what you need mostly with good CSS and HTML and not rely on window resize to recalculate everything.


Here is a version of Diaco's pen without the scaling:



If each div is 100% window width and you have 5 divs, you should be able to move the parent container xPercent:"-=0.2" to reveal the next div.


read about xPercent here: http://greensock.com/gsap-1-13-1 (great demo too)



If you want to update a bunch of calculations and redraw everything on resize() do some searches here for "responsive" or "resize" and you should find a bunch.

  • Like 1
Link to comment
Share on other sites

Again, thank you so much! The xPercent was exactly what I needed!

  • Like 1
Link to comment
Share on other sites

cool. you're welcome.

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.