Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Go to solution Solved by Viz,

Recommended Posts

Hi Guys,

 

Thanks for this awesome gsap lib again. I'm still learning it but the library is really powerful and quite fun to explore.

 

I need some help with the animation where my container gets pinned on screen and then the image is horizontally moved with the scrolling. This part works fine in the codepen above. 

What I need with this is for the text in the adjacent container to smoothly show hide along with this image movement. Obviously the number of texts will be the same as the image movements so that wont be a problem.

 

Thanks for any help in advance.

See the Pen xxRVpGQ by vsaini603 (@vsaini603) on CodePen

Link to post
Share on other sites

Hey @Viz,

 

Here is a concept, maybe it will help you.

 

See the Pen NWRoQJo by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 1
Link to post
Share on other sites

Hey Viz. First you need to set up the additional text the way that you need it to be. Then you apply the same sort of animation to it as the images (most likely it'd be easiest if they use the same timeline and ScrollTrigger). 

 

If you have a specific question, feel free to ask and we'll do our best to help.

  • Like 1
Link to post
Share on other sites

Hey Guys,

 

I've managed to solve the problem of syncing the image and text by using the onComplete and onReversecomplete functions for each stagger. Posting the solved pen here for anyone who might need it in future.

See the Pen ExNybqQ by vsaini603 (@vsaini603) on CodePen

 

@mikel: Thanks for the reference. 

  • Like 2
Link to post
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.

×