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

Search the Community

Showing results for tags 'transition'.

  • 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
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. 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?
  2. 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
  3. 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>
  4. 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;}ο»Ώ
  5. 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
  6. 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!
  7. 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?
  8. Site URL: https://everlastcreative.com/ Hey all, I might be a bit optimistic, but I was wondering if there was any CSS code for slowing the gallery slideshow: fade transition effect to be a bit slower. I find the current fade transition, glitchy and too abrupt. --Example-- Found on my home page. Any help would be greatly appreciated. Thanks in advance
  9. 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!
  10. Hi there, I'd love to use the `flex` animation on my site as the elements load in. However I dislike how it also applies to my button's hover state. I'm trying to figure out how I can remove the `flex` animation. I inspect the CSS and try to override it using custom CSS but in vain. Anyone has any ideas how to do it? Cheers, Venn.
  11. Site URL: https://www.juliecochran-work.com/ Can anyone help me increase the speed that the images fade in? The issue I'm having is that when you first land on my site, it's unclear that additional sections will appear down the page so it kind of looks like my site is blank. Open to other suggestions too. Thanks in advance!
  12. Hello Squarespacers! On my page www.plutodesign.cz I use slide transition with arrows both on left and right which works as supposed to. ON MOBILE it doesn't (simply a stupid UI/UX decision), it uses just an arrow RIGHT, you never can go back left. Also "slide click through" doesn't work on mobile. Users can slide just right and be perplexed they can't go back. The worst part is, IF "fade transition" is used it works like a charm (I told you, stupid UI/UX) but it is not what it is supposed to look like on mobile. Is there a way I could remedy this design flaw with CSS? Thanks ahead for any good advice to solve this annoying problem!
  13. Site URL: http://empiricalwisdom.com Hello! I am currently using the dynamic style sticky header and some CSS I found to customize the navbar on scroll for certain pages on my site. When first loaded, the navbar is transparent with white text. Then on scroll, the navbar gets a solid white background, and the site title + navigation links change to black. However, the color of the site title and nav links seems to change to black faster than the white background appears, which looks quite clunky. Does anyone how I can achieve a matching transition animation for both the white background and the changing text color so that it looks smoother? Would really appreciate any help πŸ™‚ Here's the CSS I'm currently using: <style> .tweak-fixed-header .shrink.header { background: #FFF !important; } .tweak-fixed-header .shrink.header .header-nav-wrapper a { color: #000 !important; } .tweak-fixed-header .shrink.header #site-title { color: #000 !important; } #header.shrink .burger-inner>div { background-color: black !important; } </style>
  14. I have one specific example that I would like to achieve for my website. Take a look at https://apple.com on mobile, and try opening and closing their menu. Notice how it slides down and up smoothly. Is there any way to achieve something similar on 7.1? I've attached a screen recording of Apple's mobile navigation in action: Screen Recording 2022-01-04 at 16.44.06.mov
  15. Hi there, I need to make a smooth transition between pages and make disappear the white page when it's loading. Is there any code CSS for that?
  16. Site URL: https://steven.squarespace.com/about Please scroll down on my website until you see the accordion. Currently: When you open any of the accordion items, the title color changes from gray to yellow, and similarly when you close the item, the color changes from yellow back to gray. What I'd like to achieve: Add transition smoothness to color changes (from gray to yellow, and from yellow to gray). Thank you in advance.
  17. Site URL: https://iguana-chinchilla-xt92.squarespace.com/location Hi, Does anyone know if it is possible to round the corners of your map block? I've tried block id and border-radius but it just makes the border rounded with the map over the top.... Also does anyone know how to add a transition on the :hover of a link? I'm trying to figure out how to transition my page links with a smooth in and out transition. pw for url: chocolate
  18. Site URL: https://www.rezo-zero.com/agency/ Hello All, I know this is kind of a long shot, but I love how this website https://www.rezo-zero.com/agency/ manages to use transitions to go to different pages. For example, when going to different pages from the navigation bar, the next page floats in from the bottom of the screen. Is something like this achievable on SquareSpace? I'm trying to apply this to my portfolio site grantekilgard.com. Thank you in advance!
  19. Hello, As title says, I want to have moving text that follows a rectangular path/shape and also that overwrites or overlaps all sections/collections I want to have the text go around the entire website. Any help would be highly appreciated! thank you ❀️ /A
  20. Site URL: https://www.americanvalues.com/ I am doing a project for someone and they have a slideshow on the home page and a second slideshow with quotes. I know how to change the speed of slideshows in the Design>SiteStyles menu, but that controls the speed for both slideshows. I was trying to write some CSS code to apply to only the section ID of the quote section that would slow the slideshow down. I have tried #sectionname { .Index-gallery {}} and within this I have tried transition-duration, transition-delay, animation-duration: 1000s etc. nothing seems to change it. I have also tried attaching this to some of the other class styles and nothing seems to work. I would appreciate any help that someone can provide. Thank you.
  21. 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
  22. 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.
  23. I have a markdown text on my page that looks a bit like that: Hi! πŸ‘‹ I'm Josh. ### Hi! <strong class="shakeHand">πŸ‘‹</strong> <br> I'm Josh. I would love to rotate the hand a bit when you hover over it. As if it waves. I only found out how to do it with images, but how could I do it with a single letter? How could I do that via CSS? Thank you in advance! :)
  24. 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; } }
  25. Site URL: http://www.brndnyn.com Hello- So I've been trying to change the transition time for my index titles that go over the images. I'm currently using Avenue as my template. As it is now, the hover makes the opaque color and text appear a little too quick- I'd like to change that to a slower fade in. However, none of the other code I could find for hover transitions worked for this template. I can't seem to find the tag that effects the title. I'm also trying to get my main title and navigation links to ease out when the mouse is no longer hovering, if that's possible. Would love any help! Thanks πŸ™‚
  • Create New...