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


Forums

  • 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
  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

  1. 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
  2. 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.
  3. Site URL: https://collie-chicory-w59b.squarespace.com/ Password: equip I am attempting to add a rotation to images on my site - This works using section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(even) figure.animation-loaded img { transform: rotate(8deg); } section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(odd) figure.animation-loaded img { transform: rotate(-8deg); } I had to add .animation-loaded to the figure or else the image doesn't show at all (see below). However there is a frustrating issue where if the image in question is visible on the page at load (e.g. scroll part way down and then refresh) then the image doesn't show. (In the screenshot below the page was scrolled enough that the "Before School Care" section was in the viewport, the "After School Care" section was not in the viewport at page load). I I don't have the animation enabled on the section, or if I don't have the transform CSS then the images show consistently. What can I do to fix this?
  4. 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! :)
  5. 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; } }
  6. 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?
  7. The website is https://www.marylucier.net/, and the page I need help with is https://www.marylucier.net/installations. Does anyone know how to remove any and all types of transitions for slideshow image galleries? I have fade has my default transition, but I really don't need a transition in the image gallery. I have tried: .slide { visibility: visible !important; -webkit-transition: opacity 0s ease-in-out; -moz-transition: opacity 0s ease-in-out; -o-transition: opacity 0s ease-in-out; transition: opacity 0s ease-in-out; } but the fade was still there, so I took it out. I also implemented: .slide {; opacity: 1 !important;; } This removes the fade, but there is still a delay between the images. Therefore, when I click from one image to the next, the previous image lingers in the background for a second after the new image comes up. Does anyone know how to remove this delay? It's not noticeable with images that are the same size, but for images that are different sizes it looks incredibly strange. Thanks in advance!
  8. 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>
  9. Site URL: https://codepen.io/soulwire/pen/mErPAK Does anyone know how to apply this effect - https://codepen.io/soulwire/pen/mErPAK
  10. Site URL: http://mirandameeks.com/ Hello, I'm new to CSS and I can't figure it out! I'd like to be able to present my portfolio in full color when you first visit the site, but once you hover over an image in the gallery section, the rest of the images fade to grayscale while the current hovered image maintains its color. Sort of a hover effect on everything but the hovered image, almost like a spotlight, if that makes sense. My old website did it and I can't remember how I added it: http://mirandameeks.com/ Another example is this: https://codepen.io/jensgro/pen/ohdgF I currently have this custom CSS, which has the right hover effect, but it's only affecting the hovered item. I would like this effect, but opposite (i.e. affecting the other gallery images instead): .gallery-masonry-item img{ filter:grayscale(0%); transition:10s; opacity: 1; transition: 1s; } img:hover{ filter:grayscale(1); opacity: .7; transition: .7s; } It's important that the items maintain their color on their own, but only become grayscale once you hover over an image. Everything else I could find online sets the images to a grayscale filter "permanently" which I don't want. Thanks for your help, much appreciated!
  11. Site URL: https://cforc.quebec I would like to ask you if the is a possibility to β€œ rename β€œ ( translate ) change almost all words in shopping cart section. Expressions such as ITEM, QUANTITY, PRICE, adding to cart, added, checkout etc - I need to have all in my language. In settings / Language - is an option to change language but doesn’t work. Thank you very much in advance
  12. 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!
  13. 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
  14. Site URL: https://point-rhino-wlwc.squarespace.com/keynote-speakers Hi, I have been building this site and I'm struggling with one particular section. If you scroll down to the image grid I basically want it how it is with the hover and transition but on larger screen sizes there is a cut off on the overlay. Please can you advise me on a simpler way to do this? https://point-rhino-wlwc.squarespace.com/keynote-speakers Password 7mJZqnZWtATh84H6 Thanks you!
  15. Site URL: https://grouse-seal-j62k.squarespace.com/home site pass is "prince" I'm wondering if someone can help me as I'm pulling my hair out trying to fix this. Firstly, the page I'm trying to fix only appears on mobile, the desktop version has a background video and is irrelevant here. The issue I'm having is that on the mobile homepage I have a full screen slideshow, however, the transitions are incredibly abrupt. They do the desired "fade" once maybe every 5 or 6 transitions, otherwise it just switches images suddenly. Now if I'm looking at this page on the squarespace mobile view, no issue, it transitions smoothly, however, as soon as I look at it on my actual phone, it has the abrupt transitions. I even tried this code from user "rwp" to slow down transitions. .gallery-fullscreen-slideshow-item-img{ transition: opacity 1600ms ease-in-out !important; -webkit-transition: opacity 1600ms ease-in-out !important; -ms-transition: opacity 1600ms ease-in-out !important; -moz-transition: opacity 1600ms ease-in-out !important; -o-transition: opacity 1600ms 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; } Again, it works beautifully on desktop and the squarespace mobile view, but has no effect when viewing on an actual mobile phone. I've scoured the web for an answer but it seems it's not a common problem. Does this have something to do with my mobile browser? It's Chrome on a Galaxy Note 10. Any answers or guidance would be appreciated as I have to take this site live in the next few days and I need a mobile home page.
  16. 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.
  17. 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.
  18. 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
  19. Hi there, I'd like to add a background to my website that is similar to this example: https://www.ginlane.com/ I've managed to work out how to just add a background color gradient, but it isn't quite the effect I'm after and I'd more so like to add a gradient/color change that activates on scroll. As I will be using colors that don't necessarily gradate (as per the example above), I'm wondering if instead of looking for a gradient option I should be looking for an option that would offer a smooth transition between background colors instead? I'm using the Mentor template, which is in the Brine family. Any help or suggestions are greatly appreciated! Thanks, Jessica
  20. I'm working on a site not yet live and trying to have the cover page transition after 5 seconds into the homepage in a creative way. I'm using the following to provide the transition: <meta http-equiv="refresh" content="5;url= my client's website URL " /> This works great but the transition is abrupt. I'd like to offer maybe a fade or other creative transition into the homepage. I would love suggestions of how to do this. Thank you.
  21. 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!
  22. Site URL: https://www.futureofwhen.com I have a black background. I want the background image to transition when you hover over it. Also, can I make my background image a link to my contact page?
  23. Site URL: https://www.futureofwhen.com Hello, Im trying to achieve a black full-bleed landing page, but I want a simple "clickthrough" transition to play when you hover over the page with the mouse. I want the black background to slightly crack open on the right side of the page, as though a "door" was opening into a white space. The background that is on the site currently is the image I want the "updated" black background to transition to when you hover over it. I want this transition to "clickthrough" to the contact page that I've already made. How can I achieve this today? futureofwhen.com pw-letuspray
  24. Is there any way to slow down the transition between the menu from the two lines to the cross?
  25. Site URL: https://www.triple8dancecompany.com/company Hi, I'm trying to alter Squarespace's default settings for a hover caption overlay using Custom CSS. I want to change the transition time so that the image caption fades in and out instead of appearing immediately. This is my current code: .image-caption { left: 50%; position: absolute; top: 55%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 17px !important; font-weight: semibold !important; color: #ea4e4c !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important; overflow:hidden; } .image-caption-wrapper { top: 0 !important; padding-top: 93% !important; background: #000000 !important; opacity: 1 !important; text-align: center; pointer-events: none; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; /* future proofing */ -khtml-border-radius: 50%; /* for old Konqueror browsers */ } I'm guessing I have to add a line like "transition: 0.3s ease-in-out;" but I'm not sure where. Any help would be appreciated -- thanks!
Γ—
Γ—
  • Create New...