Jump to content
Search Community

Why Doesnt The "left" property work for this?

Radizzt 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

I was trying to follow the video tutorial on this site: https://greensock.com/get-started-js

I was stuck on the very first example he gave:

`TweenMax.to(".logo", 2, {left:600});`

 

I check the console and there was no error, so I was confuse.
I thought i did something wrong on my side, but had no idea what.

 

after some trial and error the 'x' property seem to work fine.

 

Turns out for some reason the left property doesnt work with images.

I tried doing it with a div box and the left property works as intended.

 

Can someone explain why this is happening?

 

Thanks

 

See the Pen aXVBMa by Radizzt (@Radizzt) on CodePen

Link to comment
Share on other sites

Hi @Radizzt,

 

The reason the image isn't tweened with the left property is that images are, by default, inline items with a static position. The `left` property affects the CSS left value ... and top/left on a statically positioned element has no effect. So, just as you have relative position on the `.box' divs, you must also have relative position on the image `.logo`.

 

See the Pen WPXRdd by sgorneau (@sgorneau) on CodePen

 

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