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

Frame-by-frame moving image on scroll


bleeckerj

Question

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

15 answers to this question

Recommended Posts

  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0
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

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Create an account or sign in to comment

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

×
×
  • Create New...