Jump to content
Search Community

Animate multilayer images

SalvoDee test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

 

https://simbasleep.com/

 

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

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.

http://scrollmagic.io/

 

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

  • 2 years later...
1 hour ago, Dipscom said:

Hello BetteHoward,

 

Have you looked into ScrollTrigger -

 

This is GSAP's plugin for scroll-linked animations.

 

Have a look at that and make a new thread if you get stuck on something, we will be very happy to help.

Thanks for that, I will try it.

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