Jump to content
Search Community

Why are the cards skewed?

FrEZ test
Moderator Tag

Recommended Posts

37 minutes ago, Rodrigo said:

Hi,

 

The cards are not skewed is just a 3D animation, because of that the cards are positioned in a 3D disposition and the wrapper is being rotated around.

 

This is another 3D example:

 

 

 

Hopefully this clear things up.

 

Happy Tweening!

It does. Is there a way to edit it?

 

Link to comment
Share on other sites

11 hours ago, Rodrigo said:

Mhh... Edit what exactly?

 

Everything in those codepen examples is open source, just edit the code there.

 

Happy Tweening!

Edit it so all the cards are facing towards the camera, not turning

Link to comment
Share on other sites

Hi,

 

That is not a GSAP related question, please read the forums guidelines:

 

This is just about CSS and HTML. Just remove all the JS, keep the HTML and use this CSS:
 

html {
  background-color: #000;
  height: 100%;
}

body {
  height: 100%;
  background-color: #000;
}
.titles {
  color: #00fff3;
}
.demoWrapper {
  height: 400px;
  -webkit-font-smoothing: antialiased;
  margin: 50px auto;
  perspective: 1100px;
  transform-style: preserve-3d;
  display: flex;
  gap: 10px;
  margin-bottom: 200px;
}

.box {
  height: 180px;
  background-color: #06f;
  overflow: hidden;
}

.creative-pro {
  border: 1px solid #00fff3;
  color: #00fff2;
  background: transparent;
  height: 600px;
}

.creative-pro:hover {
  cursor: pointer;
  box-shadow: 0 4px 8px 0 #00fff3, 0 6px 20px 0 #00fff3;
}

Happy Tweening!

Link to comment
Share on other sites

On 12/22/2022 at 6:37 PM, Rodrigo said:

Hi,

 

That is not a GSAP related question, please read the forums guidelines:

 

This is just about CSS and HTML. Just remove all the JS, keep the HTML and use this CSS:
 

html {
  background-color: #000;
  height: 100%;
}

body {
  height: 100%;
  background-color: #000;
}
.titles {
  color: #00fff3;
}
.demoWrapper {
  height: 400px;
  -webkit-font-smoothing: antialiased;
  margin: 50px auto;
  perspective: 1100px;
  transform-style: preserve-3d;
  display: flex;
  gap: 10px;
  margin-bottom: 200px;
}

.box {
  height: 180px;
  background-color: #06f;
  overflow: hidden;
}

.creative-pro {
  border: 1px solid #00fff3;
  color: #00fff2;
  background: transparent;
  height: 600px;
}

.creative-pro:hover {
  cursor: pointer;
  box-shadow: 0 4px 8px 0 #00fff3, 0 6px 20px 0 #00fff3;
}

Happy Tweening!

The idea is to keep everything running, just have the cards facing one way.

Link to comment
Share on other sites

Hi,

 

You could try using the Horizontal Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

That should provide enough tools for accomplishing something like this.

 

Unfortunately we don't have the time resources to tackle specific user requests or create complex fully working demos, so you have to give it a try and we can guide you along the way as much as we can.

 

Let us know if you have more questions.

 

Happy Tweening!

Link to comment
Share on other sites

  • 1 month later...
On 12/27/2022 at 12:06 AM, Rodrigo said:

Hi,

 

You could try using the Horizontal Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

That should provide enough tools for accomplishing something like this.

 

Unfortunately we don't have the time resources to tackle specific user requests or create complex fully working demos, so you have to give it a try and we can guide you along the way as much as we can.

 

Let us know if you have more questions.

 

Happy Tweening!

Do you think wrapping updating the snap to 1/images.length*2 and the wrap to -1 to 1 will do the desired job for the logic?

Link to comment
Share on other sites

On 12/27/2022 at 12:06 AM, Rodrigo said:

Hi,

 

You could try using the Horizontal Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

That should provide enough tools for accomplishing something like this.

 

Unfortunately we don't have the time resources to tackle specific user requests or create complex fully working demos, so you have to give it a try and we can guide you along the way as much as we can.

 

Let us know if you have more questions.

 

Happy Tweening!

Who can I contact that I can pay to finish this job for me? I am unable to do it myself.

Link to comment
Share on other sites

16 minutes ago, FrEZ said:

Who can I contact that I can pay to finish this job for me? I am unable to do it myself.

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here is my list of requirements...now please show me how to do it all" tutorials

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly if you'd like to pay our hourly rate. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

2 minutes ago, FrEZ said:

Well, I managed to fix the snapping to go to correct values, but it still spins incorrectly.

 

Any idea  how to fix the navigation, as right now it spins to the correct value, but at the end changes to the last.

Link to comment
Share on other sites

Hi,

 

The issue could stem from the fact that you have a duplicated set of buttons:

<div class='selector-container'>
  <ul class='selectorX'>
    <li class='lists'>1</li>
    <li class='lists'>2</li>
    <li class='lists'>3</li>
    <li class='lists'>4</li>
    <li class='lists'>5</li>
    <li class='lists'>6</li>
    <li class='lists'>7</li>
    <li class='lists'>8</li>
  </ul>
</div>
<div class='selector-container'>
  <ul class='selectorX'>
    <li class='lists'>1</li>
    <li class='lists'>2</li>
    <li class='lists'>3</li>
    <li class='lists'>4</li>
    <li class='lists'>5</li>
    <li class='lists'>6</li>
    <li class='lists'>7</li>
    <li class='lists'>8</li>
  </ul>
</div>

That returns a index value that is double of the expected here:

buttons.forEach(function (button, i) {
  button.addEventListener("click", () => {
    const target = i * 0.125;
    gsap.to(progressX, {
      value: target,
      duration: 1
    });
  });
});

That being said we're circling back to an issue that Cassie already mentioned and, for which, you were warned about: You're creating and updating different threads trying to get a faster response. That's not the way it works. We provide as much support as we can with the time resources we have. I was going to look into your other thread today and that is exactly what I did, so as you can see you got an answer and I pointed to an actual issue when I had the time to do it. This is related to this thread it seems:

 

Also is worth noticing that most of the issues with this project stems from logic and copy/pasting something without knowing exactly how it works and without putting the effort of understanding the code. This last problem of a duplicated list of items is a clear proof of that. We understand the pressure of a deadline and the frustration of a project not working as such deadline approaches, but we can't share the responsibility of users getting in projects that exceeds their capabilities. I strongly recommend you to learn more about Javascript and web development in general, this youtube channel has great resources for that:
https://www.youtube.com/playlist?list=PLWKjhJtqVAbleDe3_ZA8h3AO2rXar-q2V

 

 

Happy Tweening!

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