Jump to content
GreenSock

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

calculate 50% of a position

Recommended Posts

 
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,
        duration2,
              }, "<")
 
Link to comment
Share on other sites

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,
}, "<")

 

Link to comment
Share on other sites

 

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

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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,
    animationphotoOnly,
    start'34% 35%',
    end'45.8% 38%',
    scrubtrue,
    markerstrue
  })
Link to comment
Share on other sites

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. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

 

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.
×