Streaming live at 10am (PST)

Size Interaction repositioning at end

Can anybody see what is causing the position shift at the end of this interaction?

The animated swirl is a background image (uses cover size) for an element with a Size interaction on it. It goes from width:0 to width:auto over 2 seconds. Basically I am happy with it apart fro the adjustment in position at the end. I can’t work out why though I suspect it has something to do with the background size attribute being ‘cover’.

bg-img-atttributes

The project is using the new upper desktop breakpoints and I’ve noticed that it works fine when the browser is between 1440 & 1600 pixels wide. It has the end adjustment in the largest breakpoint and it doesn’t play at all in the default desktop breakpoint of 992 - 1439 wide. I have only turned off the interactions for phone landscape and portrait; changing that doesn’t appear to have any effect.

Here’s the published page https://brand-counsel-testing-site.webflow.io/nomey-animated-swirl-test

Any help figuring it out will be greatly appreciated.
Grant


Here is my site Read-Only: https://preview.webflow.com/preview/brand-counsel-testing-site?utm_medium=preview_link&utm_source=designer&utm_content=brand-counsel-testing-site&preview=1164d06fa9ce2e9a95e9fafe8e3e4ae1&pageId=5f039cccb290a561ccbf06cf&mode=preview

1 Like

Hey there!

You set the page load interaction to desktop and tablet breakpoints only!

Go to the interactions panel and open the interaction, at the bottom you can filter on which breakpoints the animation will play:

Thanks for looking at this, I appreciate it, but it’s not those breakpoints I was concerned about. If you resize the browser to somewhere between 992 and 1439 the animation doesn’t play.

However, I have since done a fresh test in a new project and the animations do work in all breakpoints so I’m not too concerned with that. The real issue is the resizing/settling of the animation at the end in the 1650’ish wide upwards screen sizes.

Grant