Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Radizzt

Why Doesnt The "left" property work for this?

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 post
Share on other sites

Hi @Radizzt,

 

The logo is positioned statically. You need to add position: relative, or position: absolute for the left property to work.

 

That said, animating 'x' is more performant then animating 'left', as it uses transforms which can animate on sub-pixels and can be passed to gpu.

  • Like 2
Link to post
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 post
Share on other sites

Thanks for the reply guys.

 

It was so simple when you guys said it haha

  • Like 1
Link to post
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.

×