Hello everyone! I am new to Bootstrap Studio, so I need your kind help.
My idea is to make as landing just my logo image, and as users scroll down, this logo gets bigger and bigger, revealing the whole website content from the inside of its shape.
I am using a .svg file (called “logo.svg”) with transparency for this logo.
As I could not find a tutorial online, could you please help me?
Thanks in advance!
Is this effect something you’ve seen on another website? If so, post the link, because I cannot envision what you are trying to do from your description. It would also help to see your logo.
Hello and thanks for your prompt answer!
Unfortunately I couldn’t find any examples, the only one that comes close is the following, taken from a webflow template:
https://iphone-web-desire.webflow.io/
Just replace the iPhone frame with the logo and remove the “tilt”, keeping only the zoom.
As you can see, the inside of the smartphone (its display) is the actual website.
This is a fairly common animation in motion graphics.
As for the logo, my website is www.justf.it and you can see it there. However, I think any minimal logo can be used (Apple’s for example).
I hope it helps you to imagine my idea better!
Thanks again
I must admit I thought you meant something like the following link, but I’m not familiar enough with Pinegrow interactions or BSS animations to tell you if or how this can be done with BSS.
Hi! Thank you - this is exactly the effect I am looking for! I hope this might be helpful also to @printninja to better understand if it’s possible on Bootstrap Studio
If you want to learn GSAP start here
As @kuligaposten pointed out, this sort of effect was done using the GSAP animation library. The example in @Cary’s post was done using Pinegrow’s Interactions (an optional feature you can purchase with Pinegrow) which uses GSAP.
There’s nothing integral with the Bootstrap Studio software that can do an effect like this. You would need to use a third-party animation tool like GSAP, or custom code the JavaScript and CSS yourself.
It looks very interesting, thanks!
What I did was to import the Pinegrow project into Bootstrap Studio and use Pinegrow’s JS from their GitHub. It is a good start I think, now I have to tweak it to suit my needs. I’ll send updates as soon as I manage to finish my website - I saw there’s a showcase tag on the forum!
In the meantime, thanks a lot!
Example here for you if it helps:
It would need tweeking to be fully responsive
It looks like the best example for my case - as the logos are usually square/circular in shape.
Is there any source code or tutorial for this? Thanks in advance!
HTML:
<header class="hero">
<img class="mask" src="shutter.svg" />
</header>
<section>
The rest of your page here...
</section>
CSS:
.hero {
background: #000 url("_your_background_image.webp") no-repeat 50% 50%;
background-size: cover;
display: flex;
height: 100svh;
overflow: hidden;
z-index: 1;
}
.mask {
height: 100svh;
left: 0;
position: fixed;
top: 0;
width: 100%;
pointer-events: none;
object-fit: cover;
}
/*quick hack for responsive*/
@media (width < 576px) {
.mask {
object-fit: contain;
transform: scale(1.6);
}
}
JS:
Link two external js file:
https://unpkg.co/gsap@3/dist/gsap.min.js
https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js
then add the following to your javascript file:
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.defaults({
toggleActions: "restart pause resume pause",
});
const mask = document.querySelector(".mask");
const zoom = gsap.timeline({
scrollTrigger: {
trigger: ".hero",
scrub: 1,
pin: true,
},
});
zoom.to(".mask", {
opacity: 0,
scale: "5",
ease: "expo.out",
});
Make sure you have your js include order as:
Thanks, I’ll probably try it in a few hours!
Did you code this project?
No, the external files are just links to the gsap library cdn:
This one might be better to see the different plugins:
What can I say… it’s perfect 
Exactly what I was looking for… thank you! I will send updates as soon as the site is finished!
Btw, what I meant before was asking you if you made that website example and those codes
@JustF The styling is just basic css, the JavaScript is just modified using examples in the gsap documentation.
The ‘body’ is just the bss article card component
Thank you very much!