Image sequence on scroll

[Nikhil17]

I have used one of your codepen example to create image animation on scroll in my webpage. The example works ok but I want few modifications in that with image animation.

1. When I add more content with your codepen code for animation, the animation gets scrolled with window scroll (looks weird while scrolling).

2. When a user scrolls the page and when Canvas/ image animation comes at the visible part of the screen, the screen should locked and only the sequence of images should be animated on scroll.
3. The last and important requirement is that the canvas/ image height should be 300px (It should not cover the whole window)

index2.html

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6?editors=0010 by osublake (@osublake) on CodePen

[Rodrigo]

Hi @Nikhil17 and welcome to the GreenSock forums!

 

Normally we don't provide custom solutions based on requirements list from our users. In your case this was quite simple (simple enough that you should've been able to solve it by investigating a bit  )

See the Pen zYmpmGN by GreenSock (@GreenSock) on CodePen

 

As I mentioned above we normally don't provide custom solutions so please don't make a habit of posting a list of requirements in order to get a working solution. Also always include a minimal demo in codepen or other sandbox service (like Stackblitz) that shows what you already have.

 

Hopefully this helps.

Happy Tweening!

[Nikhil17]

Hi,
I am not looking into the exact solution but the gsap has plenty of features that make me confused about its usage.
I have already created the above solution and I am stuck at the canvas/ image height which looks weird on scroll. I want something like this https://www.behr.com/consumer/inspiration/2023-coty/ (The animation that is at the top). The same functionality I am looking for in the middle of my webpage. You can see below codepen code what I have done so far.
I am looking for some help/the right direction to look on as I am having this issue since last month.  Thanks in advance.

See the Pen MWPQdrK by Nikhil1795 (@Nikhil1795) on CodePen

[Cassie]

Hi there - I'm not really sure what you're asking that isn't covered by the demo Rodrigo provided. 

Do you have any specific questions?

[Nikhil17]

I basically want to have a sequence of images that works as an animation on scroll when it is in the viewable part of the screen. I want the canvas should cover only half of the screen and the other half should have other sections of the data (Ex:  https://www.behr.com/consumer/inspiration/2023-coty/).

 

(Note: I want canvas should cover 70%(animated) of the screen and the remaining 30% (not animated section) should have other sections/ content and data. The animation should not cover the whole page.)  

I hope you understood the question. If not then I want to have animation just like this page have at the top https://www.behr.com/consumer/inspiration/2023-coty/

[Cassie]

Have you attempted this yourself Nikhil?

The majority of the work has been done here in the demo Rodrigo provided - We're happy to provide pointers but we don't have the resources to build this out for you.

 

Is there a particular part you're struggling with? Why don't you start off by creating the structure you want with some simple rotation tweens as a placeholder instead of a complicated canvas image sequence - then work from there.

[Nikhil17]

Yeah. Rodrigo provided me with the major solution but even I have reached that point. 

I don't want any rotation in the animation, I just want a sequence of images to animate on a scroll.

 

I want the animated part (Canvas/ image) should cover 50% of the viewable screen and also display the below/ next content at the same time.

In Rodrigo's demo example: The animated size is 50% which is good but the below/ next content (orange background) is not visible during the scroll.
The orange content appears when the scrolls are complete. 

 

I want to have the animated part should scroll when it is in the viewport and also the below content should be visible at the same time.

(Example link: https://www.behr.com/consumer/inspiration/2023-coty/)

 

Please go through the above link which shows the exact demo I want to have in the middle of my webpage.

Can you please provide any suggestions or demos or something which I need to focus on?

[Cassie]

I provided a suggestion -

 

It sounds like your issue lies in understanding layout and pinning. My suggestion is to build this out without the image sequence so that you can get the correct sizing and pinning behaviour first. Then when you're happy add in the image sequence.

 

something like this

 

See the Pen LYgdyjj?editors=1010 by GreenSock (@GreenSock) on CodePen

Could become this. 

See the Pen ZEqxKyb?editors=0010 by GreenSock (@GreenSock) on CodePen

Simplifying and reading the docs is always the best route to get where you need to go

Here are the scrolltrigger docs

 

Good luck!

 

 

[Nikhil17]

It is now 90% correct what I am trying to achieve. But the main problem is still as it is. Below the HTML code, we have used a div "spacer" which is having a "height:100vh" which means the animation is working based on the "spacer" and not moving in the same location. If we add some more content below and above the animation then the animation looks weird and look the content overlap with the animation.

[Rodrigo]

Hi,

 

I'm not sure I follow exactly what's the issue you're having here. Please provide a minimal demo that clearly illustrates the problem you're having.

 

Also based on your latest post I think Cassie already provided you with some working demos and suggestions for this:

On 5/9/2023 at 6:36 AM, Cassie said:

My suggestion is to build this out without the image sequence so that you can get the correct sizing and pinning behaviour first.

 

Happy Tweening!