Visual Transitions

Use this code to add a visual transition effect to your softr landing page. Add to Code Inside Footer.

    section {
        opacity: 0;
        transform: perspective(1000px) translateX(0px) translateY(30px) scale(1) rotate(0deg) rotateX(10deg) rotateY(0deg) translateZ(0px);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

    section.visible {
        opacity: 1;
        transform: perspective(1000px) translateX(0px) translateY(0px) scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px);


window.addEventListener('load', function() {

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                } else {

        const sections = document.querySelectorAll('section');
        sections.forEach(section => observer.observe(section));


@cooper This is amazing :star_struck: thanks a lot for sharing :clap:

1 Like

You are welcome! It’s live on my softr app,

PS to target a class instead of section tag, replace section in the code with .class-name



Wow, cool! I added it to my site. Thanks so much for sharing!

Thank you so much for sharing! However I noticed after adding its bogged down my loading time. Does anyone else have this issue?

is there a way I can apply this to a page but exclude the very first block? this may help my loading issue perhaps?

You can exclude the first section by adding this to the style; hero2 is the section id, update if different.

#hero2 section {
opacity: 1;
transform: none;
transition: none;

Really cool @cooper !! Thanks for sharing :raised_hands:t2: