Positioning Bug on mobile

Design help Animations & Interactions
1

Hello,
I have been working on interactions and I finally got my hero section working right. I even got it to look right on mobile…for a second. It was looking good then one time when I refreshed the positioning of one object went way off. When I view it in a browser it looks fine. When I change my browser to a mobile size it looks fine. When I preview in the designer it looks fine. When I view it on my phone its all jacked up.

The white box with the arrow is supposed to sit overtop of the bottom corner of the bigger box, but no on mobile it is pushed down about 50 pixels or more.

Here is the read-only link: https://preview.webflow.com/preview/volca?preview=6df08c8fe68f99f8a027a3b97d46bac0

Here is a snapshot of it at the mobile size in a browser(desktop) and a snapshot of how it looks like on my phone:

io-2017-10-30-13-34-11-703
io-2017-10-30-13-34-11-703584×910 21.1 KB

on the phone:

Image-1
Image-1750×1334 56.3 KB

Can someone please help me figure this out?

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

This is not a bug but Parallax

This is not a iphone view bug. Also on Webflow editor (view mode) you can find this style (you see the parralax movment only on preview mode “eye”)

image
image562×792 34.7 KB

Why?

All the idea of parallax is to move items. If you dont want this move - remove/change this effect from image-3. For now in 0% you move the image 100px bottom (And you add this effect only on mobile)

image
image1380×942 58.8 KB

1 Like
3

@Siton_Systems- Thanks for the suggestion but I turned off the parallax effect for the mobile breakpoints.

20 PM
20 PM482×1244 59.6 KB

I thought that was the purpose of adding the function of being able to turn off interaction on various viewports. The problem with your solution is that when you change the position on mobile like you have highlighted, it also affects the position on the other viewports.

5

@Siton_Systems

Thanks for trying to help me, I guess I am just not understanding.:confused:

6

When you publish the page - translateY(-500px) added by JS (why - beacuse this is what you set by the UI)

<img src="https://daks2k3a4ib2z.cloudfront.net/59f628fffccfea0001f73f20/59f628fffccfea0001f73f2b_box%20arrow%2002.png" data-w-id="ceb6e72b-57a1-fba0-770d-a1d7c46c6772" class="image-3" style="will-change: transform; transform: translateX(0px) translateY(-500px) translateZ(0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg);">

The trick is like any other animation - you have start & end point (how to set start/end see the tuturial).

If you want to remove the arrow from the interacion:

  • select hero → interaction → while scrolling in view → right-click & remove the image3(arrow) - or Change parameter:
    image
    image684×693 44.2 KB
7

Hey,
No, I get how parallax works, and it works great except I just wanted to turn it off only one that particular image and only on the mobile breakpoint but still have it positioned to the DIV that it’s anchored to. If I turn off the interactions on mobile, it still applies the interaction positioning. If I remove the positioning on mobile, it removes it as well on all the other breakpoints. You are right it is not a bug, but it seems that another workaround is needed or simply keep the interaction turned on mobile.

Thanks again!

8

I dont know if you can do this (Turn off only one element from X elements in the same animation group in some breakpoint). Use seperate animation for the arrow if you really wants this idea.

1 Like
9

Yeah, I was thinking of having two arrows, one has the interaction and the other does not. The arrow without the interaction is hidden on the breakpoints that use the interactions and then shown on the breakpoints in which the interactions are turned off.

Thanks again- and sorry for the confusion. I listed it as a bug because at one point I had it positioned correctly on mobile, but I must have still had the interactions turned on.

10

One month from now when you learn this feature - the sky is the limit :slight_smile: You dont need two arrows but two animations (one for image-2,5,6 and one for the arrow). You trying to make very simple animation.

See this example:

By the way - i think really thier is a bug with “trigger at” (The starting point always set to true). So if you set false - on mobile - you dont get animation but still you get translateY

11

Isn’t that what I was saying all along? If I set the “trigger at” to false at mobile, it still moves the arrow down but removes the movement. This is what is causing the arrow to be positioned wrong on mobile.

I don’t know- I’ll play around with it more tomorrow. :slight_smile:

1 Like
12

hhh OK. But in your case you can solve this in other ways. Add this in seperate issue as bug “when i set trigger at to X happens Y” (Maybe this is not a bug - you dont have any docs yet about this buttons).

1 Like
13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.