Jump to content
Search Community

CSS animation: How to in GS?

acidking
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

Posted

I have a CSS animation code below and works fine, but I couldn't get it to work in GS, I probably didn't get the syntax correct. Basically it enables the background of .screen to scroll along with the window scroll. In this example, for each 600px from top it scrolls 200px.

var top = $('body').offset().top + $(document).scrollTop();
var screenAnim = -200 * top/600;
$('.screen').css({ 'backgroundPosition' : screenAnim });
jamiejefferson
Posted

backgroundPosition needs an x and y value e.g. "10px 10px". Should be something like

TweenLite.to('.screen', 1, { backgroundPosition: screenAnim + "px 0px" });
  • Like 1
Posted

Yes that works. Thanks. I didn't know I can use + "px" to add values.

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