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

I don't use CodePen, here another link.  Placing the code in a document ready isn't working, placing it outside a document ready isn't working.  It may be a syntax error, obviously when you end most statements in JS you use a semi-colon but with GASP when I use a semi-colon something goes wrong, so then I remove it, then I add it again, then I remove it, arghh !

See the Pen by collection (@collection) on CodePen

Link to comment
Share on other sites

It's not important if it's jsfiddle or Codepen, as long as we have a live demo; somewhere easy to make changes and it's fine. With this it took me 2 seconds to discover you hadn't included any GSAP files in your fiddle.

 

Please add cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js to the external resources in the fiddle and you'll see the box skewing as instructed. I would recommend you get acquainted with the JavaScript console as these sorts of errors are very easy to spot there

 

Internet Explorer

Firefox

Chrome

 

GSAP does not change the behaviour of semi colons in Javascript (it's impossible to do so). There are, I suppose, two ways to write GSAP code - one statement per line, or using method chaining.

var tl = new TimelineLite();

tl.to(foo, 1, { bar:1 });
tl.to(foo, 1, { bar:2 });
tl.to(foo, 1, { bar:3 });

// with method chaining

tl.to(foo, 1, { bar:1 })
  .to(foo, 1, { bar:2 })
  .to(foo, 1, { bar:3 });

// or even

tl.to(foo, 1, { bar:1 }).to(foo, 1, { bar:2 }).to(foo, 1, { bar:3 });

Most functions in GSAP return the same timeline instance so you can instantly call another function without needing to end the statement and refer to the timeline variable again. It's not required, just a coding style. If it's confusing for you then just stick to one statement per line and avoid the method chaining; it won't affect your timeline.

  • Like 5
Link to comment
Share on other sites

Please see the updated fiddle here: jsfiddle.net/dLahxcta/9/

 

You had the fromTo function on the wrong tween, and the misspelling of fromTo as Fromto caused a JavaScript error. Again, the console provides a very simple way to detect these kind of errors and I really do recommend you make yourself familiar with it. Even if you aren't able to understand the error's output, just being able to see that there is one in the console can instantly let you know that something has gone wrong with the JavaScript. It (usually) even lets you know the exact line that caused the error.

 

Once this is corrected all 5 tweens are correctly placed in the timeline, one after the other. You can use relative offsets or absolute positions to adjust positioning as you like, but be aware that overlapping tweens with conflicting values (e.g. both tween skewX) will be overwritten by default.

Link to comment
Share on other sites

I wrote the code up at 6am that could explain the fromTo() error :-P

 

If .to() goes from one sequence to the next, what does .fromTo() do go from the end of one sequence to another ?

 

Two tween with skewX:50 which gets overwritten the last value or the first value or both ?

Link to comment
Share on other sites

to() tweens between the current values and "end values" passed as the 3rd parameter. The current values are determined at the point the tween starts, so in the case of a chain of tweens (of the same property) in a timeline, the "start values" for a to() tween should be the "end values" of the previous tween.

 

fromTo() tweens between "start values" passed as the 3rd parameter and "end values" passed as the 4th parameter.

 

These functions are covered by the learning materials you have been directed to, the API documentation, and have been explained more than once before

 

http://greensock.com/forums/topic/11099-tweening-div-between-two-css-properties/#entry44613

http://greensock.com/forums/topic/11099-tweening-div-between-two-css-properties/#entry44635

 

---

 

overwriting is described in the Getting Started guide and in the Special Properties section of the TweenLite documentation. When a tween is created that conflicts with an existing tween, the existing tween is overwritten when using the default overwrite mode.

 

---

 

A lot of effort was spent creating learning materials to make it easier for new users like yourself to learn GSAP's fundamentals. You haven't indicated if you've been through these yet so at this point I can only assume you still haven't. If you have been through all of it though, and are still having difficulty understanding the common functions of GSAP please let us know, as it would appear they are failing in their task at introducing the very basics.

  • Like 3
Link to comment
Share on other sites

I have watched mostly all of the videos and read the documentation on GSAP before even asking the questions I have asked, and it still wasn't that clear.  The .to() tween moves down the chain from one element to another, correct ?
 
Your explination on how the fromTo() sounds as if it carries on from the .to() tween, which doesn't sound right ? :?

logo.fromTo(".proxylogo",24,{skewY:12,skewX:23},{rotation:34,rotation:56:});

I tried mixing a fromTo() to a to() didn't work, removed all the .to() and strictly added fromTo() and I get an error on the code above ?

Link to comment
Share on other sites

I'm struggling to find ways of explaining how a fromTo() tween works. Seems everyone has weighed in with really clear explanations.

 

I'm puzzled why you would set 2 rotation values in the to vars like {rotation:34, rotation:56}. If you want to tween from rotation:34 to rotation:56 your tween would look like this

logo.fromTo(".proxylogo",24,{rotation:34},{rotation:56:});

Setting skew values as the from / starting values and rotation values as the to / end values isn't going to yield results. You can't tween from a skewY:12 to rotation:34. You need to have matching pairs of values in the from and to vars. 

 

I think at this point in time it might help to rewind back to the basics.

A fromTo() tween is used only when you need specific control over BOTH the start and end values. I'd say 90% of the time a from() or to() tween gives the desired results. Maybe its best to hold off on using a fromTo() until you really need it.

 

Please study this example: 

TweenLite.fromTo("#redBox", 2, {backgroundColor:"blue"}, {backgroundColor:"green"})

demo: http://codepen.io/GreenSock/pen/NPbWaK?editors=001

 

#redBox is a div that is red

When you click the button it tweens from blue to green. 

 

Since both the start and end values (blue and green) are not red, it was necessary to use a fromTo() tween.

 

If I wanted to tween the natural red backgroundColor to blue, a to() tween would have been fine.

If I wanted to tween from blue to red, a from() tween would have been fine.

 

If the above demo and explanation does not make sense, please let us know.

 

Otherwise, please provide a very simple demo with only 1 or 2 tweens where you are not getting the behavior you expect.

Its very difficult to sit through 20 seconds of cryptic skew tweens when there is only 1 tween that you have a problem with.

Please make sure there are no console errors in the demo you provide.

I'd advise that you tween color or positional properties (left, top, x, y) instead of skewX and skewY as they are just naturally easier to decipher. 

 

Thanks. 

  • Like 2
Link to comment
Share on other sites

No, that tween should not work. Please re-read all responses to your previous questions.

When seeking help in a forum it would really help if you described what you wanted to do OR how you expected the code to run.

Pasting the same code and saying "shouldn't this work?" has proven not to be effective. 

 

My only last guess is that maybe you want to do something like this

logo.fromTo(".proxylogo",24,{skewY:20, skewX:23, rotation:34},{skewY:40, skewX:55, rotation:56});

note the from and to vars all have the same properties.

 

---

 

 

Yes, you can chain tweens exactly as you asked. In the case of the fromTo() tween you may need to set immediateRender:false depending on the effect you are going for as shown in Post 9 above.

Link to comment
Share on other sites

Suppose I wanted to rotate something between -90 deg and 90 deg, what would be wrong with the following code, besides that the values are not -90 and 90 ?

var logo = new TimelineMax();
logo.fromTo(".proxylogo",24,{rotation:-45, rotation:4},{rotation:-34,rotation:56})
logo.to(".proxylogo",24,{rotation:-35,rotation:60},{rotation:12,rotation:67});
Link to comment
Share on other sites

I wouldn't worry too much about chaining. It's just a shorthand way to write code, and not needed for what you are trying to do.
 
Within a bracket set {}, you can only use a property once.
 

// NO!!! I can't have two first names
{ firstName: "John", firstName: "Bob" }

// OK. I can have a first and last name
{ firstName: "John", lastName: "Doe" }

 

fromTo is just a shorthand way to combine 2 bracket sets together.
 

fromTo = {from values}, {to values}

 

to is just one bracket
 

to = {to values}

 

Lets say I wanted to travel from the US to Brazil. I could write code like this to represent it. 
 

travel.fromTo("#OSUblake", 1, { location: "US" }, { location: "Mexico" });
travel.to("#OSUblake", 2, { location: "Brazil" });

 

What happened here? I started in the US and then went to Mexico which took me 1 day. After that, I left Mexico and went to Brazil, which took me 2 days.
 
Does that help?

  • Like 1
Link to comment
Share on other sites

That helps, but doesn't explain that Carl used three sets with fromTo() and that you can use more then one set with .to() how many sets, sets meaning values in parenthesis can you use with .to() and how many sets can you use with fromTo() ? From my understanding fromTo() tweens from each set within fromTo() while To() tweens one after another, as I mentioned, how many sets can you have ?

Link to comment
Share on other sites

Let's just ignore timelines and chaining for one moment. I just want to go over some fundamental knowledge of how JavaScript works so you can come to some understanding of this without half of everything being said becoming lost in transmission. We usually assume some level of pre-existing JavaScript knowledge and don't delve into these low-level explanations, but these threads are going on forever so it's clear that something is missing here.

 

----------------

 

In JavaScript, a set of uniquely named property/value pairs is called an Object (described by Blake as a set), and looks like this:

{ foo: 10, bar: true }
There is no real limit to the number of properties in an object, but an Object cannot have multiple properties with the same name.

{ foo: 10, foo: 99, bar: true } // THIS IS NOT ALLOWED
 

----------------

 

A Function is a pre-defined sequence of instructions. It can operate on certain values passed to it's parameters. The type, and number, of parameters a Function is designed to handle is usually documented in its API. Sending values in more parameters than the Function is designed to handle is usually pointless, as these will be ignored.

 

----------------

 

Now, from the API:

 

TweenLite.to( target:Object, duration:Number, vars:Object )

 

This function takes 3 parameters in total.

 

target: a standard Object, a DOM element, or a selector String.

duration: any number 0 or greater, defined in seconds

vars: an Object that contains all of the different properties to be tweened. The values of each property in vars will be the "end values" when this tween finishes. The "start values" will be the current values read from the target when the tween begins.

 

----------------

 

TweenLite.from( target:Object, duration:Number, vars:Object )

 

This function takes 3 parameters in total.

 

target: a standard Object, a DOM element, or a selector String.

duration: any number 0 or greater, defined in seconds

vars: an Object that contains all of the different properties to be tweened. The values of each property in vars will be the "start values" when this tween begins. The "end values" will be the current values immediately read from the target.

 

----------------

 

TweenLite.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object )

 

This function takes 4 parameters in total.

 

target: a standard Object, a DOM element, or a selector String.

duration: any number 0 or greater, defined in seconds

fromVars: an Object that contains all of the different properties to be tweened. The values of each property in fromVars will be the "start values" when this tween begins. Must contain all of the same properties defined in toVars.

toVars: an Object that contains all of the different properties to be tweened. The values of each property in toVars will be the "end values" when this tween finishes. Must contain all of the same properties defined in fromVars.

 

----------------

 

I'm not going to write out these functions for TimelineLite as well, but they are the same as above, with the addition of 1 more parameter: position.

It may be used to modify the start time of the tween. If this parameter is sent no value (as it has been in our discussion so far) then the start time of the tween will be at the end of the current timeline. Any further discussion of position can wait until you understand the behaviour of the 3 functions above.

 

----------------

 

Now, your question should really be answered by all of that, but I'll reiterate it again to make it perfectly clear. There are no real limits to the number of different properties defined in each tween as long as you obey the GreenSock API. You can have as many properties as you want in a "set", but you can only send as many sets as each Function is designed to handle.

  • Like 2
Link to comment
Share on other sites

I'm curious to know your understanding of the concept of a tween at this point.

 

At the fundamental level, it's just an animation of a property between 2 values. It animates from a start value to an end value. That's really all there is to it. The different methods available just depend on whether you know the start values, the end values, or both for the tween you are creating.

 

Carl provided an example using colors here: http://greensock.com/forums/topic/11104-tweening-a-div-between-multiple-css-properties/#entry44668

 

Blake had a very clear example using travel here: http://greensock.com/forums/topic/11104-tweening-a-div-between-multiple-css-properties/#entry44679

 

I'll make you another...

 

 

We have one div:

<div id="example" style="width:0px;"></div>

We have one tween:

TweenLite.to("#example", 3, { width: "200px" });

This is going to tween #example's width.

 

When the tween begins, it reads the start values from the target (#example). The width is currently 0px, so the start value is 0px.

 

Because it is a .to() tween, the end value is what was provided in the tween's vars object. The end value is 200px.

 

The tween will spend 3 seconds tweening (animating) #example's width from the start value of 0px to the end value of 200px.

 

Here is a demo of this in action 

See the Pen KwNVwa by jamiejefferson (@jamiejefferson) on CodePen

Link to comment
Share on other sites

The start value of a to() tween is from value in the CSS property correct, but the start value from a fromTo() tween is not from the CSS property instead from the toVars, correct ?

 

When Jamie posted his response in post #17 I began focusing on GSAP as his explination was well put, I still had questions remaning, then the thread went into as I mentioned in my previous post (Page 2), how JS works and it completely derailed.  This is tweening with code and with every frame work one must understand how it works, now that I'm getting an understand although there still remains a few lingering questions for those who helped move the thread along. 

 

I'm sure these two threads will help those new to GSAP !

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.

  • Like 1
Link to comment
Share on other sites

The start values are all what is in the CSS style, with the exception of FromTo(), correct which has the start and end values combined and is not reading from the CSS style value ? I want to make sure that is exactly how it works ?

 

All this time when you were saying target you were meaning the CSS values, if so that is where thing can get confusing, it should be noted as such rather then writting target !

Link to comment
Share on other sites

Yes to your first paragraph of questions.

 

The target of a tween is the object (or objects) that are being tweened. In all examples above the target has been a single div. Please see Jamie's post that explains all the tween parameters.

Target most often refers to a DOM element that HAS css values.

Link to comment
Share on other sites

Please, please read the previous post again. I highlighted the explanation of the start/end values in red so that you don't miss it this time. All 3 functions (to, from, fromTo) have different behaviour regarding start and end values. It just depends on how you want to create your tween on which function you use.

 

The values that are read from the target include both the styles set in any CSS files and the style tag of the element.

 

Please reread this post where the target of a tween is explained again. All of this time target has referred to the element that is the target of the tween. The values that are read will be the CSS/style values of the target (assuming you are tweening a CSS style)

 

And finally view this simple demo of all three methods being used to create the same effect 

See the Pen wBoGBr by jamiejefferson (@jamiejefferson) on CodePen

 

------------

 

It's frustrating for us (and I'm sure for you too) that nearly a week later we are still circling around the simplest functions in GSAP. If my explanations are not clear enough for you, then I'd like to suggest that you go through the Jump Start guide and Getting Started guide again in case some of their information has been misinterpreted or passed over.

  • Like 1
Link to comment
Share on other sites

If the values begin in the CSS property then how come this isn't work, the value is at 0 for skewX & Y ?

I know you can offset the tweens so they are not beginning at the same time, the above example exempts such a need.

Edited by Lynx
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...