bleeckerj Posted July 24, 2021 Share Posted July 24, 2021 Hello! I'm relatively new to Squarespace and/also a designer and/also an engineer. I'm putting together my portfolio website at the moment. I was considering the possibility of adding a frame-by-frame style moving image that would 'play' during scroll. You know the type of animation — I believe Apple made it popular on their site with the now canonical airpods animation. See for example: https://levelup.gitconnected.com/how-to-create-frame-by-frame-moving-image-on-scroll-effect-30ce577c63c2 My question is this to the experts out there: is this possible using the code injection features of Squarespace? If so, how might I go about commissioning someone to add this capability to my Squarespace site such that I could then use it in various places? I'm asking this way rather than my normal inclination which would be to spend lots of time exploring and trying as I'm trying my level best to prioritize how I use my time. It may be that it makes more sense to have an expert do it than me learning how, as much as that would be my normal way about things. Julian Link to comment
creedon Posted July 24, 2021 Share Posted July 24, 2021 Hello Julian, When you say you want to use the effect in various places, how and where do you want to use the effect? Would it be like in the cited example? Essentially a section in a page that has the animation? Or are you thinking as a background for a whole page? Both are probably possible but the latter is more common I think. I've done a number of scroll effects. I'm thinking a similar effect could be achieved on an SS site. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bleeckerj Posted July 25, 2021 Author Share Posted July 25, 2021 Hi @creedon My initial thinking is not an entire background, but an isolated element such as an 'Image' block. I'm not sure what the right idiom is. Suppose there were an specific kind of element available — ImageAnimation — that allowed me to provide parameters such as a URL from which to retrieve the frames. When this element was in view in the browser window it would animate those frames forward as the user scrolled 'down' and the frames would animate backwards as the user scrolled 'up'. Once the last frame was reached, the browser would continue its normal scrolling down or up the page. I don't know enough about the possibilities for customizing SS to know whether it is possible to create new elements, but generally speaking — this is the kind of effect I would like to achieve. Although I realize it may be only possible through some other fashion aside from creating a special kind of Image element. Curious as to your thoughts — seems like you know what you're talking about.. Link to comment
creedon Posted July 25, 2021 Share Posted July 25, 2021 Thank you for your description of how you'd like the animation to work as an element of a page. My initial thought is that this would be some Javascript code and CSS that would be added to each page where the effect is desired. Give me several days to cogitate on this one and see how the pieces we have available might be put together. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bleeckerj Posted July 25, 2021 Author Share Posted July 25, 2021 Great. I look forward to hearing what you come up with. Julian Link to comment
creedon Posted July 28, 2021 Share Posted July 28, 2021 Hello Julian, I've not forgotten about this post. I've done some experiments. No real joy yet but some progress in my understanding of how this might come together. The code you cited was pretty easy to get going in a page section. That code does not have the section stick to top of the screen and animate until the next section comes along and pushes it up. Also the technique it uses to animate is not performant. Using a canvas element seems to be the way to go. Stay tuned. This exploration is going to take some time. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bleeckerj Posted July 28, 2021 Author Share Posted July 28, 2021 Thanks @creedon — super interesting. I suspect (without knowing of course) that the 'sticking' bit would be very specific to Squarespace and whatever CSS mechanics there would need to be hooked into in some fashion. Staying tuned.. Beyondspace 1 Link to comment
Beyondspace Posted July 28, 2021 Share Posted July 28, 2021 On 7/24/2021 at 9:21 PM, bleeckerj said: Hello! I'm relatively new to Squarespace and/also a designer and/also an engineer. I'm putting together my portfolio website at the moment. I was considering the possibility of adding a frame-by-frame style moving image that would 'play' during scroll. You know the type of animation — I believe Apple made it popular on their site with the now canonical airpods animation. See for example: https://levelup.gitconnected.com/how-to-create-frame-by-frame-moving-image-on-scroll-effect-30ce577c63c2 My question is this to the experts out there: is this possible using the code injection features of Squarespace? If so, how might I go about commissioning someone to add this capability to my Squarespace site such that I could then use it in various places? I'm asking this way rather than my normal inclination which would be to spend lots of time exploring and trying as I'm trying my level best to prioritize how I use my time. It may be that it makes more sense to have an expert do it than me learning how, as much as that would be my normal way about things. Julian I believe you are after this kind of effect "Moving image" on scroll effect (codepen.io) Here are some thoughts I'd like to share: 1. About image, it seems tricky to upload a bunch of images into Squarespace, therefore I suggest to join all your frames into one image, stacked on each other as long form. Due to squarespace image guideline, there is a limit on max width (2500px) but not on image height 2. I suppose you may want to 'pin' the section when user view the animation sequences, so we can place image on an image block and 'pin' the section that is the image container 3. You can achieve this using scrollmagic or gsap + scrolltrigger, both require javascript knowledge to achieve the animated sequence Scrollmagic example: How to Animate a Coffee Drinking Sprite With ScrollMagic (codepen.io) ScrollTrigger example: How to Animate a Coffee Drinking Sprite With ScrollTrigger (codepen.io) These both example share the same animation with 2 library, note the image they used are horizontal sprite, but you should modify the code accordingly to support vertical image as I explain 4. To implement this you need business plan or higher to add the javascript code and the dependencies bleeckerj 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
creedon Posted July 28, 2021 Share Posted July 28, 2021 (edited) Quote I suspect (without knowing of course) that the 'sticking' bit would be very specific to Squarespace The sticky bit is relatively easy on its own. CSS has defined a position sticky. It's getting the various elements of the overall effect to work in the context of an SS site to come together. That is the trick! 🙂 Edited July 28, 2021 by creedon bleeckerj 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted July 28, 2021 Share Posted July 28, 2021 (edited) More progress but not a solution at this point. Since we're talking animations here, I figured I'd post a movie of my progress so far. At the start of the video we see part of a page section at the top and then our animated section. I scroll down and when the animated page section hits the top of the window the animation starts. I scroll down a bit, then back up, and down. Then you'll notice the white bit (not intended to be part of the final effect ) and the next page section comes along and pushes the animated section up. The animation images for this test are only 20 images so the animation is not very smooth. Apple for their Air Pods and iPhone SE animations use upwards of 100 images for a smoother animation. Nothing wrong with only 20 images. Just depends on what you are trying to get across. 🙂 page section video scrubbing animation.mp4 Edited September 9, 2021 by creedon Jeremyn, bleeckerj and lupocollective 3 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bleeckerj Posted July 29, 2021 Author Share Posted July 29, 2021 I mean..that looks like a pretty solid test to me. Is that actually on the Squarespace platform? Link to comment
creedon Posted July 30, 2021 Share Posted July 30, 2021 Yes sir. This is indeed on an actual SS site! Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bleeckerj Posted July 30, 2021 Author Share Posted July 30, 2021 Brilliant. Also, just parenthetically, came across something similar on this site: https://sidekick.video/ Link to comment
creedon Posted July 31, 2021 Share Posted July 31, 2021 A couple of more demo vids. Here is one with many more images ( 147 ). many frames demo.mp4 Here is the original 20 images with a text effect. 20 text demo.mp4 I think it is safe to say at this point that a reasonable page section video scrubbing animation can be achieved within SS. Certainly totally custom code can be used as evidenced by my test code. As bangank36 mentions libraries could be used. One would have to get to grips with the libraries and whether they would integrate into an SS effect. zenripper, Jonasesupplier and Beyondspace 3 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bleeckerj Posted August 1, 2021 Author Share Posted August 1, 2021 Amazing. I suppose my preference would be for custom code, insofar as it would be purpose-built as opposed to maybe a cobbling together of a variety of things that maybe started with a different objective. What would be next were I to try implementing / integrating what you've done into my own site? Should we arrange a call or some such to discuss? Link to comment
creedon Posted August 2, 2021 Share Posted August 2, 2021 Contacting you via DM. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
lupocollective Posted July 14, 2022 Share Posted July 14, 2022 Wow I just seen this "a year late" - but my question is now with the new SS update is this easier with 7.1 Fluid engine? Any help would be awesome - Ive noticed the nice subtle movements on scroll but Id love to Lock image - Scroll my PNG sequence then continue down ... like Apple of course Link to comment
lupocollective Posted July 14, 2022 Share Posted July 14, 2022 39 minutes ago, lupocollective said: https://codepen.io/jacob_124/details/dyydWbB - Another example Link to comment
Theo_T Posted February 14, 2023 Share Posted February 14, 2023 On 7/31/2021 at 10:36 PM, creedon said: A couple of more demo vids. Here is one with many more images ( 147 ). many frames demo.mp4 739.87 kB · 0 downloads Here is the original 20 images with a text effect. 20 text demo.mp4 1.78 MB · 0 downloads I think it is safe to say at this point that a reasonable page section video scrubbing animation can be achieved within SS. Certainly totally custom code can be used as evidenced by my test code. As bangank36 mentions libraries could be used. One would have to get to grips with the libraries and whether they would integrate into an SS effect. Dont suppose you know of a way to do this horizontally with mouse click and drag? Link to comment
creedon Posted February 14, 2023 Share Posted February 14, 2023 9 hours ago, Theo_T said: Dont suppose you know of a way to do this horizontally with mouse click and drag? I do not. You might look on a site like codepen to see if anyone has some up with something. Keep in mind codepen is not synonymous with code for Squarespace. Any code you may find may need to be adapted. Assuming it could be done at all. It won't be easy. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted June 28, 2023 Share Posted June 28, 2023 Please see Page Section Video Scrubbing Animation. This is not the be all end all of scrubbing animations but the code has been through several iterations and I think usable enough for simple scrubbing effects. Most likely you will need to have some JavaScript coding skills to achieve more than a rudimentary effect. If you are not a coder then you will need a consultant. I am available for consulting. From the last code changes. * fluid engine compatible * animation now completes before leaving viewport, previous behaviour preserved with data-animation-ends-before-leaving-viewport="false" attribute on x-twc-psvsa tag * bumped version to 0.4.0 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted July 12, 2023 Share Posted July 12, 2023 I have updated my cited code. From the changes. add ability to pull image URLs from Gallery section Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment