Search the Community

Site URL: https://tympanus.net/codrops/2021/06/30/how-to-code-the-k72-marquee-hover-animation/ Hey guys! I have tried to follow the code on this attached website to make this marquee scrolling animation on codepen (https://codepen.io/madihasyed/pen/qBxBqGr) But I am not able to view the CSS elements properly, and I'm a complete newbie to Javascript so I have no idea how to import or attach the JS files to this code. Please let me know if there is something to be done from my side in order to achieve this effect! Thanks a TON ❤️

Site URL: https://dtmg.io Is there a way to add an onclick function to a button's href code? I've been googling and can't find anything. Thank you!

I'm looking to add the javascript & SVG effects shown in the following tutorials to my Squarespace 7.1 portfolio site: 1. "Making Stagger Reveal Animations for Text": https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text 2. "Ideas for Distorted Link Effects on Menus": https://tympanus.net/Development/DistortedMenuLinkEffects/index5.html 3. "Animated Custom Cursor Effects": https://tympanus.net/Development/AnimatedCustomCursor/index3.html 4. "Text Distortion Effects using Blotter.js": https://tympanus.net/Development/TextDistortionEffects/index.html It looks like they require JS libraries such as Blotter.js, GSAP, Splitting.js, Paper.js, and Simplex Noise. A few are specifically about using SVG effects. And while I know a bit of HTML & CSS, these are all beyond me. One JS expert I know says the job isn't difficult — except that these require server-side code, and Squarespace won't allow that. He offered to move my site off Squarespace, which isn't an option, or recreate the effects with client-side code, but that would be way too expensive and might cause other issues like slowing down my site. Is he correct? Is there a solution? Thanks for looking. Adam

Site URL: https://taranaomi.com/home Hi! Looking to understand and figure out how to code Locomotive scroll. I want my "Works" page to scroll through my portfolio pieces. The project titles will be links to external pages I have set up already. Here's what I'm hoping for: https://mathieulevesque.com/en Here's a couple of resources I've found online: https://codesandbox.io/s/b0c5t?file=/src/App.js:1092-1100 https://locomotivemtl.github.io/locomotive-scroll/ I've looked at YouTube resources and tried to play around with inspect element to see if I could figure it out but nothings worked so far. My site URL is taranaomi.com - any help would be appreciated, even just setting up the overlapping type and images. Thanks!

Site URL: https://codepen.io/dagerzuga/pen/KLOaqL Hi, was hoping to get some assistance formatting the shared CodePen reference to be used within a code block. Want to use it as header text for a page section area. Thank you in advance.

Hey all, I'm trying to get a script that would create a random image generator. A button on top, image display on the bottom. Ideally, the image would come from a Flickr gallery or a SS gallery that I create so I don't have to enter each address to an image in script. This one works great, but doesn't pull from a gallery. https://codepen.io/jsd041313/pen/RQEOWm Any ideas?

Site URL: https://www.wroteon.com/tester I am trying to inject the code from this article into my own site using a code block. In trying to combine the codes into one and change it to h3 text, I tried the below code, which give the result you can currently see with the dark grey background (please ignore the typewriter effect on the text in the lower section as that is a different approach I am wanting to avoid using): <h3 id="check"> I am <span id="typewriter"></span> </h3> <script> let data = ["Text1", "Text2","Text3","Text4"]; let len = 0; let speed=150; for (let i = 0; i < data.length; ++i) len += 2*data[i].length; len += 4*data.length; function type() { let p=0; for (let i = 0; i < data.length; ++i) { let x = 0; while (x <= data[i].length) { let y=x; setTimeout(()=>{ document.getElementById('typewriter').innerHTML=`${data[i].substr(0,y)}` },p*speed) ++x,++p; } --x,p+=2; while (x >= 0) { let y=x; setTimeout(()=>{ document.getElementById('typewriter').innerHTML=`${data[i].substr(0,y)}` },p*speed) --x,++p; } } setTimeout(() => { type(); }, len * speed); } function blinkingPointer(){ setTimeout(()=>{ document.getElementById('check').style.borderRightColor=`red`; },500) setTimeout(()=>{ document.getElementById('check').style.borderRightColor='transparent' },1000) setTimeout(()=>{ blinkingPointer(); },1000) } blinkingPointer(); type(); #check{ margin:2px auto; width: fit-content; border-right: 1px solid; } </script> I have a feeling this has more to do with how I am injecting the code rather than the code itself. Thanks for any help you can give!

Hey, How do we change the animation effects on different elements, I have site wide animation but I want different animations for different blocks or sections. For example, having one block slide in from the right, and another block from the left, then the section after doing a fade up. Thanks!

Site URL: https://sascha-simon-software.squarespace.com/ Hello, I am a total beginner when it comes to css/html etc. I have a very simple homepage and I want to include this header: https://finisher.co/lab/header/ is this possible? Can I use custom header/footer code injection? I have a Personal Plan, but I am willing to update to a Business plan if this is possible. Regards, Sascha

Site URL: https://cpsfarmtoschool.com/ Our client requires that we use a third-party (OneTrust) for their cookie banner. After installing OneTrust code in the header, the banner displays correctly, however, we see several alerts in the dev console. Anyone know how to remedy these issues?

I created a white background for a title on a block by custom css. I would like to create a fade in effect when the user scrolls and the block becomes visible. I want to add classes dynamically and do the rest in custom css. My first step worked: With code injection I can add a class .preFade to my block: window.onload = function myFunction() { var element = document.getElementById("block-85f05db57d57001f69ee"); element.classList.add("preFade"); } My second step failed: I wanted user Intersection Observer to add another class .fadeIn when the block becomes visible: const appear = document.querySelector('.preFade'); const cb = function(entries){ entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('fadeIn'); }else{ entry.target.classList.remove('fadeIn'); } }); } const io = new IntersectionObserver(cb); io.observe(appear); My JS skills are pretty poor, so any help is greatly appreciated.

Site URL: https://www.veteransthatdump.com/ Has anyone installed the CallTrackingMetrics tracking script using Code Injection and had it work? I see the script in the source code of the site but it is not sending info to CTM (according the CTM support) and SS isn't much help either. Mostly just trying to see if anyone else has been able to get it to work or might have an idea why it would not be working. Thanks in advance.

Site URL: https://walrus-bellflower-k256.squarespace.com/ I've tried a number of ways. It seems the page loads fully on the initial render, as the scrollbar indicates, but I can only seem to get the height of the element that my JS code is inside of, and not the whole document itself. I'm building a scroll-progress-bar for a client and need to know how much of the document they've scrolled through. I thought I might be able to get the footer element and measure the distance from there, but that's also undefined. This was my latest attempt, using all the possible document.height attributes I could find haha, but still nothing: const body = document.body const html = document.documentElement const h = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ) still only returns 589, but the document scrolls to 4715

Site URL: http://www.allkings.org We had been successfully using the code shared here in this tutorial: https://www.launchthedamnthing.com/blog/use-parallax-in-squarespace-71 Until last weekend, we hadn't made any changes to the site and suddenly the parallax is off, and the layers are overlapping. I've disabled the script for now, but wondering if there may have been an update to 7.1 that would have changed things? We're still on that same version, and the tutorial is there to match it, but the problem is there.

Hi! I was wondering how to hide the close button on the promotional pop-up, and instead have the pop-up fadeout after 5 seconds? Thanks!

Hola everyone! I have a plugin (javascript) that launches a pop over box. I am having trouble either styling the script or adding the script to a button. Here is the script. Trying to make it look like the button above in the screen grab <script src="https://www.riskalyze.com/hosted/v2/0a1d6c37ef7ffe925794/rq/lt/lg/btn.js" type="text/javascript" data-button-color="#ff8949" data-button-title="TAKE OUR INVESTMENT RISK TOLERANCE QUESTIONNAIRE"> </script> Any help would be appreciated. Cheers, Alex

Hi, I have 2 images overlay. I want to trigger a sound by clicking on the upper image (olaf.gif) I have sound on image but I lose all criteria: size olaf.gif, onClick and onMouseOut on 5.png. Thank you for your help. Voizins <script> function play(){ var audio = document.getElementById("audio"); audio.play(); } </script> <td align="center" valign="middle"><img src="Images/olaf.gif" value="PLAY" onclick="play()"> <audio id="audio" src="Sound/TOON.wav" ></audio> width="100" height="75" alt="" onClick="this.src='Images/5.png';" onMouseOut="this.src='Images/5.png' /></td>

Site URL: https://geckovacations.squarespace.com/ Password: 12345 on the Home Page there is some code for a property search widget. It doesn't show up when the site is live nor in edit mode in Squarespace 7.0 but works fine when I tested it on a 7.1 template. Attached is the error shown. Can anybody please tell me exactly what to do? I am not a coding expert.

Site URL: https://thefutur.com/brand-strategy-fundamentals#scroll-text1 Wondering if anyone knows how to pick this apart and create something similar in Squarespace. What is needed? Javascript, CSS, HTML Combination? Not even sure where to start, any thoughts would be helpful to get me started. I believe they built this in Webflow.1 Thank you, https://thefutur.com/brand-strategy-fundamentals#scroll-text1

Site URL: https://whbc.squarespace.com Hello. I'm try to create a sort of age verification popup for a brewery website. I'm trying to make it work with the built-in promotional pop-up tool. So far, I created a pop-up with two buttons: "Enter Site" and "Order Takeout" The "Enter Site" button should close/dismiss the popup and show the visitor whatever page they've landed on. The "Order Takeout" button would take underage uses directly to the food menu to order, skipping all of our content about alcohol. For the "Enter Site" link I've tried both a "#" and leaving the link target blank. In both cases, clicking the button re-opens the current page in a new tab. Does anyone know of a way to make that "Enter Site" button simply close that pop-up modal? And, I guess, set whatever cookies are needed to hide the pop-up per the marketing settings. I feel like there's some simple Javascript somewhere to do it but I'm not skilled enough to figure it out.

Site URL: https://jordandixon.co Here my site: https://jordandixon.co The issue is on mobile. I'd like to lock the screen orientation to portrait. If you turn your phone sideways on my current mobile site it looks bad. Any tips on how to do this with Javascript? I know there is an API for this but I'm unsure how to integrate it within Squarespace. I would appreciate any insight at all if anyone has come up with a similar solution. Thanks in advance!

Hello, it’s my first question here. I have a customer, that want to add in the Squarespace website, a signup/login option, but, my customer need to develop an algorithm that match tutor with clients, based on some factors, like location, type of job and hours needed. It’s possible to make something like that? Thanks, Nicolò

Site URL: https://www.robinburgess.com/ On this website, some of the pdfs open in new tabs, while some are being downloaded. This seems inconsistent to me, because I link all pdfs in markdown with <a href="/s/link-to-.pdf" target="_blank">Linktext</a> However, the behavior of the pdfs changes, seemingly randomly. For example, when clicking on "DEMAND FOR ELECTRICITY ON THE GLOBAL ELECTRIFICATION FRONTIER", the pdf opens in a new tab, but for "WHY DO PEOPLE STAY POOR?", it downloads. I'm using Google Chrome, but I want the behavior to be the same across all modern browsers. I have already tried to force this with a site-wide code injection, but it didn't work. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('a[href*="pdf"]').click(function(e) { e.preventDefault(); // stop the existing link from firing var documentUrl = $(this).attr("href"); // get the url of the pdf window.open(documentUrl, '_blank'); // open the pdf in a new window/tab }); </script>

I've looked everywhere and I'm still not sure I understand how to take codepen code and add to squarespace. All I've seen is to just add a code block and put it all in the code block? I can get the html and css to work but soon as I try the Js it doesn't work. I was trying to test out this as a practice to try and figure it out. https://codepen.io/cameronknight/pen/qBNvrRQ on this page https://flugelhorn-seahorse-lzrb.squarespace.com/code-test-page?p?p pw: design123 I cant find any clear information on how to integrate codepen to squarespace. If anyone has straight forward instructions or youtube videos / links etc where I can research this more I'd appreciate it. I think I'm just not sure where each part gets placed into squarespace or when to change an id to something squarespace specific? I think I just need it really dumbed down.. lol

Site URL: https://vincentgarreau.com/particles.js/#snow Hello, the following code works for a cool snow effect in 7.0 but not 7.1. Does anyone know how to make it work for 7.1? I'm trying to have this on the first section of my home page. For reference, the code can be found here (click on "download current config (json)" to access the code file): https://vincentgarreau.com/particles.js/#snow And the walkthrough instructions can be found here: https://www.minimist.ca/articles/particlesjs-on-squarespace It works on 7.0 but not on 7.1. What is needed to make it work on 7.1? <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { particlesJS("home", particlesJSConfig); setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 100); }); </script> <style> .particles-js-canvas-el { position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 1; } </style> <script> var particlesJSConfig = { "particles": { "number": { "value": 400, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#fff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 0.5, "random": true, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 10, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": false, "distance": 500, "color": "#ffffff", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 6, "direction": "bottom", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "bubble" }, "onclick": { "enable": true, "mode": "repulse" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 0.5 } }, "bubble": { "distance": 400, "size": 4, "duration": 0.3, "opacity": 1, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true } </script> Kind regards, John