Resizing the window doesn't change the animation measures

[pepethefroggg]

Hello! 

 

I'm having trouble making an animation responsive, as I can't find a way to update the x value.

I tried also to refresh the scrolltrigger onresize but it didn't work.

So what i want to obtain is my square getting in the middle of the vw even after I resize the window, is it possible?

See the Pen eYWgQPN by pepethefroggg (@pepethefroggg) on CodePen

[pepethefroggg]

I know about this question, but I didn't understand anything about it nor about the answers, I'm just a beginner with gsap and I really would love some help

[OSUblake]

Try this.

 

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "top center",
    toggleActions: "play none reverse none",
    markers: true,
    invalidateOnRefresh: true
  },
  ease: "power2.out",
  x: setWidth,
  duration:1.5,
})

 

Invalidate on refresh will call any functions again.

 

This just sets the value.

x: setWidth()

 

This is a reference to a function that will get called.

x: setWidth

 

[pepethefroggg]

16 minutes ago, OSUblake said:

Try this.

 

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "top center",
    toggleActions: "play none reverse none",
    markers: true,
    invalidateOnRefresh: true
  },
  ease: "power2.out",
  x: setWidth,
  duration:1.5,
})

 

Invalidate on refresh will call any functions again.

 

This just sets the value.

x: setWidth()

 

This is a reference to a function that will get called.

x: setWidth

 

Thank you so much! This was really really helpful