Logo animation scroll effect

Mark M

Mark M

Mark M

Soldato
Joined
6 Jan 2006
Posts
3,395
Location
Newcastle upon Tyne
Could someone point me in the right direction of how to achieve a logo animation scroll effect please? Searching for "logo animation scroll effect" doesn't return what Im looking for.

Here is an example of what I want to achieve, if you scroll to the very bottom the Altgage logo changes colour as you scroll. Looks to be circles behind the logo that expand as you scroll.

www.altgage.com

Affordable mortgages for savvy homebuyers - Altgage

Discover mortgage rates on sale. Qualify for down payment grants and a free credit boost. Get instant quotes and prequalify without a hard credit check.
www.altgage.com www.altgage.com

Thanks.
 
Last edited:
If you right click on logo in Chrome, and go to Inspect, you can see the html. It looks like it's been done using CSS and .svg somehow.
 
Looks like the shape of the logo is defined in .svg as a negative, then there are four divs behind it defining the circles that appear. These circles get their size changed by hooking into the scroll event on document, and setting a transform on the four divs from there. The javascript part of it has been thoroughly minimised so I'm not sure the exact details, but that's the basics of it.
 
Following on from what @Mr Jack mentions, it's animated using the GSAP libraries, specifically Timeline and ScrollTrigger, to control the CSS transform scale function of each 'circle' (DIV containers have the class 'footer-logo-circle' and then 'circle-1', 'circle-2' etc).

From what i can tell the JS (Javascript) is within https://slater.app/6660/12816.js and is defined in the 'initScrolltriggerAnimations()' function -
Code: 
if (document.querySelector('.section-footer')) {
  $('.section-footer .negative-footer-logo-box').each(function () {
    let triggerElement = $(this);
    let targetElement = $(this).find('.footer-logo-circle');

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "0% 90%",
        end: "100% 50%",
        scrub: 0.25,
      }
    });
    tl.fromTo(targetElement, {
      rotate: 0.001,
      scale: 0,
    }, {
      rotate: 0.001,
      scale: 1,
      ease: "none"
    });
  });
}

This essentially seems that once the 'triggerElement' (in this case '.negative-footer-logo-box'; the negative SVG logo) enters the viewport, boundbox is created by the 'start' and 'end' (values are 'top bottom') values, the 'targetElement' (each of the circles DIV containers) begin scaling from 0 to 1 (CSS 'transform: scale(0, 0);' to 'transform: scale(1, 1);').

Might be best to throw the HTML and JS into Codepen.io, include the GSAP libraries, and see if you can replicate it.
 
Last edited:
Mr Jack said:
Looks like the shape of the logo is defined in .svg as a negative, then there are four divs behind it defining the circles that appear. These circles get their size changed by hooking into the scroll event on document, and setting a transform on the four divs from there. The javascript part of it has been thoroughly minimised so I'm not sure the exact details, but that's the basics of it.
Click to expand...

Yeah that's exactly it, get the document height, get the current scroll offset, and determine the intersection point with the remainder value being used to drive the animation timeline. @Mark M what're you implementing this in? are you using React?
 
The effect is also quite dependent on the scroll behaviour being smoothed, in the linked case they do that awful thing of hijacking to make this consistently smooth across browsers but it feels pretty terrible most of the time.
 
Rough workout with CSS and Java, bit rough, logo at bottom left.


Code: 
@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Home Page";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Page.Title</title>
    <style>
        .logo-container {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 1000;
        }

        .logo {
            width: 100px; /* Adjust as needed */
            position: absolute;
            transition: opacity 0.5s ease;
        }

        .content {
            height: 2000px; /* Just to make the page scrollable */
        }
    </style>
</head>
<body>
    <div class="logo-container">
        <img src="~/images/logo1.png" alt="Logo" class="logo" id="logo1" style="opacity: 1;" />
        <img src="~/images/logo2.png" alt="Logo" class="logo" id="logo2" style="opacity: 0;" />
    </div>

    <div class="content">
        <!-- Your page content here -->
        <p>Scroll down to see the logo fade.</p>
    </div>

    <script>
        window.addEventListener('scroll', function () {
            const logo1 = document.getElementById('logo1');
            const logo2 = document.getElementById('logo2');
            const scrollPosition = window.scrollY;
            const scrollThreshold = 500; // Change logo after scrolling 500px

            // Calculate the opacity based on scroll position
            let opacity = Math.min(scrollPosition / scrollThreshold, 1);

            // Set the opacity of the logos
            logo1.style.opacity = 1 - opacity;
            logo2.style.opacity = opacity;
        });
    </script>
</body>
</html>
 
You must log in or register to reply here.
Back
Top Bottom