Jump to content
Search Community

backgroundPosition Problem

nomn test
Moderator Tag

Go to solution Solved by Diaco,

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

Greeting to GSAP Team!

Great thanks for making this amazing tool!

 

Now about my problem, please, if you can, help me with it.

I'm trying to tween backgroundPosition, but it's isn't work with some properties.

 

For example:

// This is NOT work
TweenMax.fromTo($(this).children('a'), 0.8,
            {backgroundPosition: 'center left'},
            {backgroundPosition: 'center right'}
);

And this:

// Now it Work
TweenMax.fromTo($(this).children('a'), 0.8,
            {backgroundPosition: 'center left'},
            {backgroundPosition: 'top center'}
);

The starting background position of element (css style) is "center left".

 

Link to comment
Share on other sites

Hello nomn, and Welcome to the GreenSock Forum!

 

Have you tried using the equivalent of the position keywords.. which is using percentages:

  • top
    Equivalent to 0% for the vertical position.
     
  • right
    Equivalent to 100% for the horizontal position.
     
  • bottom
    Equivalent to 100% for the vertical position.
     
  • left
    Equivalent to 0% for the horizontal position.
     
  • center
    Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.

So your example that didn't work try this using percentages:

// so instead of this:
// This is NOT work
TweenMax.fromTo($(this).children('a'), 0.8,
            {backgroundPosition: 'center left'},
            {backgroundPosition: 'center right'}
);

// try this
// See if this works
TweenMax.fromTo($(this).children('a'), 0.8,
            {backgroundPosition: '50% 0%'},
            {backgroundPosition: '50% 100%'}
);

:

See if that helps? If not please create a codepen demo so we can better help test your code in a live environment.

 

Here is a cool video tut by GreenSock on how to create a codepen demo example.

 

Thanks!

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