Jump to content

Search the Community

Showing results for tags 'transition'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • Resources
  • 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
  • German Circle Members's Topics


  • Events Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. I was wondering if it is possible to have a landing page with a still image, and once you select the "Let's Go" button, the button will disappear and the image will move. This will then turn into the homepage where the image becomes still again. I have tried adding an image on my landing page, then placing a gif on the homepage. Once I click on the "let's Go" button, the page goes white and then switches to the gif making it look like a choppy transition rather than seamless. Does anyone know of a way to have or create a more smooth transition? I currently don't have much on my site, just some random gif and images to see if this is even possible.
  2. Site URL: https://www.laterwolf.com Hi! I can't seem to find out how the designer of this page managed to create the transition/reveal effect in between pages. You'll see what I mean when you click on a page in the navigation (Info). Is this something I can do with CSS? I'm using Brine 7.0 so there's no site-wide animations built-in. Thanks for any help with this!
  3. Site URL: https://nayatraveler.squarespace.com/journeys-peru-walking On the site linked, scroll down to 'The Journey' section. I'm trying to figure out how to make our homepage very similar to this. Where there is an image at the top, then you scroll down and see another image with text, and as you keep scrolling the text also keeps scrolling, but the image either stays the same, or is in an automated carousel. Anyone know how to do this? Or, anyone know of any templates currently on squarespace that has this feature???
  4. Site URL: https://www.dantonedesign.com/ Is there a way to add fading load animation transition to code blocks? Basically, I want the 'colour swatches' for each project on the home page (https://www.dantonedesign.com/) to load smoothly, in a similar way to the instagram lazy-load-style fade in, visible on this page (https://www.dantonedesign.com/play) - in other words, i would like the code blocks used for the project 'swatches' to fade in, the same way an image block does if you add a SQSP fade in animation. so the website looks smoother when changing pages. Any help would be amazing, thanks in advance! 🙂 Dan
  5. Hello, Does anyone know a piece of css / code for 7.1 to add smooth page transitions ? Like these websites for example : https://www.rezo-zero.com/contact/ https://www.laterwolf.com/ Thank you
  6. Site URL: https://butterfly-fox-sw8m.squarespace.com/ PW to access site is DivineTiming When I switch between pages, there is a flash of white. I am looking to eliminate or "hide" this flash of white with either an animated loading image, or somehow achieve a smoother transition between pages. An example of page transitions I like is -- http://www.dreamville.com/ Any help on this would be greatly appreciated. Thank you! -Juan
  7. When creating a brand new site & domain for a client using SQSP for both, the SEO optimization process was a breeze. For another client, they wanted to keep their domain hosted with GoDaddy but create a new site with SQSP. After launching the site, SERP ranking/results tanked and SEO optimization was a lot harder. I know there is A LOT more than just domain transfers that go into SEO, but any recommendation on whether to transfer or connect domain? Does it seem to work better when everything is consolidated with SQSP and their platform? Thanks for any advice!
  8. Site URL: https://www.kindred.work/servicesv2 Hi 🙂 , I've created 3 custom modals to pop up on a button click by adding a .active class to the modal container. The CSS I've used to achieve this is as follows: #coach-wrapper { left: 100vw; opacity: 0; transition: all 0.3s ease-in-out; } #coach-wrapper.active{ opacity: 100%; display: flex; position: relative; z-index: 1000; left: 0; } I expected the modal to slide in from the left however it currently just immediately appears on the page with no transition. Any advice on how to achieve such a transition would be greatly appreciated!
  9. Hi, The fade transition time between images in a 7.1 Gallery Section Slideshow is too abrupt. SS cannot assist as it requires code injection. Does anyone know of some code that will slow the fade down so there is a slow cross-fade effect between images? The code below works in 7.0 (in the page's CSS) but it doesn't work in 7.1 (Gallery Section inserted into a Blank Page). Many thanks. <style> .slide { visibility: visible !important; -webkit-transition: opacity 2s ease-in-out; -ms-transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -o-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; } </style>
  10. Site URL: https://brm-designs.com Hello, I added custom css to slow the transition of the fade on my homepage gallery, however it does not consistently work and im unsure why. It's hard to pinpoint why exactly it isnt working due to the randomness of its occurance... here is the code i have added (found from a different forum post, not my own): .gallery-fullscreen-slideshow-item-img { transition: opacity 2300ms ease-in-out !important; -webkit-transition: opacity 2300ms ease-in-out !important; -ms-transition: opacity 2300ms ease-in-out !important; -moz-transition: opacity 2300ms ease-in-out !important; -o-transition: opacity 2300ms ease-in-out !important; } .gallery-fullscreen-slideshow[data-transition="fade"] .gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src { transition: opacity 1400ms ease-in-out !important; -webkit-transition: opacity 1400ms ease-in-out !important; -ms-transition: opacity 1400ms ease-in-out !important; -moz-transition: opacity 1400ms ease-in-out !important; -o-transition: opacity 1400ms ease-in-out !important; } Any help would be really appreciated password to site is BRM123
  11. Site URL: https://parrot-roadrunner-h4je.squarespace.com/ Hey! With the new Squarespace Fluid Engine, we are having trouble finding a code that will disable the site-wide animation for just one block. Anyone have any leads on that? https://parrot-roadrunner-h4je.squarespace.com/ password: demo We're trying to remove the load-in animation on just a few blocks.
  12. Site URL: https://brm-designs.squarespace.com/home Hello, I have a gallery on the home page of the site i am working on. I want the transition speed to be slower, when I inspect the code it says 600ms, I want it to be more like 1600ms, but when I tried adding custom code into the css area it didn't change, looking for any suggestions or help. Thanks
  13. Site URL: https://www.ambergchen.com/ I'm trying to add a drop shadow transition (ease) on hover for the images on my homepage. For whatever reason, it works on the images that are left-aligned, but not on the right side. Pics are attached for reference but you'll be able to see it in action on my site 🙂 Pass: WIP Thank you in advance! Below is my code for the image hover: .design-layout-overlap .image-inset { transition-property: box-shadow } .design-layout-overlap .image-inset:hover { box-shadow: 0px 8px 12px #E0DDDC; transition: .2s ease; }
  14. Site URL: https://www.jefferysalter.com/Landscapes/1 Hi all, Wells template is my best template to show my work. I look for a transition effect like this one https://www.jefferysalter.com/Landscapes/1 for gallery to see each image from right to left and not like actually sqs offer: www.delmialvarez.com images: The site is not a sqs but it doesn´t matter. thanks
  15. Site URL: https://nectarine-grouse-6r6a.squarespace.com/?password=hello Hello! Is it possible to either slow the transition down with a vertical navigation or have it slide in? https://www.loom.com/share/b7fee1c3de7745e7b5d0fcf261a7b26c Also - why does the home button sit to the left?
  16. Site URL: https://www.helenecyr.com/ Hello! Does anyone know of a CSS code to help with smoother image transition? I'm afraid what I have now is clunky and too flashy with a stark white in between the images on my cover page:( Please see what I mean on my cover/splash page https://www.helenecyr.com/ and what I'm hoping to achieve (note the soft transition in comparison) https://jonaspeterson.com/ MUCH much appreciated! Hélène
  17. Site URL: https://www.fishdistrict.com/ I'm having an issue with gallery transitions on a site we've done. There are currently 3 images in the gallery, which I've set an autoplay duration for, along with transition duration. The issue is the first image glitches back & forth between image two & three, before reverting to the intended timing & transitions. Can anyone shed light on why this may be happening?
  18. Site URL: https://www.yespeach.com.au/ Hi, I'm trying to recreate this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade Currently I can sort of get it. However when my fade comes in it fades my text as well. Here is what I have... figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 9.75; } .gallery-masonry-item * { color: white; } /* remove gap */ figcaption { padding: 0 !important; } /*text color size in masonry gallery*/ .gallery-caption * { color: #000000 !important; font-size: 30px !important; text-align: center; } /*creates opaque rollover effect for regular image blocks*/ .gallery-masonry-item:hover { background-color: #525a5c; opacity: 0.3; transition: all .5s ease-in-out;}
  19. Site URL: https://sarahfloodbaumann.squarespace.com/ Hello, I have a slideshow gallery block in the hero section of my homepage. Is it possible to remove the fade transition between each image, so that it's a sharp gif-like transition? Site password: demo Thanks!
  20. Site URL: http://www.inkhartz.com I would like my images to fade more slowly into/out of each other. I can't find any code that does anything. Can someone please help?
  21. Site URL: https://bywater-collective.squarespace.com/home Hey y'all - This animation was working earlier, but has recently stopped and I can't figure out why. I've targeted the "Footer-blocks--bottom," using javascript to add a class of ".loading-next" once the user has scrolled to the bottom of the page, then the animation is applied that blinks between different background colors of the "Footer-blocks-bottom" and the h2 text. I can see on inspection, that the script is executing correctly - so it seems that the CSS is the problem. I've played around, adding !important tags, and bringing the code to the bottom of the CSS block, using actual colors over the variables, but I can't get it to work... Any ideas appreciated! Thanks! Site: https://bywater-collective.squarespace.com/home (PW: byctest) .loading-next { -webkit-animation: loading01 8s ease-in-out 1 forwards; animation: loading01 8s ease-in-out 1 forwards; font-weight: 400 !important; } .loading-next h2 a { -webkit-animation: loading01 8s ease-in-out 1 forwards; animation: loading01 8s ease-in-out 1 forwards; font-weight: 400 !important; } @keyframes loading01 { 0% { opacity: 1; background-color: var(--color-f-bg-load-a) !important; } 20% { opacity: 1; background-color: var(--color-f-bg-load-b) !important; color: var(--color-f-text-load) !important; } 40% { opacity: 1; background-color: var(--color-f-bg-load-a) !important; } 60% { opacity: 1; background-color: var(--color-f-bg-load-b) !important; color: var(--color-f-text-load) !important; } 80% { opacity: 1; background-color: var(--color-f-bg-load-a) !important; } 100% { opacity: 1; background-color: var(--color-f-bg-load-b) !important; color: var(--color-f-text-load) !important; } }
  22. Site URL: https://www.alliancepackaging.ie/ Hi I have two large gallery slideshow banners (full width) at the top of my homepage but the animations between the images are not working. When I apply one it animates once and then never again. I have some code on the site but this issue was there before I added it. I wanted to see if anyone had come across this before. Site is in 7.1
  23. Site URL: https://lars-pilgaard.squarespace.com/?p I run 2 Squarespace websites and want to make 1 website out of the 2. I could copy all text, download all photos and write down all links from the 1 and apply it to new pages on the 2nd. But if I could transfer everything as pages from the 1 to the 2nd, thus keepng links, etc., it would be brilliant. Any suggestions much appreciated. Thank you much.
  24. Hello everyone, Please lend me your help. Upon hover, my gallery images zooms in and out, the zoom in transition is smooth but the zoom out effect is rather sudden so the end result looks jumpy. Here is the code I used: .gallery-grid-item img:hover{ transform:Scale(1.1); transition-duration: 1s; } .gallery-grid-item {overflow:hidden!important } Please someone tell me what I did wrong in my code. Here is the link to my gallery: https://www.ptphotography.com/stmoritz-badrutts-palace-hotel-switzerland For reference, we want to achieve the same smooth transition like this product page: https://www.ptphotography.com/destination-trial I used the same code for the product and gallery page but I don't know why they have different effect. Please help 🙏 Thank you in advance, Kind regards, K
  25. Is there any way to slow down the transition between the menu from the two lines to the cross?
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.