Visual Transitions

Guides & Help Docs
1

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

<style>
    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);
    }

</style>

<script>
window.addEventListener('load', function() {

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                } else {
                    entry.target.classList.remove('visible');
                }
            });
        });

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

});
</script>
4 Likes
2

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

1 Like
3

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

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

2 Likes
4

Awesome!

5

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

6

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

7

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

8

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;
}

10

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