matchMedia()

[danb92]

Can anybody tell me why this doesn't work?
Just trying to get cards to fade in from different directions depending on the screen size. The first animation works fine but the second not at all.
How am I supposed to set up different behaviours for the same elements depending on the screen size?
Thanks in advance!
Daniel
 

    let mm = gsap.matchMedia();

    mm.add('(min-width: 800px)', () => {

      ScrollTrigger.create({

        trigger: '#my-story',

        start: 'top 30%',

        end: 'bottom bottom',

        scrub: true,

        animation: tlLarge,

      });

    });

 

    mm.add('(max-width: 799px)', () => {

      ScrollTrigger.create({

        trigger: '#my-story',

        start: 'top 30%',

        end: 'bottom bottom',

        scrub: true,

        animation: tlMed,

      });

    });

[danb92]

Just in case it's relevant I'll add the animations too..

 

    //Large screen box directions

    let tlLarge = gsap.timeline();

    tlLarge.from('#t-c1', {

      opacity: 0,

      y: 100,

      filter: 'blur(30px)',

    });

    tlLarge.from('#t-c2', {

      opacity: 0,

      y: 100,

      filter: 'blur(30px)',

    });

    tlLarge.from('#t-c3', {

      opacity: 0,

      y: 100,

      filter: 'blur(30px)',

    });

 

    //Medium screen box directions

    let tlMed = gsap.timeline();

    tlMed.from('#t-c1', {

      opacity: 0,

      x: -100,

      filter: 'blur(30px)',

    });

    tlMed.from('#t-c2', {

      opacity: 0,

      x: 100,

      filter: 'blur(30px)',

    });

    tlMed.from('#t-c3', {

      opacity: 0,

      x: -100,

      filter: 'blur(30px)',

    });

[Rodrigo]

Hi,

 

Is really hard to find out what the issue could be without a minimal demo.

 

Most likely this has to do with the fact that you are creating two different animations that affect the same targets and the same properties. Is better to create the animation inside each MatchMedia callback:

mm.add('(max-width: 799px)', () => {
  let tlMed = gsap.timeline();
  tlMed.from('#t-c1', {
    opacity: 0,
    x: -100,
    filter: 'blur(30px)',
  });
  tlMed.from('#t-c2', {
    opacity: 0,
    x: 100,
    filter: 'blur(30px)',
  });
  tlMed.from('#t-c3', {
    opacity: 0,
    x: -100,
    filter: 'blur(30px)',
  });
  ScrollTrigger.create({
    trigger: '#my-story',
    start: 'top 30%',
    end: 'bottom bottom',
    scrub: true,
    animation: tlMed,
  });
});

And follow the same pattern with the large screen animation.

 

Hopefully this helps.

Happy Tweening!

[danb92]

Hey there Rodrigo,
That actually fixed it!
Just needed to create the timelines inside each mm.add

Thanks a million!
Daniel