Jump to content
Search Community

matchMedia

BennyTuner test
Moderator Tag

Go to solution Solved by Shrug ¯\_(ツ)_/¯,

Recommended Posts

Hi Guys

well I've got this far in a week - not too shabby for a C# guy learning gsap, svg, and animation as I go!

https://www.bennysutton.com/

 

svg's - grrrr... they don't play nicely with CSS

I'm tearing my hair out over positioning elements on top of and getting svg's to be responsive

 

You should see/hear on my homepage that the guitar amp lifier (svg)  buttons play  music (see javascript at bottom of page in browser code source view)- and the amp slides in to top of the cab - tricky stuff gsap makes simple

 

However, getting it to work portrait on mobile... the buttons are too small! I've got CSS media queries but debugging in the console is a nightmare and they still don't work after hours of trying.

 

So, finally, my question is this - only had a quick squint at match media from your leatest newsletter - might this solve my problems? It seems only for the scroll trigger? is there a hack to dynamically size my svg depending on screen width with gsap?

 

 

 

Link to comment
Share on other sites

  • Solution

Congrats regarding your learning of GSAP, etc.,

 

You can just use standard Javascript matchMedia with GSAP. There are many older examples and other things regarding resize events, etc., that can be found throughout forum.  Though looking at those horizontal buttons you may not be able to just size such a configuration for mobile. Instead you will probably need to come up with a different configuration for mobile if you hope to keep the same look and feel. Like a stacked two across approach for usability on mobile.

  • Like 2
Link to comment
Share on other sites

ah, thanks, that's how to do it - my knowledge of javascript is limited - same curly braces but another world!

any tips, broad strokes only needed, how to position the centre of the svg to the centre of the screen? transform origin 50% and halve the screen width I just found out with matchMedia?

Link to comment
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.
×
×
  • Create New...