Love this 👏👏👏👏 can I please ask a question? As you scroll could you add in a fade ? Like so it looks like the one that is scaling down in size could also fade to 100% transparency?
Hi Andrea, sorry for my lack of knowledge, but I am struggling to understand this GSAP thing. :) Is it a plugin? Can I create the stacking containers using only the code you have provided? Thanks in advance!
If instead of images I want to use something like the past video, like text on the right + image on the left do I have to add another container for that content and make that container's class pinned, scroll, etc?
thank you for the tutorial 🌹 When I access the website from the phone, I find that there is extra side space. What is the solution to remove these extra side margins while browsing the website from the phone?
You are very welcome! 🙏 are you talking about your website or in general? The extra side space might be overflow. To remove it, you can set overflow hidden on the parent container.
Love this effect! But the stacked effect doesn't work on mobile, what can I do to let it work correctly ? There is not any effect at all on the mobile responsive.
Hello Andrea, i change the cards css code in order to ajust to tablet, mobile devices and avoid overflow on all device but having insures. Do you have any idea ? .card.scroll { position: relative; overflow: hidden; } .img { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 100%; height: auto; max-width: 100%; max-height: 100%; transition: 0s; } /* Styles for tablets and up */ @media (min-width: 768px) { .img { } } /* Styles for desktops and larger screens */ @media (min-width: 1024px) { .img { } }
I wish there was more time to explain the code but I’m afraid most of the time I barely have capacity to film and edit these videos. Anyways, what you can do is copy & paste the code in chatgpt and ask it to explain line by line. It’s very useful. I wish I had chatgpt when I started learning 2y ago 😉 take advantage of the ‘new world’
Hi Andrea. I want a help. I want to showcase a 360 degree product animation on scroll on my website. I have images rendered in software already. And also it provided html code. But i don’t know what to do with it coz i am a mechanical engineer😅. If you wanted i can provide the file generated by software itself. I can provide you the manual link uploaded on the software website too.
@@andreaegli Thanks for the tutorial, good content. But there is a wish for the future: don't forget about mobile adaptation. Currently, there are more visitors from phones than from computers.
Your Tutorials are the best of the whole Internet :) 🎉
not sure about that but thank you ☺️
Love this 👏👏👏👏 can I please ask a question? As you scroll could you add in a fade ? Like so it looks like the one that is scaling down in size could also fade to 100% transparency?
Awesome Tutorials...!! Thankyou so much for this Amazing Content.
😎 you are very welcome!
Amazing as always @Egli 🔥🔥🔥 The approach to stacking paired with GSAP really adds a flare!
Thank you 😊
Hi Andrea, sorry for my lack of knowledge, but I am struggling to understand this GSAP thing. :) Is it a plugin? Can I create the stacking containers using only the code you have provided? Thanks in advance!
Merci :) j'apprends beaucoup grâce à votre contenu ❤
You are very welcome and thank you for watching my content 🤓
Great video! How would it look in mobile? I feel that will not be as good and not user friendly in mobile phone
Cool! Thanks for the tutorial!
🤩 thank you for watching!!
If instead of images I want to use something like the past video, like text on the right + image on the left do I have to add another container for that content and make that container's class pinned, scroll, etc?
Luv this style! 🎉
😎
Hello. You have very good tutorials. Where can we find the fonts mentioned in the video?
Great one!
One question: Will it work on mobile?
Thank you 😊 yup!
nice! thank you for your content! love it
Thank you and you are very welcome 🙏
thank you for the tutorial 🌹
When I access the website from the phone, I find that there is extra side space. What is the solution to remove these extra side margins while browsing the website from the phone?
You are very welcome! 🙏 are you talking about your website or in general? The extra side space might be overflow. To remove it, you can set overflow hidden on the parent container.
@@andreaegli yes exactly thats i'm talking about thank you
Love this effect! But the stacked effect doesn't work on mobile, what can I do to let it work correctly ? There is not any effect at all on the mobile responsive.
Thanks! It works, at least on my mobile. what browser have you used?
Thanks @andrea . but on phone its not looking nice. Can you guide me how to handle the height of containers for small screens
Hello Andrea, i change the cards css code in order to ajust to tablet, mobile devices and avoid overflow on all device but having insures. Do you have any idea ?
.card.scroll {
position: relative;
overflow: hidden;
}
.img {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
transition: 0s;
}
/* Styles for tablets and up */
@media (min-width: 768px) {
.img {
}
}
/* Styles for desktops and larger screens */
@media (min-width: 1024px) {
.img {
}
}
What issues do you have?
@@andreaegli in the mobile version it continues to have overflow.
@@uiuex set overflow hidden on the parent container
do you have tutorial on how to setup a SMTP for your client? so the form from the web can work?
Hey! Nope, no such videos on my channel
Love you ❤.this effect
Obrigado pela aula, professora gata.🌹🌹🌹
Love it
Very Great❤❤
Mam i easily learn of the wordpress tools but i can't pickup of your Custom Css Code. Please guide me about this.
I wish there was more time to explain the code but I’m afraid most of the time I barely have capacity to film and edit these videos. Anyways, what you can do is copy & paste the code in chatgpt and ask it to explain line by line. It’s very useful. I wish I had chatgpt when I started learning 2y ago 😉 take advantage of the ‘new world’
i want to learn this coding
i love you
Super TOP
💙
you should check your hostinger referral link in the video description.... ;)
what's wrong with it?
@@andreaegli the link does not contain the referrer id
Hi Andrea. I want a help. I want to showcase a 360 degree product animation on scroll on my website. I have images rendered in software already. And also it provided html code. But i don’t know what to do with it coz i am a mechanical engineer😅. If you wanted i can provide the file generated by software itself. I can provide you the manual link uploaded on the software website too.
is this mobile responsive
Yes, you will need to make some adjustments tho natively in elementor
@@andreaegli it would be good if you can make a video on mobile responsive version and also about mobile responsive content part too
@@AdityaSingh-ni7vn nope, not enough for a video. it's easy to do as I said earlier
where is the html code?
One day I will marry you❤
The effect is beautiful, but unfortunately does not work in the mobile version. Could you fix it and write a solution in the comments.
It works on mobile, you just need to make some adjustments
@@andreaegli adjustments like what
@@AdityaSingh-ni7vn resize the containers, images, the usual stuff. nothing related to code, hence me saying that it can be done natively in elementor
@@andreaegli Thanks for the tutorial, good content. But there is a wish for the future: don't forget about mobile adaptation. Currently, there are more visitors from phones than from computers.
I loved this one Andrea!