Can we apply "MatchMedia" to the animation in my minimum demo?

[Danclp]

Hi there,

 

I know I have been advised to set up the timeline one section after another.

Since my ScrollTrigger animation works smoothly and well after a few tries.

I have become lazy to change the format anymore.

Anyway, there is still one small thing that I couldn't figure out, the MatchMedia.

Is it possible that we can insert the MatchMedia command line in between the timeline?

If the answer is yes, I wonder how does it work?

Through the research, I had no luck getting similar references (or maybe I didn't search properly).

As you can see in the attached screenshot, I intend to keep the content centred on the desktop mode and be able to scroll through the screen while on mobile.

However, with my current code, how do I implement MatchMedia though?

Can someone kindly give me some guidance?

Thank you.

 

.fromTo(".section-4 .text", {
    xPercent: 100,
  }, {
    xPercent: 0,
    duration: 1
  }, "<")
  .to(".section-4", {
    autoAlpha: 0
  })
  .to(".section-5", {
    autoAlpha: 1,
    duration: 1
  })
// MatchMedia condition to be applied here?
  .fromTo(".section-wrap", {
    yPercent: 0
  }, {
    yPercent: -85,
    duration: 2
  }, "<+=0.5")
// End here
  .to(".section-5", {
    autoAlpha: 0,
    delay: 5,
    duration: 1
  })

 

See the Pen mdQGLLO by danclp (@danclp) on CodePen

[Rodrigo]

Hi,

 

It can be done but it would create an unexpected result, the reason being that MatchMedia will take care of reverting everything that is created within it's scope and run the animation when the breakpoint is passed, but if you add animations outside that scope only the animation within the scope will run and the other will stay in the state they are at that point.

 

Here is a simple example that illustrates how this behaves:

See the Pen GRwXwLR by GreenSock (@GreenSock) on CodePen

 

If that is what you are looking for as a result, then go ahead. My advice will be to always put everything inside the MatchMedia instance in order to correctly revert and avoid odd visual glitches or situations like this, but you'll have to decide what's the best outcome for your project.

 

Hopefully this helps.

Happy Tweening!

[Danclp]

Hi Rodrigo,

 

Once again, thanks for the reply.

I will give this suggestion a try.

However, if this is not the best practice, in my case, putting everything inside the MatchMedia instance may not work either.

 

"Section 5" is the only section I have problems with on different devices.

Do you have any other recommendations that you could provide me with?

I hope I am not taking things for granted, as I am the only brain on this development.

So, suggestions are pretty much appreciated.

[Rodrigo]

Hi,

 

I wouldn't categorize this as best practices territory. There is nothing inherently wrong with the approach you want to take, just a visual issue that would depend on the setup you have.

 

In your demo you don't have a GSAP MatchMedia instance so we can't see what could be the issue there. So it would be great if you could include a minimal demo that shows exactly what you're trying to do and what is not working, there is not much we can do.

 

Happy Tweening!

[Danclp]

Hi Rodrigo,

 

Understand.

I was just trying my luck to see if there are any other possible answers.

Anyhow, the earlier suggested method works perfectly fine with my codes.

Once again, thanks a million for your patience.

Have a great day.

 

[Rodrigo]

Hi,

 

There could be other options but those would imply more sophisticated custom logic, like using labels and replaying the timeline from a certain point based on the breakpoint, etc. But that's a bit beyond the help we can provide in these free forums, since it would be tied to design and UI/UX decisions among other things, which falls into the consulting category.

 

The main idea in the current thread is for you and other users to know the basic behaviour and how to go from there.

 

Happy Tweening!

[Danclp]

Hi Rodrigo,

 

Noted.

I am a designer and a self-trained web developer.

I may not be able to understand overly complex JavaScript solutions either.

 

😀

[mvaneijgen]

47 minutes ago, Danclp said:

I am a designer and a self-trained web developer.

Ha! Same here! Just hang around these forums and when you feel like it try to help others, that's the way I've learned and still am learning! 

 

Your project is looking good, don't sweat it to much, if it works it works. Good luck and happy tweening! 

[Danclp]

@mvaneijgen

 

Thanks!