Jump to content
Search Community

Tweening Div between two css properties

Lynx 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

How do I tween between two CSS properties, the following code is not moving the div class left while at the same time rotate the div class ? What am I doing wrong ? Or must I be using TweenFromTo() ?

$(document).ready(function(){
    TweenMax.to(".proxylogo", 12, {left:100px,rotation:80});
    ;})
Link to comment
Share on other sites

Hello Lynx and welcome to the GreenSock forum!

 

Without seeing your code in context it will be hard to see what your CSS and html markup look like.

 

It could be a number of things:

 

- Are you using position absolute or relative on your element?

 

- Are you using the latest version of GSAP?

 

- Is .proxylogo an IMG tag? .. if so the IMG might not be fully loaded before you animate it. If so you can add a window.load event inside your DOM jquery ready()

 

Also.. Are you seeing any errors in your browser console? .. By just looking at your example above you have a semicolon on the inside instead of the end .. you have ;}) instead of });

 

As you can see it could be a number of things causing your code not to work. If possible can you please setup a codepen demo example so we can see and test your code live.

 

Here is a cool video tut by GreenSock on how to create a codepen demo example.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/?view=getnewpost

 

Thanks :)

Link to comment
Share on other sites

Hi Lynx  :)

 

Try this :

TweenMax.to(".proxylogo", 12, {left:"100px",rotation:80});

and pls read the CSSplugin Doc. : 

 

http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

 

Thanks, I don't put rotation values in a string but I must put the position values in a string ? I know I read that the CSSPlugin takes care of this, why put it in a string ?

Link to comment
Share on other sites

if your CSS property value isn't numeric , you should to write that inside double or single quotes ; for example : "+=50" , "50px" , "50%" , "-=50_cw" , "red" , ...ect

 

as you can read in CSS doc ; It is typically a good idea to define a unit of measurement (like "24px" instead of "24" or "50%" rather than "50") but the default in most cases is pixels (px), so you can omit the unit if you prefer. And even if the unit of measurement doesn't match the current one, GSAP will attempt to convert them for you. So, for example, you could tween a width from "50%" to "200px".

 

so you can define left/top property value without px and quotes , too :

TweenMax.to(".proxylogo", 12, {left:100,rotation:80});
Link to comment
Share on other sites

If you have multiple end values, that's already been answered

TweenMax.to(".proxylogo", 12, {left:"100px", rotation:80});

If you know both start and end values to tween between you would use fromTo

TweenMax.fromTo(".proxylogo", 12, {left:"0px", rotation:0}, {left:"100px", rotation:80});

If that doesn't answer it for you, can you provide more description of the tween, or better yet provide a Codepen sample showing the tween not doing what you intend?

  • Like 1
Link to comment
Share on other sites

The following is the code, this is only a faux example.  The code skews, then rotates but doesn't skew and rotate again ?

  TweenMax.fromTo(".proxylogo", 24, {skewY:"1px",skewX:"2px"},{skewY:"34px",skewX:"12px"},{rotate:50,rotate:90},{skewX:"50px"},{rotate:-25,rotate:32},{rotate:160,rotate:200},{skewY:"-24px",skewX:"50px"},{rotate:12,rotate:45});
Link to comment
Share on other sites

As per the documentation for TweenMax you will see it only takes 4 parameters - target, duration, fromVars, toVars. I'm not sure where you've seen that syntax before but that isn't valid usage of the fromTo function - it creates a singular tween, from one set of values to another.

 

I believe your intention is best solved with a Timeline. Something like this will give you a chained set of tweens, and you can modify timings and durations from there

var target = $(".proxylogo");
var tl = new TimelineLite();

tl.to(target, 1, {skewY:"1px", skewX:"2px"})
  .to(target, 1, {skewY:"34px", skewX:"12px"})
  .fromTo(target, 1, {rotation:50}, {rotation:90})
  .to(target, 1, {skewX:"50px"})
  .fromTo(target, 1, {rotation:-25}, {rotation:32})
  .fromTo(target, 1, {rotation:160}, {rotation:200})
  .to(target, 1, {skewY:"-24px", skewX:"50px"})
  .fromTo(target, 1, {rotation:12}, {rotation:45});
I think you will find this introduction to GSAP useful to get up to speed with the basics of the GSAP syntax.
  • Like 1
Link to comment
Share on other sites

What if I don't use a variable, as such:

TimelineMax.to(".proxylogo",24,{skewY:"1px",skewX:"2px"})
TimelineMax.to(".proxylogo",12,{skewY:"34px",skewX:"12px"})
TimelineMax.fromTo(".proxylogo",34,{rotate:50,rotate:90})
TimelineMax.fromTo(".proxylogo",60,{skewX:"50px"})
TimelineMax.fromTo(".proxylogo",23,{rotate:-25,rotate:32})
TimelineMax.fromTo(".proxylogo",12,{rotate:160,rotate:200});

Why doesn't this work ?

 

I decided to put things in a variable; no progression :(

$(document).ready(function(){
    var logo = new TimelineMax ({repeat:2;});
logo.add( TweenMax.to (".proxylogo",24,{skewY:"1px",skewX:"2px"}));
logo.add( TweenMax.to (".proxylogo",12,{skewY:"34px",skewX:"12px"}));
logo.add( TweenMax.to (".proxylogo",34,{rotate:50,rotate:90}));
logo.add( TweenMax.to (".proxylogo",60,{skewX:"50px"}));
Link to comment
Share on other sites

Is it your intention for this animation to last several minutes? Duration is written in seconds, so those durations are quite large.

The "no variable" version isn't working because you aren't using the syntax correctly.
1. TimelineMax does not have static methods for you to use in that way. They only exist on created timeline objects (hence the variable). If you really want to avoid a variable you could chain everything together e.g.

new TimelineLite().to(target, 1, {skewY:"1px", skewX:"2px"})
                  .to(target, 1, {skewY:"34px", skewX:"12px"})
                  .fromTo(target, 1, {rotation:50}, {rotation:90})

2. If you modified it to just use TweenLite then it would work, but all of the tweens would be created at the same time and many of them would be overwritten.e.g.

TweenLite.to(".proxylogo",24,{skewY:"1px",skewX:"2px"})
TweenLite.to(".proxylogo",12,{skewY:"34px",skewX:"12px"}) // overwrites previous tween
TweenLite.fromTo(".proxylogo",34,{rotate:50})

This can be solved with delays, but Timelines are designed to make this easier

3. You still aren't using fromTo correctly

TimelineMax.fromTo(".proxylogo",34,{rotate:50,rotate:90}); // an object can't have two identical values, and "rotate" should be "rotation"
// corrected:
TweenLite.fromTo(".proxylogo",34,{rotation:50}, {rotation:90});

TimelineMax.fromTo(".proxylogo",60,{skewX:"50px"}); // fromTo requires both from and to vars
// corrected:
TweenLite.fromTo(".proxylogo",60,{skewX:"50px"}, {skewX:"17px"});

 
Your variable version likely isn't working because of the Javascript error in the first line

var logo = new TimelineMax ({repeat:2;}); // extra semi-colon should not be here
                                     ^

 
To wrap up, your code should work if it looks something like this (it's going to be a weird effect but I'm assuming they are just test tweens):

var logo = new TimelineMax({repeat:2});
logo.to(".proxylogo", 24, {skewY:"1px", skewX:"2px"})
    .to(".proxylogo", 12, {skewY:"34px", skewX:"12px"})
    .fromTo(".proxylogo", 34, {rotation:50}, {rotation:90})
    .to(".proxylogo", 60, {skewX:"50px"});

If you are still having issues with this, please create a Codepen demo so we can see the code in context and provide a quick solution.

  • Like 4
Link to comment
Share on other sites

In addition to Jamie's excellent advice I would strongly suggest watching the videos below if you are going to be using timelines:

 

http://greensock.com/sequence-video

http://greensock.com/position-parameter

 

Its really great that you are diving into GSAP and there are lots of folks who will gladly answer your questions. I think you will find that you will get issues resolved much quicker and with better clarity if you start providing some basic CodePen demos as Jamie mentioned above. It makes us really easy for us to turn small snippets of broken code into fixed versions. 

 

Happy Tweening!

Link to comment
Share on other sites

I may have to show a CodePen demo, not yet :)

 

I'd like to know what I'm doing wrong, even if it's a syntax problem that the following isn't working even after doing some clean up to the code ? I feel as though I may be getting closer to understanding but I'm still riding over some bumps, then again that last statement may be all wrong !

$(document).ready(function(){
    var logo = new TimelineMax ();
logo.to(".proxylogo",24,{skewY:"1px",skewX:"2px"});
TweenlineMax.to(".proxylogo",12,{skewY:"34px",skewX:"12px"});
TweenlineMax.to(".proxylogo",34,{rotation50},{rotation:90}, "-=5");
TweenlineMax.to(".proxylogo",60,{skewX:"50px"});
TweenlineMax.to(".proxylogo",23,{rotation:-25,rotation:32})
TweenlineMax.to(".proxylogo",12,{rotation:160,rotation:200});
};
Link to comment
Share on other sites

You should be getting multiple errors about TweenlineMax being undefined. Please check your javascript console.

 

You should follow Jamie's advice above and use the code he provided. Not sure why you are deviating from that.

 

Please provide a CodePen demo for further help.

Link to comment
Share on other sites

I'm getting one error.

 

I mimicked the code provided by Jamie.  If I removed the TimelineMax() command, I run into the problem that as mentioned one overrides the other, you'd think I'd see the class rotate 160 on X and 200 on Y atleast, apparently I don't ?

 

When I add TimelineMax() it doesn't work either ?

$(document).ready(function(){
    var logo = new TimelineMax ();
logo.to(".proxylogo",24,{skewY:"1px",skewX:"2px"});
.to(".proxylogo",12,{skewY:"34px",skewX:"12px"});
.to(".proxylogo",34,{rotation50},{rotation:90}, "-=5");
.to(".proxylogo",60,{skewX:"50px"});
.to(".proxylogo",23,{rotation:-25,rotation:32})
.to(".proxylogo",12,{rotation:160,rotation:200});
};
Link to comment
Share on other sites

Yeah, it seems like you are still making mistakes that Jamie tried to help you with earlier like

 

animating the same property twice in the same tween

.to(".proxylogo",12,{rotation:160,rotation:200}); //bad

sending 2 vars objects into a to() tween. please see the notes above on how to use fromTo()

.to(".proxylogo",34,{rotation50},{rotation:90}, "-=5"); //bad

in addition, when chaining to() methods together be careful not to use the semi-colons on each line. Please consult the final code block in Jamie's post #13 above. 

 

I'm curious, is there a stumbling block you are hitting when creating the CodePen demo? Are the video and directions here  not clear? Is there something we can do to make it easier to understand? 

 

It really should not take more than a few minutes to provide a working demo. Here is something you can start with to see some of the things you are trying to do: 

http://codepen.io/GreenSock/pen/jEMQqO?editors=101

  • Like 4
Link to comment
Share on other sites

-  if you want to tween from current value to another , you should to use .to() 

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/

 

 

- if you want to tween from a special value ( as BEGINNING values ) to current value you should to use .from()

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/

 

 

- and if want to tween from special value as BEGINNING values (not current value) to another special value  , then you should to use .fromTo() ,and allows you to define both the starting and ending values

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/fromTo/

 

 

and in javascript that's better to put semi-colon at the end of your code lines ( in JavaScript you should terminate the lines with a semicolon )
 
if you'r using the TimelineMax or Lite , you can define timeline childs one ofter another in a row , and for clearer and better human readable code you can put the timeline childs in lines ,  one after another , without any semicolon between childs  ;
 
var logo = new TimelineMax ();
logo.to(...)
.to(...)
.add(...)
.fromTo(...)
.from(...);

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

 

.........................................................................................................................................

 

and pls check out the GSAP DOCs , you'll find most of your answers : http://greensock.com/docs/#/HTML5/

 

.........................................................................................................................................

  • Like 3
Link to comment
Share on other sites

Absolutely not. The transform skew property is measured in degrees or if you do the transformation in radians, that is you should define an angle for the skew. In your code you're passing pixels, so it won't work.

 

Just remove the quotes and the px and it'll work:

var logo = new TimelineMax();

logo.to(".proxylogo",24,{skewY:45,skewX:50});

That should work.

  • Like 1
Link to comment
Share on other sites

Absolutely not. The transform skew property is measured in degrees or if you do the transformation in radians, that is you should define an angle for the skew. In your code you're passing pixels, so it won't work.

 

Just remove the quotes and the px and it'll work:

var logo = new TimelineMax();

logo.to(".proxylogo",24,{skewY:45,skewX:50});

That should work.

 

 

Nope, it isn't working ! I mimicked your code as well !

Link to comment
Share on other sites

I don't know what's going on here but that code should work.

 

See the Pen xbENOb by rhernando (@rhernando) on CodePen

 

I'll encourage you (as other users already had) to get a better grasp of the engine by checking the documentation and also by reading a bit more about CSS properties, Javascript and jQuery. Those are fundamental stuff you need to know at some level.

 

Finally, create codepen samples. If you used the exact code I posted first and is not working, then something else you're doing is breaking things up and we can't solve anything if we have to troubleshoot blindly. There have to be something in your code that is no working but we can't be guessing around here. You opened this thread almost four days ago and you haven't provided a codepen sample, just snippets, which is not the best way to solve issues. If we ask for codepen demos is not because we like to put users through more work, is because it's easier and faster to identify and solve the issue. If you've provided a codepen that illustrates the issue you're facing, this would be solved by now.

 

Please make the extra effort, it helps us to help you.

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Hi Lynx, 

 

Rodrigo's advice is perfect as well as the code he provided.

Out of courtesy to the people who have offered to help you I'm going to lock this thread so that they do not receive any further email notifications.

If you still have problems with the skew issue I encourage you to start a new thread and provide a demo. 

We look forward to helping you.

Thanks.

 

Carl

  • Like 2
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...