Streaming live at 10am (PST)

Size interaction - SVG not scaling from center


#1

Hi Guys, I’m using a size scrolling interaction on an SVG, but the SVG isn’t scaling from the center even though the transform origin of the DIV holding it is centered.

The project is here:
https://preview.webflow.com/preview/get-set?preview=160d9a5c1dbe4abb3b270a62c8246050

Interaction is on Intro Section Details and SVG is in Section BGs > Intro

Thanks for any help. A bit stuck.


#2

If you manually do to ‘intro’ what your interaction does, the image won’t either zoom from its center. What happens is ‘intro’ gets bigger, and overflows to the right. It’s just how HTML works, default alignment is to the left.

Setting the Transform center of the image won’t help because you’re not applying a Transform on it, neither to the Intro element.

If you use Scale instead of dimensions (Scale is a Transform), you’ll get closer to the effect you want.

However, by scaling either the ‘intro’ element or the image element, you end up with a pixellated image even if it’s a SVG. Because Transform Scale is only a scale of what’s already rendered. The SVG don’t get re-rendered the more it gets bigger.

To get the effect you’re probably after (zoom on a vector image who never gets pixellated), I guess, you’d need to set the image as a bg of a div, and make the interaction change the size of that div. That div would have to be centered in its container, also be position:absolute to be able to grow past its container boundaries.


#3

To be clear about the modificators you get to use in IX2:

CSS Transform functions are only the one in red.
Everything in green is CSS property that’s not a Transform

Transform vs. CSS property is important to understand

When a CSS property such as size or show (display) changes, the flow of elements, on the whole page, is affected. If a 1000px height element suddenly changes to 100px height, the rest of the page goes up to fill the space left. HTML hates void.

But when a Transform function is applied to an element, the flow doesn’t change a pixel. HTML just doesn’t know that a change has been made, don’t see void, don’t change anything below or over. If a 1000px height element is changed with Transform Scale to a 100px height element (using 0,1 value for scale on Y), the est of the page don’t change, there’s a gap of 900px on the page, around, over or under the element depending on its center settings. (here we go with the center).

Transform is cool to animate objects because they won’t make a mess with the page when changing shape and position. But using CSS properties that change shape is also extremely powerful because it has an effect on the flow of elements in the page. (think when you fold and unfold a div on a page, and if you want the rest of the content of the page to go along the animation).

(Just FYI BG color, Border color and Text colors are the new actions of IX2)


#4

Thanks for the detailed help here Vincent!

I actually tried Scale initially, but was having the pixellation issue you describe. I’ve now made the SVG the background of the DIV as you suggested and it scales correctly, but it still pixellates. :thinking:


#5

If you use Scale, it will always pixellate as it’s a transform. Use Size.


#6

Even using Size though and setting it up as per…

“To get the effect you’re probably after (zoom on a vector image who never gets pixellated), I guess, you’d need to set the image as a bg of a div, and make the interaction change the size of that div. That div would have to be centered in its container, also be position:absolute to be able to grow past its container boundaries.”

…the background image is aligned to the left.

Sorry Vincent, maybe I’m not understanding. Feels like I’m going around in circles.


#7

Is there anyone out there who can help solve this?


#8

@Nic … did you get your issue solved?


#9

Hi Gary, thanks for asking. Not yet. As above, I either can’t scale the SVG from the center or it is pixellated. Hope you’re able to help or let me know if I’m doing something wrong still. Thanks bud.


#10

Hmm that’s strange… exactly which element are you resizing in read only site? I’ll go check it out with ya.


#11

Thanks Gary, appreciate it. It’s the Intro div. There is a SVG set as a background on that div that is being scaled through a scrolling interaction.


#12

@Nic… man, I’m not seeing the pixelation, it’s looks great for me! The hills are actually crisp when the animation goes down-right on scroll. Which exact part is not scaling correctly?


#13

You’re right Gary, but I can’t get the SVG to scale to the center, which is critical for the design.


#14

Ohhh I see, you want it to enlarge in the middle? So that it does what… get really big as it’s coming towards you on scroll?


#15

Ya, thats exactly the effect I want, but I either get it zooming into the top left or a pixellated image.


#16

I see! You will need a move tied into the same interaction. Then add a X, Y and Z axis move. What’s your email I send you the video.

Just sent it :slight_smile:


#17

Thanks Gary, my email is nic@propdata.net.


#18

Just FYI, in using this type of effect, you’ll need to adjust the vector beforehand. I use Affinity, Inkscape, DrawPlus… there are numerous programs. But you need make the svg, save it in the max zoomed size you want to scale up to, then save it.

I would actually load it in at that large size (if Designer will take it), then set initial appearance to scale it down. Then on zoom, it will remove the pixellated resolution.


#19

I’ll try the x y z moves as per your video in the morning (late here). Thanks for the help Gary. I’ll let you know how I get on.

P.S - The SVG is already massive for the reason you mentioned…

image


#20

Just tried it, and it works. I’ll have to have different interactions for different screen sizes.