Jump to content
Search Community

CSSPlugin: 3D Transforms

SpaceMoney-01011000 test
Moderator Tag

Recommended Posts

Hi,

 

Your codepen is using CSS Transitions for showing each face. Since GSAP is not implementing those styles updates, it cannot affect the easing function.

 

Right now you have this:

gsap.to(".cube",{
  ease: "bounce.out"
});

You're telling GSAP, take the element with the class cube, and tween nothing for the default duration (0.5 seconds) and apply a bounce out easing to this tween.

 

This is an extremely old example of something similar, but refactoring the code and make it more dynamic shouldn't be too difficult:

See the Pen nRxjbm by rhernando (@rhernando) on CodePen

Hopefully is enough to get you started.

 

Happy Tweening!!!

  • Thanks 1
Link to comment
Share on other sites

44 minutes ago, Rodrigo said:

Hi,

 

Your codepen is using CSS Transitions for showing each face. Since GSAP is not implementing those styles updates, it cannot affect the easing function.

 

Right now you have this:

gsap.to(".cube",{
  ease: "bounce.out"
});

You're telling GSAP, take the element with the class cube, and tween nothing for the default duration (0.5 seconds) and apply a bounce out easing to this tween.

 

This is an extremely old example of something similar, but refactoring the code and make it more dynamic shouldn't be too difficult:

 

 

Hopefully is enough to get you started.

 

Happy Tweening!!!



Thank you.

The problem with your example is that it's using older solutions; JQuery and and older version of GSAP. I'm not knowledgeable enough about JavaScript to be able to decipher what's going on to accomplish what I need.

Do you have any other resources (other than the docs, I don't find them to be well written as they presuppose too much prior understanding) that are more simple, yet demonstrate similar functionality?

I don't understand certain tokenization of the syntax; [0] &[1]. I understand they're array indices, but that's about it.

Link to comment
Share on other sites

Sorry if the docs seemed confusing - it's always a difficult balancing act between keeping them concise, informative yet not too skimpy and not too overwhelming. Sure, we could inject lots of demos and explain every little possibility but they'd get quite overwhelming. If you've got specific suggestions for improvements, we'd be happy to consider them. 

 

It's relatively simple in terms of GSAP and transforms - there are the various properties that map to transform components, like x (translateX), y (translateY), rotation (rotate), scaleX, scaleY, rotationX, rotationY, z, etc. It sounds like you just need to figure out what rotational values you want in order to show each "face", and then just tween to those. Hopefully it's straightforward. 

 

If you're stuck, I'd recommend just trying to focus on getting one or two faces first. Post your demo here with your attempt and then we'd be happy to help you with any GSAP-specific queries you may have. I wouldn't try refactoring that earlier demo - I'd bet it'll be faster/easier to just start over with the JS (but it's fine to keep the box markup/css except definitely remove those CSS transition). 👍

  • Thanks 1
Link to comment
Share on other sites

On 9/17/2022 at 11:33 PM, Rodrigo said:

Hi,

 

Your codepen is using CSS Transitions for showing each face. Since GSAP is not implementing those styles updates, it cannot affect the easing function.

 

Right now you have this:

gsap.to(".cube",{
  ease: "bounce.out"
});

You're telling GSAP, take the element with the class cube, and tween nothing for the default duration (0.5 seconds) and apply a bounce out easing to this tween.

 

This is an extremely old example of something similar, but refactoring the code and make it more dynamic shouldn't be too difficult:

 

 

Hopefully is enough to get you started.

 

Happy Tweening!!!



So, I decided to dig in and figure it out. I'm happy to say that I did. I'm thankful for your solution. It made me think about what was going on to make everything work together.

These are the results;

See the Pen VwxWwRj by scottonanski (@scottonanski) on CodePen



The only issue I can't seem to figure out is how to get the eases to fire off.

EDIT: Silly me. I had a transition on the cube itself within the CSS. 

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