Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'animation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hey all, I'm wondering how I can make the landing page (in particular) for a website I've been working on more dynamic. Two websites we've been looking at for inspiration: (1) Santa Fe Brewing Co. https://santafebrewing.com/ (2) Human Rights Campaign https://www.hrc.org/ (1) is obviously a pretty high-end website. We like the text bleed over video/images, and videos overlapping each other, and the scroll functionality, in particular. Any idea whether those things are possible to do in Squarespace? I imagine the text animation effect might be possibly to do with GIFs, b
  2. Site URL: https://lavender-reed-n64j.squarespace.com/ Site Password: 2020 EDIT: Please see updated question below! Hello, I made a keyframe animation for my portfolio grid, however I can only get the animation to work on initial hover. The mz-out animation (which is the mz-in animation reversed) is not working. When the mouse leaves the hover the animation should fade back out. I believe the problem is related to the overlay inherent in the template preventing the animation from playing out. Is there a way to fix this? Thanks! .portfolio-grid-overlay .grid-item:
  3. Site URL: https://habitat-tw.com.au/ Hey community, A client has asked me if something like this: https://habitat-tw.com.au/ is possible with Squarespace. I'm well aware that split sections, sticky sections and such are possible and have executed them before, but what about these unique animations? Notice also that the site has a sort of "bottomless" scroll, where upon reaching the bottom, the top of the page scrolls back into view. Does anyone have any ideas as to whether this can be achieved with Squarespace 7.1, and if so, how? Thanks all, Ethan
  4. Site URL: https://remivincent.com/ Hi guys, I've set up a general Slide animation on my SquareSpace which I really like. The problem is that it seems that the animation is triggered when we are in the middle of the block / element when scrolling. I have a large Portfolio / Grid:Overlay and it's very problematic on a mobile, because you have to scroll a lot before the elements of the portfolio appear. Please test this website on a mobile to be able to notice the problem : https://remivincent.com/ Of course, I can turn off animations on my entire site, but I would like to
  5. Site URL: https://www.orcasoundproject.com/ Hello, I have created an animated counter with the help of a code injection at the bottom of the landing page. However it starts the counter when loading the page instead of when you scroll to the section defeating the point of the animation as you never get to see it. Is there any code to make start the animation only when you scroll to the desired section? Here is the code I've used for the animation: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(doc
  6. Hey! I've been trying to make my text slide over an image for a few hours but it doesnt seem to work the way I wanted. I followed this article - https://forum.squarespace.com/topic/73802-carousel-with-text/ but can't get rid of the dots underneath (I have no coding experience). Also, how can I make squarespace resize my text/images instead of croping them. On mobile it looks awful and sometimes parts of the text goes missing. Any help will do, thanks! https://gyazo.com/d2a6044f2fff3fa2ce84a53c842226ba - the dots https://gyazo.com/b3aca9d5f56239589b32adc9ce5043dc - the
  7. Site URL: https://www.orcasoundproject.com/ Hello, On my website at the bottom of the home page I have some numbers that I would like to animate to go from 0 to the number that is already stated there. I have seen it before in some websites. Is there an easy and free way to do this? Thanks!
  8. Site URL: https://mango-harmonica-5r95.squarespace.com/aboutme#selected-works Hi! I'm trying to increase the padding between images under 'Selected Works.' I tried using this code: #collection-5f603ea84986ef4676be98e6 .sqs-block-summary-v2 .summary-thumbnail-container { padding-right:30px; } However, I end up seeing the wavy blue line animation at the top of the page now behind these images. Help is appreciated. Thanks!
  9. Site URL: https://mango-harmonica-5r95.squarespace.com/home-1 Hi. I have been attempting to add codepen background animations to my squarespace site and I am really struggling. I have read documentation on adding the CSS & JS as a code block with the <script></script> and <style></style> tags. I have also attempted to convert SCSS to CSS. And making sure I link any external style sheets. I have read through so many answers and can't figure out what I'm doing wrong! I've tried adding multiple animations and I keep failing. Can someone please provide some insight on
  10. Hey SQS, I just published a free tutorial showing how you can add a script to get this cool drawing animation for social icons in Squarespace 7.1. If you have any questions about the script feel free to leave comment here https://ryandejaegher.com/how-to-animate-social-icons-in-squarespace-7.1/ Animation Draw In.mp4
  11. Site URL: https://bluebird-porcupine-yzdg.squarespace.com/shop/p/block-hoodie Hello, I was wondering if I could get some help improve my image gallery slider? The transition seems to be a little delayed / "sticky" as per my attached video. Here is my current page: https://bluebird-porcupine-yzdg.squarespace.com/shop/p/block-hoodie pword = squarespace I contacted Squarespace and they said that perhaps code will help. Also, is there any way to tap on the image on my Product Page and allow the user to have the image as full screen on mobile device? Similar to this site if yo
  12. Site URL: https://domus-ie.squarespace.com/servicios-proyectos/autoconsumo I think general Animations with 7.1 is a great feature, but I often think if there is a way by coding to "make things" appear before, with less vertical scrolling. Any idea? Thanks a lot! 🤘
  13. Site URL: https://puma-orb-9lss.squarespace.com/projects .white .portfolio-grid-overlay:hover .portfolio-title { animation: fadeIn 1s ease !important; } @keyframes fadeIn { 0% { opacity: 0; -webkit-transform: translate3d(0,30px,0); -moz-transform: translate3d(0,30px,0); -ms-transform: translate3d(0,30px,0); -o-transform: translate3d(0,30px,0); transform: translate3d(0,30px,0); } 25% { opacity: 0; -webkit-transform: translate3d(0,30px,0); -moz-transform: translate3d(0,30px,0); -ms-transform: translate3d(0,30px,0); -o-transform: translate3
  14. I'd like to create a bouncing down arrow like the one on this website: https://www.cookmellow.com/ It would be within the index pages of Brine / Marta template -- so that people know to scroll down (particularly on homepage)... Thanks a lot
  15. I have an animation that needs to call a .js and .png file. I have made several attempts to embed the html into squarespace, but it does not work. All I need to know is: Is this possible to do, or am I wasting my time?
  16. Site URL: https://www.lukaseriksen.com/ So I really want to add a confetti animation to when someone purchases a product on my site. I have scoured the interwebs and have found some code which may let me do this, but I have no idea how i can integrate it into squarespace (https://codemyui.com/falling-confetti/) could anyone help me out with this? I would be super dooper thankful! Thanks in advance! Lukas
  17. Site URL: https://www.smallbizsidekick.com/ I have my sitewide animation set to scale, and it seems to be messing with a video I embedded at the bottom of this page: https://www.smallbizsidekick.com/contact I used an embedded code to make a Youtube video autoplay, but it starts very blurry and only gets crisp/HD when it's played for a minute. I'm assuming its because of the sitewide Scale animation. Is there any code to turn that off for this block, or this whole page? Thanks!!
  18. Site URL: https://henryoboyleillustrations.squarespace.com/ Hello, so what I’m trying to do is create an opening intro video or maybe a gif. I want the video to show at the very beginning when they first enter the site. Then just fade into the home page. I only want it to show once as well, just at the beginning. Is this possible? many thanks henry
  19. Hello, I'm trying to figure out a way of disabling the subtle move–in–from–bottom animation that appears on mobile with the overlay menu. The white to black transition is fine, I'd just prefer the menu items not to move in.
  20. Hi, I'm working on customizing some code for a client's website, and I need a little help tweaking some of the image block animation timing. I have the images fading in, using the built-in image block effects, but my client would like to have the images fade in one at a time - ie. a staggered animation. Unfortunately, the site hasn't launched, and is password-protected, so I can't share it. I was trying to do this using Greensock, but I'm not sure I was injecting the GSAP library correctly. Anyway, the image block animation is doing almost exactly what I want; I just want to be able to of
  21. I am trying to apply a color change animation in the background, which works perfectly if I use .section-background {} and insert my animation code. However, I want to apply it only to a specific section, and not every section in the page. I've tried using the id as follows: #collection-5e01c1ef7645b07c060d1849.section-background {} which doesn't seem to work. Any ideas on how to use the id and the section-background property? If I just use the id #collection-5e01c1ef7645b07c060d1849 then it animates over all the content in the block. Thank you!
  22. Site URL: https://www.getwatercooler.com/ Hi - I'm interested in adding a vertical auto-carousel "animation" to the text in the hero image on this site: https://www.getwatercooler.com/ Practically speaking, I would like the word "insights" in the phrase "insights at work" to be replaced by additional words that scroll up from the bottom automatically and pause for 1-2 seconds before the next word in the carousel appears. In this case, the "at work" text would remain frozen in place and not animate, just the first word being replaced automatically. Additional words might be something li
  23. Hi - my client wants the (usually H1) site text to have some sliding animation. The 7.1 side-wide animations might do, but when I turn them on, they also apply to the site logo in the top nav bar, which looks janky. Does anyone have any code so I can disable the site wide animation on JUST this one element?
  24. Hey, I was wondering if anyone has an answer on how https://www.snowball.money/ does the app promo preview within their site. Screen Recording 2020-07-31 at 9.13.32 PM.mov
  25. I would like to use css to add animated images to the background of my home page to achieve a similar effect as seen in the floating clouds here - https://takearecess.com/ (scroll down the page to see the full effect) Unfortunately, this is an area in which I completely lack the knowledge of how to achieve this. Can anyone point me in the right direction?
  • Create New...