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

Search the Community

Showing results for tags 'animation'.

More search options

  • 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




Found 31 results

  1. Hi @tuanphan or anyone that can help, I've created an animation to play before my main page loads. I want to ensure my full animation is played, however, the main page always cuts short my animation. Sometimes when I refresh the page, it only shows the last frame of my animation. I only want it to appear before the homepage loads as an "intro" to the page. Any help will be greatly appreciated! Here's my code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { background-color: #f1e8df; background-size: 300px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("https://static1.squarespace.com/static/5eff2b19d5ff0b3f4e7aa681/t/5f26d9f0510a750ec72cba12/1596381685625/Knead-You-Now_White.gif"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(2000).fadeOut("slow"); }) </script>
  2. 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!
  3. 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
  4. 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 like "equity" to make the phrase "equity at work" or "empathy" to make the phrase "empathy at work". I've seen a lot of advice for animating the entirety of a text box, but not portions of that text box as in this example. Thanks for sharing your expertise!
  5. 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?
  6. Site URL: http://encore-encore.co Hi, I am trying to add this text animation to the headline of the lock screen. Anyone knows how to target the right class and make it work? Link: https://codepen.io/barbuduweb/pen/YqVBWZ Thank you, Antoine
  7. Site URL: https://www.susanswartz.com/available-work Hello, I have a newly published artist website, and the artwork is displayed by series on a portfolio page. When scrolling down, the images take quite a bit of time to load so that the page initially appears blank. After chatting with a Squarespace rep, I was advised to remove animations. I tested this, and while it was successful, it is a site-wide change. I am in search of a bit of code to add to this particular page to remove animation from this page only. Any help is greatly appreciated! K
  8. Site URL: https://wombat-dinosaur-kkfh.squarespace.com/config/ Hello! I desperately need help finding a CSS code that will work for a hover effect on my navigation links in the menu bar. I want the effect to be something like an underline when the mouse is over a specific link OR an effect where all the links blur when the mouse is hovering over a specific link. Any help would be SO appreciated I have literally tried everything Thank you!!!!
  9. Site URL: https://www.markdanielquintos.com/selected-work Hi, I am using template 'Avenue' and would like for the images that 'slide up' to do so at different times as opposed to all at once. Ideally it'd have a cascade effect. Any way to do this? Thanks!
  10. Site URL: https://www.justinphang.com/ Hey there peeps! Here's my website https://www.justinphang.com/ in Lange Template I'm a total beginner in CSS and I've been searching everywhere in the forums and Google to no avail of the effect I'm trying to achieve. I'm trying to add hover animation to the pictures in the homepage. It is an Index page. The animation I'm looking at is a slight scale of 1.1 when the mouse cursor is hovering the pictures and the rest of the pictures are slightly blurred, also trying to achieved a slight drop shadow at the hovered picture too. If it's not too much to ask, I'm trying to add animation for the main navigation (Weekdays, weekends and week-long) so that they fade-in appear one by one after the main picture is loaded. But this appearing animation only applies to the homepage. Is it possible? Thanks in advance!
  11. Site URL: https://bear-echidna-k68b.squarespace.com/ I am trying to change the header links color when hovering over a particular link. Thank you very much.
  12. Site URL: https://www.maxgorgol.com/ Hi everyone, I have an issue with my home page, which has all my projects on itβ€”a portfolio of work. I love everything the way it is on desktop, especially with the reveal on scroll animations. On mobile, however, the first project thumbnail doesn't appear until you scroll a little bit down the page, and then when it does it zooms past the screen so you have to then scroll back up to see it again. Ideally, what I'd like to do is keep the reveal on scroll animation on mobile, but have the first project thumbnail (or whole projects section, whatever) be revealed on load, or a lot sooner so it doesn't look so clunky and there isn't just a blank white space there on load. If that's not possible, is there a way to remove a site-wide animation just from one section on mobile (the project thumbnails)? Not a code person whatsoever, so thanks in advance! Will happily provide additional information if necessary, but wasn't sure what to include. Max
  13. hey there, i just use a little code for a marquee text animation. this code works great on my brian template but i canΒ΄t center my text. i try to see the text on the complete site, not only inside my code blog. just have a look at my code. i think there is something wrong ?!? πŸ™‚ .marquee { width: 100%; margin: 0%; height: 100px; padding: 100px ; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .marquee span { display: inline-block; padding-left: 0%; will-change: transform; /* show the marquee just outside the paragraph */ animation: marquee 60s linear infinite; } thank you for your help πŸ™‚ sarah
  14. 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 offset the fading in of subsequent images by a little bit. Is it possible to modify the built-in effects? Or is JS my best bet? If so, has anyone successfully injected GSAP into their Squarespace site? Thanks!
  15. 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
  16. Site URL: https://bornsocial.co.uk/#services Hey everybody, I have few questions about how can I add an animation on the icon. just as this example: https://bornsocial.co.uk/#services Also, do we have some coding template for the page animation? Thanks
  17. Site URL: https://dolphin-llama-7w2z.squarespace.com/ I have a row of 4 images β€” the first image is a "1", the second is a "2", and so on. (The site is currently at https://dolphin-llama-7w2z.squarespace.com/, and the password to get in is "adhd"). Right now I have them animated, activated when the viewer scrolls down to see them. What I'd love, though, is to have the "1" animate first, and then after a half-second, have the "2" animate, and then after another half-second, have the "3" animate, and again with the "4". It seems like this should be simple...ish?, but I'm not sure how to do this! Anyone have an idea? (Or you can just dissuade me from trying this! That'd work, too.)
  18. 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 keep them, and there are no options for animation on a Grid:Overlay element. Do you know if it's a bug or if we can trigger animation with different behavior? (like when we are on a Vtop of a block instead of Vmiddle). By the way, I'm using 7.1 version. Thanks a lot for your help.
  19. Hi there, is it possible to disable the site wide animations from affecting the contents within my site footer? Any help greatly appreciated.
  20. 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?
  21. Site URL: https://villa-rondinelli.squarespace.com/ Hi there, I'm trying to soften the animation between the sliding images of the slideshow gallery banner with a fading effect. I'm using Squarespace 7.1 and this is the website page: https://villa-rondinelli.squarespace.com/ Password: maggie-villa Any suggestion? πŸ™‚ Thanks!
  22. Site URL: http://www.downstream.com/ Hey there, Is there a way to apply animation to video content? I have a client that would like animation on their videos like their current site that was built on Wordpress. Please let me know. Thanks, Alexa
  23. Site URL: http://gregorylassale.com I found these scroll arrows and am wanting to add #5 to one of my pages. https://codepen.io/nxworld/pen/OyRrGy If I'm understanding the code right, on the template each arrow scrolls down the following section. <section id="section05" class="demo"> <h1>Scroll Down Button #5</h1> <a href="#section06"><span></span>Scroll</a> </section> On my site, I only want the arrow the scroll a bit further down the service page to reveal the rest of it (it's too tall to fit entirely on my screen). How would I need to change the code to control the anchor location on the same page? I'll also need to alter the CSS as I don't want the background pictures or gradients, but I can play with that and determine what bit I do or do not need. Thanks.
  24. Hi, looking for advice on how best to approach this design. Ideally the background image fades out after three seconds and a new image appears, while the text/image ("Tributes") remains onscreen. Please see attached.
  25. Site URL: http://https/matchlight.co I'm trying to add a scroll down arrow to the bottom of my first content block on the sites landing page to draw people to scroll down. Anyone know how to do this clean and simple? I'm not great with code so the less we do the better. Thanks!
  • Create New...