Jump to content
Search Community

Tweening a Div between Multiple CSS Properties

Lynx test
Moderator Tag

Go to solution Solved by Lynx,

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

Again, please see this post for links to the different browser consoles. Errors like this are easily discovered there. We go to a lot of effort to include good, helpful information in our responses here, and it's disheartening to see a lot of it being overlooked. An error like:

 

"Uncaught ReferenceError: TimelineMax is not defined" means that TimelineMax is not accessible to JavaScript. In the case of including a library like GSAP, this would usually indicate that a required file has not been included.

 

As Diaco mentioned, the TimelineMax.js file alone is not enough. TweenLite is a minimum requirement for GSAP, and CSSPlugin is a requirement for tweening DOM elements. In most cases, it is very much recommended to just include the TweenMax.js file, as it contains all of TweenLite, TweenMax, TimelineLite, TimelineMax and CSSPlugin, in a very small file.

  • Like 2
Link to comment
Share on other sites

Lynx,

 

We have provided you with detailed instructions that even include a video that show you how to use CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

We do this because it is extremely simple to create or fork a CodePen demo that has all the necessary GSAP tools already accessible.

You then chose to use jsfiddle which you have repeatedly made the same basic mistake: failing to load TweenMax.min.js.

 

We have also provided multiple working demos in both jsfiddle and CodePen that illustrate working versions of what you are asking about.

Beyond that, you have arguably the smartest and most experienced users of GSAP going out of their way to hand-hold you through concepts which most beginners grasp in a matter of minutes.

 

The most reasonable assessment I can make at this time is that GSAP simply may not be for you right now.

Maybe spend some time with basic JavaScript online courses (google "learn javascript") or books and get some of the more basic concepts down.

Study the CodePen demos we have here: http://codepen.io/collection/ifybJ/, edit the code, see what works and what doesn't.

 

I think its safe to say we all need a little break from this right now.

Feel free to come back next week with some more questions that are accompanied by either jsfiddle or codepen demos that do not include any basic console errors.

 

Have a great weekend and thanks for understanding.

  • Like 1
Link to comment
Share on other sites

jsfiddle.net/WildWind/j5uy8p6a/3/

 

I was wondering why the scale doesn't work, shouldn't it go from small to big, or big to small at the end in scale ?

 

The problem is all this time is the documentation use of the word of target in a vague sense, it wasn't until it was mentioned that target regardless what direction is being read is from the original CSS values, I think this needs to be change, a simple in brackets (the CSS original values) would suffice in the documenation.  As for the explination on how objects and functions work, I am aware of parameters in functions and objects in JS although I haven't used objects much, I have a somewhat understanding of them.

 

Thanks to Diaco I was simply loading the wrong CDN, Que Sera, Sera !

Link to comment
Share on other sites

I explained all of the toVars and fromVars as clearly as I could in this post:

 

http://greensock.com/forums/topic/11104-tweening-a-div-between-multiple-css-properties/#entry44700

 

Yes. The start values in a .to() are read from the target's CSS styles. The start values in a .fromTo() are defined in the fromVars, not the toVars.

 

 

In a .to() tween you define the end values, and the start values are read from the target.

 

 

In a .from() tween you define the start values, and the end values are read from the target.

 

 

In a .fromTo() tween you define the start and end values. No values are read from the target.

 

 

It's really designed to be as clear as possible:

 

TweenLite.to(target, 1, { left: 10 });
// tween target's left property "to" 10

TweenLite.from(target, 1, { left: 10 });
// tween target's left property "from" 10

TweenLite.fromTo(target, 1, { left: 0 }, { left: 10 });
// tween target's left property "from" 0 "to" 10

We've explained this in so many ways I'm not sure how else to explain it.

 

You are saying that .to() start values are derived from the CSS property, but you don't need to declare a {skew} or a {rotation} or a {translate} in the CSS if you are going to use all those, you only need to declare one, for example {skew} in the CSS then tween the rest of the values with GSAP, correct ?

 

Also, what makes this work, but not this ?

Edited by Lynx
Link to comment
Share on other sites

If you don't declare a value in your CSS, for some cases and depending on the element's display property, that value will be considered 0. In the case of CSS transforms values, if nothing is declared all are 0 at the start, so GSAP tweens those from 0 to the final value you're passing.

 

Also, as Carl already pointed we simply can't know what you mean by "this works, but this not". Both samples you provided are working as one could expect considering the code in them.

 

Finally as many users have pointed, please check the documentation, the video samples Carl has created and the Codepen samples available.

  • Like 2
Link to comment
Share on other sites

  • Solution
If you don't declare a value in your CSS, for some cases and depending on the element's display property, that value will be considered 0. In the case of CSS transforms values, if nothing is declared all are 0 at the start, so GSAP tweens those from 0 to the final value you're passing.

 

 

Oh !

That explains why in the first example rotate works even though it's not declared in the CSS, it is played it just begins at 0, makes sense !

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