Streaming live at 10am (PST)

Tab effect doesnt work


#1

Hi Webflow,

I am working on recreating this newssection on my site.

I used different things to create it, columns, link blocks and tabs. For now tabs work the best, but still it's not working the way it should.

The effect I am trying to create I got from this site: www.nos.nl

A screenshot of this effect:

I got as far as getting one of the image boxes to move 80% up, which I am guestimating from the site. But it's not working properly. Right now I am just the style editor, playing with states.

Should I be making an interaction instead?

my shared link: https://preview.webflow.com/preview/officialaimanhassani?preview=5b80c677c1c343962b94227f6ab53824
and screengrab of where I am trying to make it:

Best,

Aimanisms


#2

Anyone? @sabanna @cyberdave @thewonglv @PixelGeek


#3

It is possible to do with tabs like you start to do, it will work, but there will be no smooth width changing. If you want to have shifting effect you will have to use interactions


#4

so @sabanna with interactions it is possible?


#5

I will have to try some workaround. Just a little bit later today. Hope you can wait for a bit.


#6

Ofcourse I can wait, thanks @sabanna!


#7

i actually don't understand the question.

Unsure what the connection is between the two images you provided above.


#8

@Revolution, if you will go to that site www.nos.nl , and click on one of pictures, you will see effect: they are shifting and change width. It is what @Aimanisms want to recreate in Webflow


#9

oic :smile:

there seems to be a strange issue with the interactions.

will have to play with it some more

EDIT: Try this

http://rev-test.webflow.io/

https://preview.webflow.com/preview/rev-test?preview=af302b980fd55511117a4395f91f5047


#10

And here is option with using tabs:
http://sapdesign-sandbox.webflow.io/shifting-tabs

https://preview.webflow.com/preview/sapdesign-sandbox?preview=485541288f79c6ab0e1f05628af56cb7
(page "shifting tabs")


#11

none of your links work?


#12

Hey @sabanna I tried your solution, but it doesn't look the same as yours? am I missing something.


#13

Hey @Aimanisms

Tab interaction has issues in preview mode, but works fine on published site. Try to check on published page


#14

Ah ok @sabanna , I checked in published page, it's smoother, but the size difference is still weird?


#15

Do you mean height? Then it is because of settings in absolute positioning for Tab2, you nave 8px gap on top and bottom. I thought it done for purpose


#16

@sabanna I am sorry, yes I mean height. It's set on auto, so I didn't choose this height. I am afraid that if I define height now, it will mess up on different devices, you understand what I mean?


#17

Here is the reason of height difference. Set this to "0px" and everything will be equal.


#18

ah that is strange, I don't remember myself putting any info in there @sabanna. Great I will fix it.


#19

Happens :wink: Could be from some other tries.


#20

THANKS! it's fixed. yay, thanks for everything. You are awesome!