Jump to content
Search Community

Jump Start question

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

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