tjefe Posted November 18, 2021 Share Posted November 18, 2021 Some great people have helped me get this animation going and really appreciate there help. My question now is how do you all account for so many different screen sizes? This animation will be desktop only but that can be from retina down to 768 and we want the same view shown on every size. See the Pen zYdRqmy by travisboss (@travisboss) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted November 18, 2021 Solution Share Posted November 18, 2021 Well that's mega simple if you're using SVG - that is 'scalable vector graphics' after all. ✨ What you're looking for is a viewBox value to make it scalable, And then preserveAspectRatio to control *how* it crops on small screens. I've added a viewBox on your SVG, put correct width and height attributes on your image and changed preserveAspectRatio to specify that it crops to the center (like background-size: cover) both on the SVG and the image. See the Pen YzxBOWY by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Cassie Posted November 18, 2021 Share Posted November 18, 2021 If you want 'background-size:contain' you'll need to use preserveAspectRatio="xMidYMid meet" instead. The viewbox values may need tweaking to get the exact ratio you're after. But this should get you on the right track. 3 Link to comment Share on other sites More sharing options...
tjefe Posted November 18, 2021 Author Share Posted November 18, 2021 3 hours ago, Cassie said: If you want 'background-size:contain' you'll need to use preserveAspectRatio="xMidYMid meet" instead. The viewbox values may need tweaking to get the exact ratio you're after. But this should get you on the right track. Thanks again Cassie! One other question I noticed `transformOrigin` does not seem to be supported in safari, been trying to google fu on this but coming up empty handed, do you have any tips to combat the apple? This animation is desktop only so I do not need to worry about any phones here. Link to comment Share on other sites More sharing options...
Cassie Posted November 18, 2021 Share Posted November 18, 2021 Doesn't sound right to me. Check this demo out - Is this working consistently for you? See the Pen 17b4f47aa28f02e305dab386e9f79e89 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
tjefe Posted November 18, 2021 Author Share Posted November 18, 2021 2 minutes ago, Cassie said: Doesn't sound right to me. Check this demo out - Is this working consistently for you? Interesting, that does work on safari just fine, I have not altered beyond what you have given and the scss that is offered and html that is shown in that codepen but all I get on safari is just Milliken and the image behind it, it draws Milliken but no zoom. 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