Jump to content
Search Community

Accounting for many different viewports?

tjefe test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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

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

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...