Jump to content

Frame-by-frame moving image on scroll

Recommended Posts

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

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

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

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

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

 

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
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 by creedon

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

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. 🙂

Edited by creedon

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

A couple of more demo vids.

Here is one with many more images ( 147 ).

Here is the original 20 images with a text effect.

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.

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

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
  • 11 months later...

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
  • 6 months later...
On 7/31/2021 at 10:36 PM, creedon said:

A couple of more demo vids.

Here is one with many more images ( 147 ).

 

Here is the original 20 images with a text effect.

 

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
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
  • 4 months later...

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
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

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