Elementor - Shrink the Logo/Image on Scroll but not using Scrolling Effects

[@philippeburki9618]

Hi - thanks for the tutorial. Since I saw that you made tutorials for Bricks Builder as well... would you have the code for Bricks as well?
Thanks

[@chibbledorf]

Another great and timely tip Imran. Hip hip hussar.

[@websquadron]

Big thanks

[@Dammysworld1]

I needed to make my image bigger instead of smaller, so I used the Css code in a reverse order for the numbers. but my image is moving sideways(horizontally) instead of vertically. I'm not sure what I must have done wrong

[@websquadron]

Might be due to the placement of the image?

[@sibercon]

Works for desktop, but on mobile (

[@websquadron]

It should work after adding @media codes

[@andretoldobr]

@@websquadron this @media codes isn't working for me as well. The logo size behaviors are the same to all screen sizes =(

[@Denis-xn7hi]

Thanks so much Imran!

[@websquadron]

Had to get it out there :)

[@lynesghalib6596]

The reason why it snaps back to without transition effect is because you set the transition to only occur when scrolling also why not use scale instead of width and min-width it just more code and slower performance i'd recommend you go with something like this:
logoimage {
transform: scale(1);
transition: transform 0.5s ease-in-out;
}
.elementor-sticky--effects .logoimage {
transform: scale(0.8);
}

[@websquadron]

Cheers. For the sticky header, the transition doesn't work well with the scroll. But I'll be trying out your code. The downside is that your code is missing the exact pixel sizes from start to finish.

[@lynesghalib6596]

@@websquadron You can set up the exact size from the widget settings let’s say you give it a size of 80px you can scale it down to the 40px by using transform scale(0.5) that’ll shrink it down to half it’s size since 80 * 0.5 = 40. Cheers to you mate

[@deNysWebDesign]

what if your header (logo is in with the menu) is a theme header? is it possible to achieve this? im using the blocksy theme - maybe with an html element?. Thanks!

[@websquadron]

Then you'll need some custom code to crack it.

[@deNysWebDesign]

@@websquadron thank you for the fast reply! do you have any idea where i could start? as in what file id be editing or if i can do it with css and html widget .. new to all this, just like me to go from hmm im going to dabble to 'how do i reinvent the wheel':D

[@websquadron]

@@deNysWebDesign I'd have to play around with code but I only offer that as part of 1-2-1 Consultation and there's charges for time spent.

[@deNysWebDesign]

@@websquadron i understand :-) ill keep at it, thank you nonetheless.

[@bejros5301]

It doesn't work for ordinary image on landing page ... Why ?

[@bejros5301]

Correction, it does work but it's not so fluent as in the video. The size just changes from big to small.

[@websquadron]

Have you tried adding any Transition effects?

[@bejros5301]

@@websquadron No, I haven't. Do you have any videos about this topic ?

[@antoniomaria2012]

Hi! Can You update this tutorial for containers? :)

[@websquadron]

When I can -:)

[@antoniomaria2012]

@@websquadron of course :)

[@AhamsOwO]

You totally forgot to say that people need elementor pro, I want a free alternative to this, since I am not using elementor pro...

[@websquadron]

True but did you notice the Cover Art?
I'll keep that in mind next time.

[@bejros5301]

You can crack elementor pro pretty easily just search on yt

[@phkoon]

prO eLemENts, bro