calculate 50% of a position

[kmytor]

 

Hello, I would like to know how can I calculate half of an object and center it with respect to the window? I tried to make this code but I think I am a little lost
.to('.content', {

        width: '100vw',

        x: "-100%" / 2,

        duration: 2,

              }, "<")
 

[ZachSaucier]

Hey kmytor. I think you're looking to do something like this? It's hard to say without seeing a demo.

// Center the content on page load
gsap.set('.content', {xPercent: -50});

// ...
// Some time later animate the width
.to('.content', {
  width: '100vw',
  duration: 2,
}, "<")

 

[kmytor]

 

Thanks I will try it, if I cannot upload the example, ]Thanks again

 

[GreenSock]

Or maybe you mean something like this?:

gsap.set(".content", {
  position: "absolute",
  top: "50%",
  left: "50%",
  xPercent: -50,
  yPercent: -50
});

Like Zach said, though, some of this depends on the context so it's very difficult to know for sure without seeing a reduced test case in CodePen or something. 

[kmytor]

Perfect, perfect if it works for me.
I have an other question How can I increase the size of the scroll or how can I duplicate the scroll? try to do this but it doesn't work, multiply the body trigger: "body" * 2, my my idea is that the scroll goes slower since it goes very fast.

 

is there a way to do this?
 

 ScrollTrigger.create({

    trigger: "body" * 2,

    animation: photoOnly,

    start: '34% 35%',

    end: '45.8% 38%',

    scrub: true,

    markers: true, 

  })

[GreenSock]

I would recommend you read the docs and watch the video because it'll really help you understand how things work. 

 

You can just extend the "end" value to make it take longer to scroll. You can use a relative value to make it very simple:

ScrollTrigger.create({
  trigger: "body",
  animation: photoOnly,
  start: '34% 35%',
  end: '+=500', // scroll lasts for 500px
  scrub: true,
  markers: true
});

Of course you'd need to make sure your page can scroll that far. You may need to adjust your CSS. 

 

If you still need help, please provide a reduced test case as a CodePen. 

[kmytor]

thanks if it's on that side, I will see the videos