@media queries and an existing timeline

[t0m]

Hi all,

 

So, I'm separating my content, my presentation and my animation code like a good boy with HTML, CSS and Javascript all doing their respective jobs and leaving the others alone. 

My animation doe not deal with position or font-size (fontSize). It's all stuff like this...

 

// animate in the first elements
tl.to(title1, {alpha:1, letterSpacing:'.5rem', duration:.66, ease:'power3.out'}, '>1');
tl.to(sub1, {alpha:1, scale:1, duration:.4, ease:'power3.out', startAt:{scale:1.1}}, '>1');
// animate out the first elements
tl.to(sub1, {alpha:0, duration:.3, ease:'power3.in'}, '>5');
tl.to(title1, {alpha:0, letterSpacing:'.25rem', duration:.3, ease:'power3.in'}, '<.2');

So I thought all would be cool if in some media queries I repositioned things and changed their font-size to fit available screen. However the media queries below only half work:

 

@media screen and (max-width: 1000px) {

    #homepage-hero-row #homepage-hero h1.hero-title {
        font-size: 2.5rem;
        top: 50%;
    }
    
    #homepage-hero-row #homepage-hero h3.hero-sub {
        font-size: 1.25rem;
        top: 62%;
    }
    
}

Setting top works, the font-size however does not. It looks like GSAP is setting the font-size directly on the element in order to tween the scale.

So what's the best practice way of doing things here? I like the idea of letting CSS handle the layout depending on how much screen real estate there is and the JS tweening things ignorant of what the CSS is doing. Should I wrap the heading elements in a div, and tween the div and set it's position with CSS and scale it with GSAP? Or should I have a scale factor in my JS that I change based on the available pixels? Although maybe that won't work once the timeline is running.

 

Just getting back into this stuff after years away. Compliments on GSAP, I remember the first version of TweenLite

Cheers, Tom.

[GreenSock]

Hi @t0m! Wow, you remember the first version of TweenLite? Nice. 💚

 

It's tough to offer advice without seeing any kind of minimal demo (like a CodePen), but I assume you animated fontSize (or whatever) with GSAP and then you were expecting a CSS rule to override that, right? That just boils down to the whole "cascading" part of CSS and which things take priority. If you have a CSS rule that applies to an element AND that element ALSO has an inline style applied to it, the inline style always trumps the CSS rule. It's just how browsers work and it's a GOOD thing. 

 

GSAP applies things via inline styles. Again, that's GOOD. It makes things very specific and individualized to the elements you're animating. 

 

You can definitely accomplish pretty much anything you want once you understand how stuff works. I'd strongly recommend looking at GSAP's matchMedia(): 

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

It gives you total control of this stuff.  And maybe read up on how cascading works in CSS in general. 

 

If you're still struggling, just whip together a CodePen and post it here and we'd be happy to offer some help with anything GSAP-related. 

 

Good luck! 

[t0m]

Yep, I used to work with Robert Penner's equations and roll my own tweening till TweenLite ;).

 

It's absolutely the fact that GSAP is tweening font-size directly on the element, the tween code specifies "scale" which is becoming font-size on the heading element. I know directly setting a style property on an element beats a CSS file set one, apart from !important things. 

If "scale" applied to a div is abstraced to a transform then I guess nesting is the answer, I'll add a codepen tomorrow to be absolutely clear.
 

[GreenSock]

3 hours ago, t0m said:

If "scale" applied to a div is abstraced to a transform then I guess nesting is the answer, I'll add a codepen tomorrow to be absolutely clear.

Hm, I'm not quite sure what you mean there. I'm sure it'll make more sense when I see the CodePen demo. Did you look into matchMedia()?

 

3 hours ago, t0m said:

Yep, I used to work with Robert Penner's equations and roll my own tweening till TweenLite ;).

Ah, so you're pretty hardcore. 👍

[t0m]

Ha not sure about hardcore but before TweenLite you had to, I remember Hooke's law being all the rage...

Ok, so mathMedia looks awesome, I'd like to keep the styles in the CSS if poss but for a JS solution that looks really nice.

 

My initial problem though must be elsewhere as making a minimal example it works fine. So what I thought was a clash between GSAP tweening the font-size direct on the element and the media query in CSS can't be the case.

 

See the Pen XWwEdmR?editors=1111 by ch1mp (@ch1mp) on CodePen

 

There the media query under 1000px halves the font size and all works ok. I'm guessing it's not the timeline in the page where I have the problem. 

 

Anyway cheers, either matchMedia or me finding what else is happening will be the solution :)