BennyTuner Posted March 24, 2021 Share Posted March 24, 2021 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 More sharing options...
Solution Shrug ¯\_(ツ)_/¯ Posted March 24, 2021 Solution Share Posted March 24, 2021 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. 2 Link to comment Share on other sites More sharing options...
BennyTuner Posted March 24, 2021 Author Share Posted March 24, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now