Jump to content
Search Community

Animate className with roundProps

9lines test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi!

 

I try animate className property. Something like below.

 

timeline.to(vars.$morph, 3, {
	className: '+=morph--index-12',
	roundProps: 'className',
});

 

.morph--index-1 {
	background-image: url("../images/animations/main-test/main-test-1.png");
	background-size: cover;
	background-repeat: no-repeat;
}

 

Stylesheet has classes from .morpth--index-1 to .morph--index-12

 

But when animating - background-image property has decimal values.

 

image.jpg.80c392b65d7da7bbecf17bf61de304a0.jpg

 

roundProps: "className, class, background, backgroundImage, all" - none each of them don't work.

  • Like 1
Link to comment
Share on other sites

Hello @9lines and Welcome to the GreenSock Forum!

 

Sorry your having an issue! I'm a little confused in why your using roundProps alone with just className?

 

But to better help you, please create a reduced codepen demo showing what you describe. This way we can test it to see the issue in action and in context. Once we test your code in a live editable environment we can debug in the browser to find out why this is happening ;)

 

 

Thanks :)

  • Like 3
Link to comment
Share on other sites

Oh wait it looks like you actually want the classNames which are strings that contain numbers to be rounded so that somehow you animate through multiple classes. Sorry, you can't use RoundPropsPlugin for that. You may have to create a loop that set()s a new class at certain intervals. 

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