Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
335

Dividing CSS by media queries breaks animations?

Recommended Posts

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?

Link to post
Share on other sites

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

 

:)

  • Like 1
Link to post
Share on other sites

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);
Link to post
Share on other sites

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

 

 

:)

  • Like 1
Link to post
Share on other sites

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. 

  • Like 2
Link to post
Share on other sites

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.

:)

  • Like 2
Link to post
Share on other sites

Many thanks for your help!!!

 

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

  • Like 2
Link to post
Share on other sites

Excellent, thanks for letting us know.

Link to post
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.

×