Jump to content
GreenSock

retropunk

Jump Start question

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 just going through the Jump Start demo and I created a demo of my own based off the first slide 

I came across something that I don't understand.

If I place an image into the body of an html page like:

 

<img src="img/logo.png" id="logo">

and then do this in JS, the tween doesn't work

 

var logo = document.getElementById("logo");
TweenLite.to( logo, 1, {left:"600px"});
but if I do this, it works
var logo = document.getElementById("logo");
TweenLite.from( logo, 1, {css:{alpha:0}, delay:1});
now if I set the div like this, similar to the Jump Start demo
<div id="logo"></div>
and set the background image in CSS, this works
var logo = document.getElementById("logo");
TweenLite.to( logo, 1, {left:"600px"});
So I guess my question is...Is placing an image into a div via CSS a requirement for Tweening certain properties?
 
Thanks!
- Patrick

 

Link to comment
Share on other sites

Absolutely not - you don't have to wrap things in divs for tweens to work. I suspect the problem was simply that you didn't set your <img> element's position to "absolute" in your css. That's necessary in order for "top" and "left" to work (that has nothing to do with GSAP - it's just how css works). Annoying, I know. 

 

Also, please make sure you're using the latest version of the GreenSock files. Early versions required wrapping your css-related stuff in a css:{} object, but ever since 1.8.0 that hasn't been necessary (although it's perfectly fine to do and is slightly faster performance-wise). 

 

Does that clear things up for you? If you need any more help, don't hesitate to ask here. 

Link to comment
Share on other sites

oh I see...my bad. I had a strong feeling I was missing something. :)

 

Totally makes sense now! Thanks a million as always!

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