Brian-afk Posted June 10, 2021 Share Posted June 10, 2021 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 comment Share on other sites More sharing options...
Али К Posted June 10, 2021 Share Posted June 10, 2021 Hello @Brian-afk , Can you add a minimal demo ? 3 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 11, 2021 Solution Share Posted June 11, 2021 I imagine you're looking for something like this?: See the Pen XWMPLQg by GreenSock (@GreenSock) on CodePen I hope that helps. 1 Link to comment Share on other sites More sharing options...
Brian-afk Posted June 11, 2021 Author Share Posted June 11, 2021 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 comment Share on other sites More sharing options...
Brian-afk Posted June 11, 2021 Author Share Posted June 11, 2021 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 comment Share on other sites More sharing options...
Brian-afk Posted June 11, 2021 Author Share Posted June 11, 2021 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 comment Share on other sites More sharing options...
GreenSock Posted June 11, 2021 Share Posted June 11, 2021 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. 1 Link to comment Share on other sites More sharing options...
Brian-afk Posted June 11, 2021 Author Share Posted June 11, 2021 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 comment Share on other sites More sharing options...
GreenSock Posted June 11, 2021 Share Posted June 11, 2021 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! 1 Link to comment Share on other sites More sharing options...
Brian-afk Posted June 11, 2021 Author Share Posted June 11, 2021 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? 1 Link to comment Share on other sites More sharing options...
Brian-afk Posted June 11, 2021 Author Share Posted June 11, 2021 i cant seem to find the course on @Carl s page is it available somewhere else? Link to comment Share on other sites More sharing options...
elegantseagulls Posted June 11, 2021 Share Posted June 11, 2021 @Carl's courses are here: https://www.snorkl.tv/ -- they rock! or you could do something like this with scaleY See the Pen yLgMVpG by elegantseagulls (@elegantseagulls) on CodePen 3 Link to comment Share on other sites More sharing options...
Carl Posted June 11, 2021 Share Posted June 11, 2021 Thanks, @elegantseagulls! I appreciate your support. better links to my courses in my signature. 3 Link to comment Share on other sites More sharing options...
Brian-afk Posted June 13, 2021 Author Share Posted June 13, 2021 .,. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now