Dividing CSS by media queries breaks animations?

[335 3 Likes (Newbie)]

I am working on a webpage where I use ScrollMagic and GSAP for animations.

 

I usually work on one general layout and then refine it for different screen sizes.

 

I just divided my css by media query so I can target different screen sizes and all my animations stopped working!?

 

The CSS is the same- the only difference is whether it is just one style or the same style divided by query.

 

Do you know the reason for this happening?

[Jonathan 5,176 Likes (Superhero)]

Hello 335.

 

This can be caused by a numerous amount of CSS in those media queries. I would suggest to comment those media queries and styles in them out and and then slowly add them back in to isolate the cause.

 

In the forum we really need to stay focused on GSAP specific questions. ScrollMagic uses GSAP as their animation engine but ScrollMagic isnt made by GreenSock.  You can find more info on media queries here:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

 

[335 3 Likes (Newbie)]

Hi Jonathan!

 

Sorry, I mentioned ScrollMagic but I think this is GSAP related.

 

What I did was to copy whole CSS before all media queries and this seems to work.

 

However, animations of pseudo-elements using CSSRule no longer animate and they did before I changed the CSS.

 

An example of the above is here:

 

http://thinkingplace.org/

 

Code relating to these animations is:

var introhintTl = new TimelineMax();

var rule = CSSRulePlugin.getRule(".h_int:after");


introhintTl.from($('.h_int'), 0.5, {y: 200, ease: Expo.easeInOut})
           .from(rule, 0.3, {cssRule:{left:"-30%"}})
           .from($('.curtain1'), 0.3, {x: '100%', ease: Expo.easeInOut}, 1.5)
           .from($('.curtain2'), 0.3, {x: '100%', ease: Expo.easeInOut})
           .from($('.hut1'), 0.2, {x: '100%', ease: Expo.easeInOut})
           .from($('.caption_1'), 0.5, {width: '0px', padding:"0px", ease: Expo.easeInOut})
           .from($('.caption_1 p'), 0.5, {autoAlpha: "0", ease:Power0.easeNone});
  
var introhintScene = new ScrollMagic.Scene({
    triggerElement: '#intro',
    triggerHook: 0.4,
    reverse:false
})
.setTween(introhintTl)
.addTo(controller);










var introhprojTl = new TimelineMax();


var rule2 = CSSRulePlugin.getRule(".h_proj:after");


introhprojTl.from($('.h_proj'), 0.5, {y: 200, ease: Expo.easeInOut})
            .from(rule2, 0.3, {cssRule:{left:"-30%"}})
            .staggerFrom($('.pls'), 0.3, {y: 300, ease:Power0.easeNone}, 0.3);
  
var introhprojScene = new ScrollMagic.Scene({
    triggerElement: '.projects',
    triggerHook: 0.7,
    reverse:false
})
.setTween(introhprojTl)
.addTo(controller);










var introhbioTl = new TimelineMax();


var rule3 = CSSRulePlugin.getRule(".h_bio:after");


introhbioTl.from($('.h_bio'), 0.5, {y: 200, ease: Expo.easeInOut})
           .from(rule3, 0.3, {cssRule:{left:"-30%"}})
           .from($('.bim img'), 0.4, {x: "120%", ease:Power0.easeNone}, 1.5)
           .from($('.caption_2'), 0.5, {height: '0px', padding:"0px", ease: Expo.easeInOut})
           .from($('.caption_2 p'), 0.3, {autoAlpha: "0", ease:Power0.easeNone});


  
var introhbioScene = new ScrollMagic.Scene({
    triggerElement: '.biography',
    triggerHook: 0.7,
    reverse:false
})
.setTween(introhbioTl)
.addTo(controller);

[Jonathan 5,176 Likes (Superhero)]

You might want to create a reduced codepen demo example, since debugging your website will be difficult to test live.

 

 

[Carl 9,066 Likes (Superhero)]

Unfortunately, there are known difficulties with using CSSRulePlugin and media queries. If that is the only issue you are facing, it will be best to use real DOM elements instead pseudo elements. 

[PointC 8,599 Likes (Superhero)]

I'll second Carl's advice and recommend not animating pseudo elements. They're a nice little option for some styling, but animating those little buggers is a giant pain. Save yourself from the headache and drop in some actual DOM elements when you want something to move.

 

Happy tweening.

[335 3 Likes (Newbie)]

Many thanks for your help!!!

 

I removed all calls to the CSSRule plugin and now break points work as normal!

[Carl 9,066 Likes (Superhero)]

Excellent, thanks for letting us know.