Jump to content
GreenSock

Jimbo1900

Simple tween not working

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

Hi,

 

I have the following code:

 

<!DOCTYPE html>

<html lang="en">

<head>

 

<script type="text/javascript" src="js/TweenMax.min.js"></script>

<title>1</title>

 

</head>

 

<body>

 

<div id="photo">

<img src="tel.jpg" width="200" height="150"/>

 

</div>

 

<script>

var photo1 = document.getElementById("photo");

//or use jQuery's $("#photo")

console.log(photo1);

TweenMax.to(photo1, 8.5, {width : 80});

</script>

</body>

</html>

 

And all resources are found via google chrome dev tools, however nothing happens. This example is right off the getting started page. What could be the problem?

 

Thanks,

Jim

Link to comment
Share on other sites

OK I figured out the problem. I was trying to tween the div tag and not the image tag. So rewriting just the contents inside the body tags:

 

<div>

<img id="photo" src="tel.jpg" width="200" height="150"/>

</div>

<script>

var photo1 = document.getElementById("photo");

//or use jQuery's $("#photo")

console.log(photo1);

TweenMax.to(photo1, 18.5, {width:80});

</script>

 

Notice the id attribute is now part of the image itself and no longer the div tag. I hope this helps someone else.

 

Jim

Link to comment
Share on other sites

Hi Jim,

 

Welcome to the forums. Thanks for posting your solution.

 

Carl

Link to comment
Share on other sites

Hi Carl,

 

Thanks for the welcome!

 

I actually have a new problem, I can't figure out. The url is:

http://jpf.jp22.net/1.htm

 

I have 3 buttons that respond to click events and the last button should bring the image back to its original size. However the image keeps getting larger. I used some proprietary tags inside the <img> so as to always get back the original size. I want variables here not fixed numbers.

 

I also send the values of iw and ih to the console.log and they never change, which is good thing.

 

But something is still wrong?

 

Jim

Link to comment
Share on other sites

Ok so this is pretty simple, your reset_me() function is using a relative tween.

 

Your HTML element attributes are actually String values, so h1="150" & w1="200".

To define a relative value instead of absolute, preface the value with “+=” or “-=” and make it a String. Previously, you only needed to cast as a String, but since Javascript often uses values that contain characters, like “150px”, casting as a String won’t suffice. So, for example:

//OLD
TweenLite.to(mc, 1, {x:"100"});
//NEW:
Tweenlite.to(mc, 1, {x:"+=100"});

//OLD:
TweenLite.to(mc, 1, {x:"-100"});
//NEW:
TweenLite.to(mc, 1, {x:"-=100"});

In ActionScript the old way still works, but it is deprecated.

 

Since 'width' and 'height' of img tags are basic numeric values this works the old way, however it is still recommended to use the "+=" "-=" syntax since the old way is deprecated.

 

To use an absolute tween you'll need to convert from String to Number. Change reset_me() to use

var h1 = parseInt(photo2.getAttribute("ih"), 10);
var w1 = parseInt(photo2.getAttribute("iw"), 10);

and you should be back in business.

  • Like 1
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.
×