Jump to content
Search Community

CSS Animation to GSAP

sscash test
Moderator Tag

Recommended Posts

Someone kindly assist to convert this CSS code to GSAP.

 

.Banner__image.fade-in {
    transform: translate3d(0px, 0px, 0px) scale3d(1.25, 1.25, 1) rotateX(
0deg
) rotateY(
0deg
) rotateZ(
0deg
) skew(
0deg
, 
0deg
);
    transform-style: preserve-3d;
    filter: blur(5px);
    transition-duration: 0.9s;
}



/////

.Banner__image.fade-in.appear {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(
0deg
) rotateY(
0deg
) rotateZ(
0deg
) skew(
0deg
, 
0deg
);
    transform-style: preserve-3d;
    filter: blur(0px);
    will-change: filter, transform;
}

I kindly need it to be output this way, the example is for fadeInUp.

 

  tl.set(".banner-image", { 
    y: 100, 
    opacity: 0
 });

///

  tl.to(".banner-image", { 
    ease: "Expo.easeOut",
    duration: 1.25, 
    y: 0, 
    opacity: 1, 
    stagger: .05, 
    delay: 0
  },"-=1");

Thanks for your time.

 

Link to comment
Share on other sites

Hi @sscash. I don't really understand what you're asking here - can you please provide a minimal demo, perhaps in CodePen? It looks like you only included a tiny portion of the code(?). It always helps to see things in context.

 

GSAP can animate pretty much any CSS property. Perhaps it would help if you read the getting started guide or the docs? I'd recommend taking a shot at coding it and then if you run into trouble, share your minimal demo and we'd be happy to take a peek and answer any GSAP-specific questions. 

Link to comment
Share on other sites

This may help - taken from the getting started guide

GSAP CSS
x: 100 transform: translateX(100px)
y: 100 transform: translateY(100px)
rotation: 360 transform: rotate(360deg)
rotationX: 360 transform: rotateX(360deg)
rotationY: 360 transform: rotateY(360deg)
skewX: 45 transform: skewX(45deg)
skewY: 45 transform: skewY(45deg)
scale: 2 transform: scale(2, 2)
scaleX: 2 transform: scaleX(2)
scaleY: 2 transform: scaleY(2)
xPercent: -50 transform: translateX(-50%)
yPercent: -50 transform: translateY(-50%)

 

 

GSAP can animate any transform value but we strongly recommend using the shortcuts above because they're faster and more accurate (GSAP can skip parsing computed matrix values which are inherently ambiguous for rotational values beyond 180 degrees). The other major convenience GSAP affords is independent control of each component while delivering a consistent order-of-operation.

  • Like 2
Link to comment
Share on other sites

9 hours ago, GreenSock said:

Hi @sscash. I don't really understand what you're asking here - can you please provide a minimal demo, perhaps in CodePen? It looks like you only included a tiny portion of the code(?). It always helps to see things in context.

 

GSAP can animate pretty much any CSS property. Perhaps it would help if you read the getting started guide or the docs? I'd recommend taking a shot at coding it and then if you run into trouble, share your minimal demo and we'd be happy to take a peek and answer any GSAP-specific questions. 

 

Thanks for the swift response.

I check the docs and guide and i think it's what i needed.

Link to comment
Share on other sites

6 hours ago, Cassie said:

This may help - taken from the getting started guide

GSAP CSS
x: 100 transform: translateX(100px)
y: 100 transform: translateY(100px)
rotation: 360 transform: rotate(360deg)
rotationX: 360 transform: rotateX(360deg)
rotationY: 360 transform: rotateY(360deg)
skewX: 45 transform: skewX(45deg)
skewY: 45 transform: skewY(45deg)
scale: 2 transform: scale(2, 2)
scaleX: 2 transform: scaleX(2)
scaleY: 2 transform: scaleY(2)
xPercent: -50 transform: translateX(-50%)
yPercent: -50 transform: translateY(-50%)

 

 

GSAP can animate any transform value but we strongly recommend using the shortcuts above because they're faster and more accurate (GSAP can skip parsing computed matrix values which are inherently ambiguous for rotational values beyond 180 degrees). The other major convenience GSAP affords is independent control of each component while delivering a consistent order-of-operation.

thanks helpful.

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