Hi all, please can someone help me solve this wipe transition?
https://wipe-transition.webflow.io/
- panel moves right.
- panel moves left to reveal image-a.
- image-b-mask moves right to reveal image-b.
The issue is with step 3. If you watch closely, you will see that image-b moves in from the left. This should not happen. For the concept to work, image-b should be absolute positioned over the top of photo A at all times.
Any ideas what I’m doing wrong?
Thank you.
I was wondering if you can help me figure out step three of this animation?
Here is my public share link: https://preview.webflow.com/preview/wipe-transition?utm_medium=preview_link&utm_source=designer&utm_content=wipe-transition&preview=2fac535d73002786a164e7b6175b7c86&mode=preview
Hey @davidjayukay, just change the width from 100% to 100vw for Image B.
If its 100% it’ll shrink according when it’s container shrinks. 100vw ensures that its always full-width and center.
I’ve since come up against two further issues using this method. The layout that I want to produce is here on the CMS collection template: https://wipe-transition.webflow.io/item/a-title
1.) I made image-b-small 50vw instead of 100vw. When I add left and right padding to hero, panel no longer wipes all the way across the image. FIXED By reducing the width of the panel to 41.667vw, however what about if I wanted a max width of 80%?
2.) I’ve used Grid for the layout as I wanted the text overlapping the image. Would you recommend this method or is there a less rigid way?
3.) Once the image-a is pulled from a collection it no longer displays on the front end.
If @dennyhartanto or anyone else can help me out, it really would be appreciated. 
Thanks,
David
Hey @davidjayukay, if you havent figured it out here are the steps I took to fix:
- Set the hero-image-container to Flex. Remove the Padding-top: 75%.
- Set the image-b to: Although this breaks the animation, ideally the width = the width of the container. Either you decide on a fixed pixel width or use custom to to match it.
- Both Image a & image b. Remove the static .jpg. Add an empty background with these settings:
Let me know if this works for you!
Thanks @dennyhartanto
1.)I’ve implemented those changes. That worked! Makes complete sense, sometimes you just need a fresh pair of eyes!
2.) Not quite clear on this point. If I set image image-b to a fixed with it no longer displays on in the animation:
I just did this:
- Divided the VW by 12 (8.333vw per column)
- set the container to 83.333vw (10 columns)
- set image-b to 41.665vw (5 columns)
Your setup is correct so far, I missed this part however. Set the image-b-mask to overflow: hidden
You did this correctly as well!
Amazing! thank you. I created a collection list on the home page to test this out with more than one collection item and noticed that the height of image-b extends to fill the space that the blog title takes up.
https://wipe-transition.webflow.io/
I fixed this by doing the following. Was there a better way?
set a fixed height on image-a:
set 480px height on the image-b-small:
set 480px height on the panel interaction:
Hey David, what do you mean by this, can you share a screenshot?
1 Like
Sorry, I’ve just removed the 480px height on the interaction so that you can see what I meant. https://wipe-transition.webflow.io/
Is the only way to fix the height of all images to set the height of panelin the interactions. May be it is?
Sorry @davidjayukay, I still don’t see the issue you’re talking about because everything looks the same as before. It’s best if you can screenshot the problem.
Sorry, It seems to be working on the front end, just looks bad in Designer.
It’s all good, I’ve taken up enough of your time.
No worries @davidjayukay. Everything just looks fine on my side haha.
1 Like
Final question on this…
I want to create an alternating layout (see wireframe)
Screenshot 2020-05-15 at 13.10.33|549x500
Reason I chose grid was to help with the text overlap.
I tried converting article-card to Flex so that I could use reverse for the alternating layout but that’s screwed everything up.
Can you suggest how I can convert this to Flex?
Hey @davidjayukay, Im off from my desk will check it out later.
Should be possible to create it with flex and still have it overlap, though.
That’s great. would you be available for a few hours work later?
There are a few other things and CSS is not my strong point.
Are you on Upwork?
