Jeremyn

How about this? I have it set to animate for 2 seconds, but you can change that.
<script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1608660323376_12967").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_8180"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1608660323376_12967 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1608660323376_14050 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1608660323376_16106 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original projects.textContent = projectsNum; clients.textContent = clientsNum; ongoing.textContent = ongoingNum; }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script>  
Screen Recording 2020-12-30 at 5.21.10 AM.mov

The AfterPay widget is only showing on the product page. How can it be shown on a product block please?

You can access this link, it will disable code in edit mode, so you can edit everything it
https://squid-echidna-882a.squarespace.com/config/safe

And again THANK YOU so much Tuan for being so helpful!

Try this new code, to bottom of Code Injection > Footer
<script> jQuery(document).ready(function($){ setInterval(function(){ $('.gallery-reel-control-btn[data-next]').click() },2000); }) </script>  

I have now worked out after trying out but now I can't get an even space between the wave divider and the section itself.  So some text or button get cover by the svg on some sections.
 
// Wave section
section[data-section-id="60c0698a8d9e38432eaf5c02"],
section[data-section-id="60c0698a8d9e38432eaf5c08"],
{
 .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 10%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60c4c63b0db925732ea339bb/1623508539300/wavesNegative.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/5fa4daea45d5e37ac8050c94/t/60c4c63b0db925732ea339bb/1623508539300/wavesNegative.svg) bottom repeat;
    margin-top: 1px;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none;
    @media screen and (max-width: 400px) {
      -webkit-mask-size: 120% 20%;
              mask-size: 120% 20%;
    }}}
}

Hey @LukasEriksen! I figured out how to turn off the confetti effect after a certain amount of time. I set mine to turn off after 3 seconds - use the SetTimeOut function, with the command confetti.stop
<script src="https://www.wpromotions.eu/confetti.min.js"></script> <script>confetti.start()</script> <script>setTimeout(function(){confetti.stop();},3000)</script>  

Site URL: https://www.lodestonetrainingandconsulting.com
Is there a way to limit discounts so that they are applied only once in an order, even if there are two eligible items? We give a free seminar code to certain students, so the discount is connected to any products in the Seminar category. If our customer uses the code and has more than one seminar in the order, the discount is applied to all Seminars in their order instead of just one.
I have tried using a 100% off discount, as well as an Amount Off discount (in the amount of one seat in a Seminar). Setting the Discount for a single product doesn't help because if they purchase more than one seat in the same Seminar, the discount is taken off both seats. I also limit it to one use, but i guess that applies to one order, not one item?
Any help, or a viable work-around would be greatly appreciated.

It is a Shopify site, not Squarespace.
However, if you are looking for something like that, please get in touch (via DM) with details of the site. 🙂

The AfterPay widget is only showing on the product page. How can it be shown on a product block please?

The AfterPay widget is only showing on the product page. How can it be shown on a product block please?

It looks like the answer offered hides the Add to Cart, and the Price as well. If you only want to hide the Quantity input field but keep all the rest, you can add this to the custom CSS editor:
.product-quantity-input { display:none !important; }
This will affect products site wide, so if you need this for only a specific product page, you can add this in style tags via the page header code injection:
<style> .product-quantity-input { display:none !important; } </style>

@jpwelchux remove above and use this
.image-block-outer-wrapper.design-layout-card { box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07); }  

Edit Page > Add Code Block > insert code
<style> .image-block-outer-wrapper.design-layout-card { box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07); } </style>  

Hey @NiceDay
Create a gif with your logo file (.SVG) using Lottie for example, like below:
- go to https://lottiefiles.com/svg-to-lottie
- upload your SVG and export it as a JSON file.
- go to https://lottiefiles.com/lottie-to-gif
- upload your JSON file and use one of the animations provided. Export as a GIF.
Then, make sure you upload This GIF via Design > Custom CSS > Manage Your Files, and get the URL.
Then, go to Settings > Advanced > Code Injection > Footer Field and paste the code below. Make sure you put in your own gif URL at the bottom of the code. Let me know how this works.
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #000000; /* SET BACKGROUND SIZE */ background-size: 30vh; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("YOUR URL HERE"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(2500).fadeOut("slow"); }) </script>  

Add to Design > Custom CSS
@media screen and (max-width:767px) { div#page-section-5fa4db1fa27e0764adf5a839 { position: relative; top: -50px; } }  

@olipowell add to Home > Design > Custom CSS
@media screen and (max-width:640px) { div#block-ce591823b8f1025afa01 * { text-align: left !important; } div#block-ce591823b8f1025afa01 { padding-top: 10px !important; padding-bottom: 20px !important; padding-left: 30px !important; padding-right: 40px !important; } }

Add to Design > custom CSS
/* Home nav color */ body.homepage .header-nav-item a { color: white !important; } body.homepage header#header svg.icon.icon--cart { stroke: white; } body.homepage span.sqs-cart-quantity { color: white; } /* space button gg recaptcha */ div.hidden+.newsletter-form-footnote { margin-top: 30px; } /* mobile */ @media screen and (max-width:767px) { /* show breadcrumb */ .ProductItem-nav-breadcrumb { display: block !important; } .ProductItem .ProductItem-additional .image-block { width: 50%; margin: 0 auto; } }  

Once more Creedon, you solved my problem so quickly. Thank you so much!

Once more Creedon, you solved my problem so quickly. Thank you so much!

The following ruleset is causing the div to expand and cover the links. Take it out.
    #book-me {         bottom:0;         top: 75%;         padding-right: 0px;         transform: 0;     } Let us know how it goes.

More progress but not a solution at this point. Since we're talking animations here, I figured I'd post a movie of my progress so far.
At the start of the video we see part of a page section at the top and then our animated section. I scroll down and when the animated page section hits the top of the window the animation starts. I scroll down a bit, then back up, and down. Then you'll notice the white bit (not intended to be part of the final effect ) and the next page section comes along and pushes the animated section up.
The animation images for this test are only 20 images so the animation is not very smooth. Apple for their Air Pods and iPhone SE animations use upwards of 100 images for a smoother animation. Nothing wrong with only 20 images. Just depends on what you are trying to get across. 🙂

page section video scrubbing animation.mp4

Hi,
You mean newsletter section with layout
Left: Image
Right: Text + newsletter form.
I guess you can achieve this by using Image Blocks, Text Block, Newsletter??

This worked for me.
 
 

If you find free solution, I wrote this guide yesterday. It allows you to convert Newsletter Block to Promotional popup.