Question

Zoom in Effect


Badge

Hi, I found this great website on the list of Elementor’s best websites (https://modernaweb.net/) If you scroll down there is a portion where you zoom into the word “design” and then another panel appears. Can anyone lend some guidance on how to do this zoom effect?


14 replies

Userlevel 6
Badge +1

Love it! Working on it.

It’s all to do with scrolling effects and scaling, for the most part.

Userlevel 3
Badge +3

That's actually pretty cool. Especially the crossfade at the end. But this is not possible with the standards of emt pro. This is a Parallax Effect. You've to scroll through the third party addons to find something like that.

Badge +1

Hi @zspollard, have you tried applying scrolling effect? The website seems use it

Badge

I’m in contact with the developer and he said “it is JS and uses GSAP library.
d-sgn section is SVG JS, and since GSAP is not allowing in Elementor (licensing) so it's not possible to use that code on Elementor.” I have the code but I’m not experienced in any coding so it doesn’t make sense to me. Maybe someone here could offer some advice. @sunawang Yes, I have tried scaling effect on scroll with the value increased to 200 but it doesn’t really work the same way. @meisterleise I have a few third party addons I can work with. What do you mean by using the Parallax effect? How would you increase the scale of the object with parallax?

Thank you for all the suggestions.

Userlevel 3
Badge +3

@zspollard sorry, it’s not really a “Parallax Effect” it’s more what you did allready: scale on scroll.

The GSAP is implemented to elementor by Oooh Boi Steroids for Elementor, dunno if this helps.

 

Badge

@meisterleise Thank you the recommendation on Steroids! It’s a gamechanger.

Userlevel 6
Badge +3

Hi, I found this great website on the list of Elementor’s best websites (https://modernaweb.net/) If you scroll down there is a portion where you zoom into the word “design” and then another panel appears. Can anyone lend some guidance on how to do this zoom effect?

this is very simple its just scale properites being applied as the text comes to view port, this if you know or good in css custom you canmake it easily…!!

Userlevel 6
Badge +3

If you need more help like, how to implement this properites I surely can help you, If you want to learn how to do it, that will be a great session !!

Userlevel 6
Badge +3

Hi @zspollard, have you tried applying scrolling effect? The website seems use it

I’m in contact with the developer and he said “it is JS and uses GSAP library.
d-sgn section is SVG JS, and since GSAP is not allowing in Elementor (licensing) so it's not possible to use that code on Elementor.” I have the code but I’m not experienced in any coding so it doesn’t make sense to me. Maybe someone here could offer some advice. @sunawang Yes, I have tried scaling effect on scroll with the value increased to 200 but it doesn’t really work the same way. @meisterleise I have a few third party addons I can work with. What do you mean by using the Parallax effect? How would you increase the scale of the object with parallax?

Thank you for all the suggestions.

you don’t require it.

Userlevel 6
Badge +3

@zspollardsorry, it’s not really a “Parallax Effect” it’s more what you did allready: scale on scroll.

The GSAP is implemented to elementor by Oooh Boi Steroids for Elementor, dunno if this helps.

 

no its just trasform that you need to add as elements comes in viewport

 

Userlevel 7
Badge +4

@Zakk Pollard did you find your answer here? If so, please consider clicking “Best answer” to help out others. If you found it elsewhere, please share it here so we can mark your answer as the best one, thanks :)

Badge

If you need more help like, how to implement this properites I surely can help you, If you want to learn how to do it, that will be a great session !!

I’m new to custom css, so I haven’t had much success implementing it. I would love some help with this if you don’t mind.

Badge

@James Eddi I would love some help if possible. Thanks

Userlevel 6
Badge +3

I will create one for you where you can see how its working

Reply