Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animate multilayer images

Recommended Posts

I want to animate the splitting of a product image when the user scrolls to the section. i.e. When a user scrolls down and enters the product image section, I want to trigger the animation of revealing the different layers/composition of the product.


Like it is done here (scroll down to the second section after landing page):




Any suggestions? 

Link to comment
Share on other sites

Just to clarify, do you need help triggering an animation when it scrolls into the viewport or help in constructing the animation?


For scroll-triggered animation, check out the discussion and links here: 


If you need help with the animation it would be best if you could provide a simple demo that contains some of the imagery or something close to the html and javascript that you are using. 


From the example you posted it seems like a basic timeline with a few tweens to move things along the y-axis would suffice


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


without a demo its really tough to know what you want to do, or what you have tried and hasn't worked.



  • Like 3
Link to comment
Share on other sites

I've followed your suggestion, and i've created a codepen with my example, how i can animate it when scroll page?



See the Pen qKObqm by SalvoDee (@SalvoDee) on CodePen


Link to comment
Share on other sites

Hi @SalvoDee :)


If you check the link that @Carl posted in his answer, you'll find a few ways to animate on scroll. 


You could use ScrollMagic.



If you don't want to use a 3rd party library, @OSUblake has some info here:

We talked about the Intersection Observer in this thread:

@Shaun Gorneau has a simple solution here:

There are several ways to make it happen and those threads are just a few that we have on the scroll trigger topic. If you use the forum search feature, you'll find quite a few threads about different approaches.


Hopefully that helps. Happy tweening.



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.