Hi,does anyone know how i could do this in bubble? ( follow the link below) scroll down the site and notice how the two big images , one at the header region and the other image in the middle of the page does while one scrolls down the page or up the page.
One seems to be getting to see more of the image and less of it depending if one is scrolling up or down, i would really love to know how to achieve that with Bubble.
Here is the link
If you do an inspect element with Chrome on the image and watch the page source for changes as you scroll, you will see that there is very little actually changes, the page top margin changes. The image itself it only two size large and small.
You might be able to achieve this with transitions and/or conditions when the page scrolls.
I might have a play later/dig deeper…but things to do at the moment!
Okay, interesting, let me try with transitions and/or conditions and also dig a little deeper.Thanx!
I have done this ‘the clunky way’, where the image changes instantly to the small one using a condition on the larger image to hide when current page scrolling position reaches a certain point., would much rather have a smooth transition though. To have the header shrink like they do, put the images in groups and check off the ‘collapse height when hidden’.
Then put the show and hiding on the group, not the image itself.
I assume that in the workflows you could have a condition that when page scrolling position is greater than 100, animate the large image (to disappear) and then animate the small image to appear.
Play with the animations to see if you can make it seem like the picture is moving and shrinking, when really you are animating two images
This topic was automatically closed after 70 days. New replies are no longer allowed.
