Jump to content
Search Community

tween scale matrix override transform translate class

Havas Media test
Moderator Tag

Go to solution Solved by PointC,

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

Hello, 

 

First, thank you for the amazing job!!!!

 

Then, if someone would be kind enough to look at this pen :

 

My problem is that i want to keep my .block centered but the scale tween override my block's css (transform translate)

it works if i use immediateRender : false, it worls fine but i want my block to be hidden at start.

 

Any help would be great, thanks a lot.

Bernard

 

 

 

 

See the Pen ryzYNg by bquarante (@bquarante) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Bernard :)

 

Welcome to the GreenSock forum. 

 

I like to use xPercent and yPercent to center things like that. I actually let GSAP set almost everything for me. It avoids all those pesky little CSS problems. So you'd set it like this:

TweenMax.set(".centered_Width", {xPercent:-50, yPercent:-50, left:"50%", top:"50%"})

Here's a fork of your pen:

 

See the Pen YZxEoa by PointC (@PointC) on CodePen

 

More info about xPercent and yPercent

 

https://greensock.com/gsap-1-13-1

 

Happy tweening.

:)

  • Like 5
Link to comment
Share on other sites

Hi Bernard :)

 

Welcome to the GreenSock forum. 

 

I like to use xPercent and yPercent to center things like that. I actually let GSAP set almost everything for me. It avoids all those pesky little CSS problems. So you'd set it like this:

TweenMax.set(".centered_Width", {xPercent:-50, yPercent:-50, left:"50%", top:"50%"})

Here's a fork of your pen:

 

See the Pen YZxEoa by PointC (@PointC) on CodePen

 

More info about xPercent and yPercent

 

https://greensock.com/gsap-1-13-1

 

Happy tweening.

:)

 

Works fine!

 

I already used the xPercent an Ypercent and i found it very usefull (i saw the carousel example when it first came out)

I tried to init my centering classes into css file... but i had to do it in the js file instead :)

 

thanks a bunch!

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Hello Craig,

 

thanks again for your last answer, i used that technic a lot now...

 

Now i have a new question about this "tween and positioning" subject,

maybe i should open a new topic....

 

I'd like to change the block position and overwrite properties ...with a className tween (or any other predefined properties 'object')

the issue is that a className as no effect because of the previous inline css 

 

If you (or anyone who have time) could check that, here is the codepen :

See the Pen bWojWy by bquarante (@bquarante) on CodePen

 

Cheers,

Bernard

Link to comment
Share on other sites

Yes you're right, adding a class name won't work correctly. Is there a reason you need to animate via adding a class?

 

I'd think the easiest thing to do would be to first get the width & height of your wrapper and your box. Then, using a little math, you could put it in any corner you wanted. There would be several ways to get that data via plain JavaScript - clientWidth, offsetWidth etc. or via jQuery methods outerWidth() innerWidth() etc..

 

Unless there is some reason you can't do that, that would be my recommendation.

 

Happy tweening.

:) 

  • Like 1
Link to comment
Share on other sites

Hello Havas Media

 

On Line 15 of your commented out className tween you have the class "+=right_bottom" but you dont have that CSS rule in your CSS?

 

But I agree with PointC that its better to just get the box width and height via JS and then put it in your corner. I dont see nothing wrong with what you have so far on Line 12 that already works

 

;)

  • Like 1
Link to comment
Share on other sites

I don't need specifically to tween a class here...

I make banners and i often need to center elements into wrappers then uncenter them, so i use those "helper classes"

 

i use className mostly to to deal with responsive banners and adapt tweens values on portrait and landscape

i set different properties for one class in the css media queries part, i find it very usefull but it has some limitations with "helper classes"...

 

When it starts to be too difficult (portrait design is very different than lanscape design, easing should be different....), i have to manage 2 DOM, 2 timeline and use JS.

I'm just diggin' to find a easy way to build complicated design, i'm a bit lazy so i don't want to write too many code :D

 

Anyway thanks for your help :) and fast answers!

Link to comment
Share on other sites

On 05/05/2017 at 6:29 PM, Jonathan said:

Hello Havas Media

 

On Line 15 of your commented out className tween you have the class "+=right_bottom" but you dont have that CSS rule in your CSS?

 

But I agree with PointC that its better to just get the box width and height via JS and then put it in your corner. I dont see nothing wrong with what you have so far on Line 12 that already works

 

;)

 

that class is defined in the JS : TweenMax.set(".right_bottom", {xPercent:0, yPercent:0, right:0, bottom:0})

(the reason i do that is explained here ) 

 

Link to comment
Share on other sites

Hello @Havas Media

 

The CSSRulePlugin needs to reference a CSS Rule within a style-sheet or a  CSS Rule that is defined in a <style> tag for it to work, not via JS. Applying CSS inline is not a CSS Rule, but an element defined inline within the tag as a style.

 

So by you adding CSS via the GSAP set() method will not work, due to it being inline and not a proper CSS Rule in a style sheet.

 

Check out the docs for CSSRulePlugin which reads as follows:
 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSRulePlugin/

 

Quote

CSSRulePlugin:
Allows TweenLite and TweenMax to animate the raw style sheet rules which affect all objects of a particular selector rather than affecting an individual DOM element's style (that's what the CSSPlugin is for).

 

So it has to be the raw style sheet CSS rules and not inline styles. For inline styles GSAP uses the CSSPlugin.

 

Please see the CSSRulePlugin Docs:

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSRulePlugin/

 

:)

  • Like 1
Link to comment
Share on other sites

Thank you Jonathan, it's more clear now...

 

Finally it seems i can't use "tween responsive positioning" the way i wanted to :(

if i remove the class in JS and replace it in the css, my element is not centered anymore when his parent div scales (width here)

if i let the class in JS, the block stays centered when the parent div scales but a className can't override those inline css if i want to change position again.

No choice but overriding all properties one by one in the tween...and still no solution to make it responsive with mediaqueries classes except making two different timelines with different tweens, huh.

Link to comment
Share on other sites

You can override a CSS inline style with a CSS Rule by using the !important declaration in your CSS Rule property.

 

So lets say i have a CSS Rule that is this:

 

.box {
  width: 200px;
}


But i have a inline style on my element that has a width: 300px like this.
 

<div class="box" style="width:300px;"></div>


I can override that inline style with the !important exception declaration like this.
 

.box {
  width: 200px !important;
}


That would !important exception declaration would override the inline style.

 

But keep in mind that the !important exception declaration is only a last resort and should not be over used, unless needed for special circumstances, like maybe what you need it for.

 

Read more about CSS !important declaration here:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

 

:)

  • Like 1
Link to comment
Share on other sites

Why don't you use flexbox? 

 

This will center its children!

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

 

And it scales real nice.

 

 

More flexbox, animated for your viewing pleasure.

 

See the Pen dMLQJr by osublake (@osublake) on CodePen

 

If layout is such an issue, write some functions and reuse them with all your projects. Figuring out corner and center positions is real easy.

 

// Top Left
x = 0;
y = 0;

// Top Right
x = parentWidth - elementWidth;
y = 0;

// Bottom Right
x = parentWidth - elementWidth;
y = parentHeight - elementHeight;

// Bottom Left
x = 0;
y = parentHeight - elementHeight;

// Center
x = parentWidth / 2- elementWidth / 2;
y = parentHeight / 2 - elementHeight / 2;

 

 

You can even parameterize your functions.

 

 

 

 

  • Like 4
Link to comment
Share on other sites

15 hours ago, Jonathan said:

You can override a CSS inline style with a CSS Rule by using the !important declaration in your CSS Rule property.

 

So lets say i have a CSS Rule that is this:

 


.box {
  width: 200px;
}


But i have a inline style on my element that has a width: 300px like this.
 


<div class="box" style="width:300px;"></div>


I can override that inline style with the !important exception declaration like this.
 


.box {
  width: 200px !important;
}


That would !important exception declaration would override the inline style.

 

But keep in mind that the !important exception declaration is only a last resort and should not be over used, unless needed for special circumstances, like maybe what you need it for.

 

Read more about CSS !important declaration here:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

 

:)

 

I already tried that before...

but it works only once, i can't overwrite css several times with !important

(and as you wrote, it's not a good practice - as Harry Roberts and many others would say :) )

Link to comment
Share on other sites

12 hours ago, OSUblake said:

Why don't you use flexbox? 

 

This will center its children!


.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

 

And it scales real nice.

 

 

More flexbox, animated for your viewing pleasure.

 

See the Pen dMLQJr by osublake (@osublake) on CodePen

 

If layout is such an issue, write some functions and reuse them with all your projects. Figuring out corner and center positions is real easy.

 


// Top Left
x = 0;
y = 0;

// Top Right
x = parentWidth - elementWidth;
y = 0;

// Bottom Right
x = parentWidth - elementWidth;
y = parentHeight - elementHeight;

// Bottom Left
x = 0;
y = parentHeight - elementHeight;

// Center
x = parentWidth / 2- elementWidth / 2;
y = parentHeight / 2 - elementHeight / 2;

 

 

You can even parameterize your functions.

 

 

 

 

 

Hello Blake,

 

Obviously it's the best option.

I didn't want to use Flexbox initially because i need a very good browser compatibility (banner ad can be display on so many devices)... but i have to admit that this responsive case (interstitial ad) is strictly for mobile/tablet use so it should be ok. http://caniuse.com/#search=flexbox

 

The Animated Flexbox Playground codepen is one of my favourites <3, so easy to understand Flexbox properties with it...

Now I need to make some "real" banner tests with Flexbox (i think it will do the job perfectly)

 

Thank you all for your answers!!!

I'm always surprised and delighted to see how quickly the answers arrive.

 

All the best,

Bernard

 

 

Link to comment
Share on other sites

I was just letting you know that is how you override inline styles. The reason !important works only once has to do with CSS specifity in your CSS rule. That is your issue and that is the nature of CSS. 

 

Butthat is why in my first reply I recommend just to use JS to position your elements like Craig, PointC adviced above as well as Blake.  And not use the CSSRulePlugin in this case. Because when sing the CSSRulePlugin you have to be mindful and specific with your CSS rules to do what your trying to do with it. But that's not the CSSRulePlugins fault just how CSS works :)

  • Like 1
Link to comment
Share on other sites

My main goal is to manage responsive animations in landscape and portrait mode.

I use tweens with +=className and define different positions (and width, height, etc...) for my item in css media queries.

Flexbox works fine for re-positioning! :)

 

Here is a really basic example of what i succeed to do with flex container and child margin settings  :

See the Pen xdWEQP by bquarante (@bquarante) on CodePen

 

Resize page and reload to see the .item position changing from "center center"

to "right bottom" (landscape) or "left top" (portrait)

 

The tween works on Chrome ( i can see the margin style tweening in the DOM) but not on FF... any clue ?

 

Link to comment
Share on other sites

3 minutes ago, Jonathan said:

The reason !important works only once has to do with CSS specifity in your CSS rule. That is your issue and that is the nature of CSS. I was just letting you know that is how you override inline styles. But that is why in my first reply I recommend just to use CSS to position you ur elements like Craig, PointC adviced above as well as  Blake.  And not use the CSSRulePlugin in this case. Because when sing the CSSRulePlugin you have to be mindful and specific with your CSS rules to do what your trying to do with it. But that's not the CSSRulePlugins fault just how CSS works :)

 

thank you for those explanations, it's hard to deal with css sometimes :D 

Link to comment
Share on other sites

Just follow my flexbox demo here. I'm setting the position using CSS classes. That's actually desirable here because we can let the browser do all the calculations. 

 

After setting a class, media query event, or resize event, call the layout function and let the magic begin. You really can't animate flexbox as most of its properties aren't based on numbers, so there's some sleight of hand going on. :-D

 

See the Pen zwWgao by osublake (@osublake) on CodePen

 

To understand more about how the animation works, check out this post.

 

And here's a long, but good topic about creating responsive animations.

 

  • Like 1
Link to comment
Share on other sites

Whoaw! :) Thank you so much for this reply Blake.

 

I had a quick look at the codepen and the topics, i have to read that again and again and make some test (_gsTransform seems interesting).

My JS skills are limited compared to yours....

So i'll have to work on that (it seems JS can bring some workaround)

I won't hesitate to ask you if i have issues that i can't solve by crawling gsap forums.

 

Thanks again,

Bernard

Link to comment
Share on other sites

Yeah, _gsTransform is very useful. The first time you set or animate a transform (x, y, scale, rotation, skew), GSAP will put that object on your element, which you can use to lookup the value.

TweenLite.set(myElement, { x: 100 });

var x = myElement._gsTransform.x; // => 100

 

And this technique will work with other other CSS based layouts besides flexbox. In the post where I describe how this works, the layout is based on floats. The only caveat for creating animations like this is the CSS should not have any transforms in it as it may throw some of the positioning off.

 

See the Pen KNwovv by osublake (@osublake) on CodePen

 

 

  • 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.
×
×
  • Create New...