[Can't find GSDevTools in gsap-member zip]

My bad sorry... I didn't noticed the "?" badge that tells i'm not in Club anymore...
i thought that my account was renewed by my agency (as it is since maaaany years ) but it seems i need to ask them this time. Thanks for the quick reply!

 

[Can't find GSDevTools in gsap-member zip]

Hello,

 

as i mentioned previously, i download the gsap-member zip file which mean i'm already a Gsap Member 
I don't need npm package neither codepen links (even if they are really helpful btw). I produce animated banners and i need the GSDevtool.min.js file locally (which was i the zip folder in the previous Gsap3 package)
I use a previous version of GSdevTools.js file that works but recently i noticed a bug so i tried to download the lastest gsap package to check if a update has been made on the gsdevtools file.

Thanks for you help

[Can't find GSDevTools in gsap-member zip]

Hello 

 

Everything is in the title, i recently downloaded the gsap-member archive and i can't find GSdevtools.js file.

Thanks a lot for your help

Bernard

[tween scale matrix override transform translate class]

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

[tween scale matrix override transform translate class]

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  

[tween scale matrix override transform translate class]

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 ?

 

[tween scale matrix override transform translate class]

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.

 

See the Pen 04d7277c603bacb58ff482e470cd4ba8?editors=0110 by osublake (@osublake) on CodePen

 

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.

 

See the Pen ef09d87bc5e99a79c3db9f21880d031f?editors=0010 by osublake (@osublake) on CodePen

 

 

 

 

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

 

 

[tween scale matrix override transform translate class]

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  )

[tween scale matrix override transform translate class]

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.

[tween scale matrix override transform translate class]

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 ) 

 

[tween scale matrix override transform translate class]

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

 

Anyway thanks for your help and fast answers!

[tween scale matrix override transform translate class]

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

[tween scale matrix override transform translate class]

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!

[tween scale matrix override transform translate class]

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