Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Brian-afk

GSAP Image Wiping

Go to solution Solved by GreenSock,

Recommended Posts

Hey so I want a container that two images of same height and width but only one is visible at first !

When we scroll down, slowly the other image starts becoming visible (the other image does not scroll up, we can see some part of the bottom part of the image)

Ill say an example.

I have one image where we can see numbers (1,2,3) vertically(just an example of an image)

and another image which has (a,b,c) inside the image vertically.

So at first we can only see 1,2,3 so when we start to scroll the c part of the other image replaces nmber 3 part and slowly moves up ! 

I am trying to implement this in React!  i have found something similar to this ill copy the codepen and paste it here but i am not able to add images locally there in the code!

 this is that forum

Link to post
Share on other sites

I imagine you're looking for something like this?:

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

 

I hope that helps. 

  • Like 1
Link to post
Share on other sites

So if i need an image of a line with a logo also to move with the scroll , so that when the line reaches the top we can see the second image fully?
 

Link to post
Share on other sites

the line would be at bottom of the first image at first and then when we start to scroll, it moves up and below the line the other images visible part would start becoming visible! and yes this was what i was looking for!

 

Link to post
Share on other sites

and i am not able to scroll to the top if i change height of the section and i cant seem to understand why?, like i want the images to be in a container say of 584 px and 415 px like it should be a part of the webpage and not the entire webpage

Link to post
Share on other sites

If you need more help, @Brian-afk, please take the time to provide a minimal demo. We're happy to help with GSAP-specific questions but this isn't a forum where we provide free "made-to-order" solutions. Maybe just try taking one part at a time, like size the image the way you want. A lot of what you're talking about just sounds like regular CSS stuff. 

  • Like 1
Link to post
Share on other sites

Yeah sure ! I am sorry if it meant that way! I am struggling to understand what the gsap and scroll trigger part here has done! Is it like hiding one part of the image and when we scroll down the other image part becomes partly visible? if i could understand that part maybe i can edit it myself

the one you provided was perfect ! only thing is what if i want a line to actually go up simultaneously with the image? thats my doubt currently.. 

Link to post
Share on other sites
15 minutes ago, Brian-afk said:

I am struggling to understand what the gsap and scroll trigger part here has done! Is it like hiding one part of the image and when we scroll down the other image part becomes partly visible?

I put the image inside of a <div> that has overflow: hidden and then I'm simply animating the height of that container to 0% (from 100%). So it's clipping the image and revealing the one behind it. 

 

17 minutes ago, Brian-afk said:

only thing is what if i want a line to actually go up simultaneously with the image?

Sure, that's totally possible but I have no idea what exactly you want it to look like, what the line is made of (a <div>? SVG? image?) or where exactly it's supposed to line up, etc. Again, we don't really do "made-to-order" things here, but you can pretty much get any effect you want. I'd strongly suggest reading the docs and watching the video. If you want a full video course, @Carl has an excellent one here.

 

Good luck!

  • Like 1
Link to post
Share on other sites

Thank you so much! I actually came into gsap for just one thing and it seems i need this for many other things too! I honestly do  not anything about the functions of gsap like scroll triggers, it seems the best option is to see the course!

 

 

and one final quick doubt! the image when scroll ,like the height increasing it starts when the image reaches the top of the window, is it because it  is given start : top top?  what does these two top top do actually? one i gus is to activate when the top reaches the window top the other?

  • Like 1
Link to post
Share on other sites

i cant seem to find the course on @Carl s page is it available somewhere else?

Link to post
Share on other sites

Thanks, @elegantseagulls! I appreciate your support. better links to my courses in my signature. 

  • Like 3
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.

×