Jump to content
Search Community

Full-width carousel wrap breaks on resize

Kiefer Slaton test
Moderator Tag

Go to solution Solved by tailbreezy,

Recommended Posts

Hey all, I've been beating my head on the wall with this for a while. I have an image carousel on my website that I've mocked up in this codepen. I essentially copied the carousel wrap example from the docs but changed the x positions to reference window.innerwidth. However, when I resize the window, the positions get all messed up and I can't figure out how to make them re-adjust on resize. Any advice? Thanks!

See the Pen NWbaJMq by kslaton (@kslaton) on CodePen

Link to comment
Share on other sites

  • Solution
var colors = ["#f38630","#6fb936", "#ccc", "#6fb936"];

//initially colorize each box and position in a row

function setup() {

  gsap.killTweensOf('.box');
gsap.set(".box", {
  backgroundColor: (i) => colors[i % colors.length],
  x: (i) => i * window.innerWidth / 4
});

gsap.to(".box", {
  duration: 40,
  ease: "none",
  x: `+=${2 * window.innerWidth}`, //move each box 500px to right
  modifiers: {
    x: gsap.utils.unitize(x => parseFloat(x) % (2 * window.innerWidth)) //force x value to be between 0 and 500 using modulus
  },
  repeat: -1
});
  
}

setup()

window.addEventListener('resize',  setup)

 

Have you tried to kill off the tweens of ".box" before rebuilding.

Apart from the obvious full rebuild.

 

Maybe also set the duration to more flexible value, so as to keep the relative speed when sizing down.

For example, this code speeds it up when resizing down.

 

duration: innerWidth / 30,

 

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