kmytor Posted June 19, 2020 Share Posted June 19, 2020 Hello, I am learning something about the new scroll, which I think is great the fact that it has been implemented. but I would like to know if I can get this result as in the attached link the image adjusts according to the window with respect to the scroll. if possible?http://torola.fwp.fastwp.net/fwp_project/where-worlds-collide-4/Is there an example of doing it? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 Hey kmytor. Yes, that sort of effect is definitely possible. Check out the demos in the ScrollTrigger docs for some inspiration & code hints. And if you have a specific question please feel free to ask 1 Link to comment Share on other sites More sharing options...
kmytor Posted June 23, 2020 Author Share Posted June 23, 2020 HI, I tried to scroll the scroll guide, but I can't, I understand that my structure is different but it should work, there is some way that the images are placed on top of the written content or that the written content can also be run with the scroll and that the let gallery occupies 100%, currently it is 50%, neither, markers: true, is visible . which is recommended for this process, Thank you, I hope you understand me See the Pen gOPmOGN?editors=0011 by kmytor (@kmytor) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 23, 2020 Share Posted June 23, 2020 Sorry, I don't understand how the site that you linked to relates to the demo that you posted. Are you saying that you want the images to move horizontally replacing each other when the page is scrolled vertically? And that whole time the text content is fixed? Please describe your end goal in more detail. Link to comment Share on other sites More sharing options...
kmytor Posted June 24, 2020 Author Share Posted June 24, 2020 Sorry, the first thing is that the scroll of the image gallery works for me, currently it does not work but I cannot understand why The second is that I would like to move the scroll to complete 100% of the window as in the image that I attach. Link to comment Share on other sites More sharing options...
kmytor Posted June 24, 2020 Author Share Posted June 24, 2020 well, if you can not this example as the attached image how can I make it work as in the example of the url that I sent in the first post?http://torola.fwp.fastwp.net/fwp_project/where-worlds-collide-4/ because the scrooll of my example does not work either Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 24, 2020 Share Posted June 24, 2020 Hey kmytor. I'd set things up a bit differently where you have both sections (the text and the images) separate but both fixed: See the Pen RwrgaZG?editors=1000 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
kmytor Posted June 24, 2020 Author Share Posted June 24, 2020 3 hours ago, ZachSaucier said: Hey kmytor. I'd set things up a bit differently where you have both sections (the text and the images) separate but both fixed: I think I am missing some of these libraries, should I put them all? shouldn't it only work with the core? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 24, 2020 Share Posted June 24, 2020 4 minutes ago, kmytor said: I think I am missing some of these libraries, should I put them all? shouldn't it only work with the core? You need the core + ScrollTrigger. I went ahead and updated the resources that are loaded. It had all of them because I forked our starter pen. 1 Link to comment Share on other sites More sharing options...
kmytor Posted June 24, 2020 Author Share Posted June 24, 2020 6 minutes ago, ZachSaucier said: You need the core + ScrollTrigger. I went ahead and updated the resources that are loaded. It had all of them because I forked our starter pen. Perfect, Thank you very much, I think it was a cache problem, it works for me thanks for your help, I am going to investigate more about how to put animations since I have the scroll ready and working. Total thanks Link to comment Share on other sites More sharing options...
kmytor Posted June 25, 2020 Author Share Posted June 25, 2020 Hi, again me and my experiences, hehehe How can I wonder what I'm failing I want to get the size of the hancho for the horizontal scroll to take I'm trying countSlideList take it as your high const slideList = document.querySelectorAll('ol.Slide li'); let countSlideList = slideList.clientWidth; gsap.to(".Slide", { x: () => -countSlideList, //add slideList ease: "none", scrollTrigger: { start: 0, end: countSlideList, //add slideList scrub: true, markers:true } }); See the Pen gOPmOGN by kmytor (@kmytor) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 If you do console.log(countSlideList) you can see that the value is undefined. I think you're wanting something like this? See the Pen ExPXMwK?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
kmytor Posted June 25, 2020 Author Share Posted June 25, 2020 15 minutes ago, ZachSaucier said: If you do console.log(countSlideList) you can see that the value is undefined. I think you're wanting something like this? oh! excuse me forget to see console. but if that's what I needed, but wooow you changed everything hehehehe I think I should do more things, I'm a newbie, I hope to learn more Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 1 minute ago, kmytor said: wooow you changed everything hehehehe It's mostly just detecting if the images have loaded and making sure to update the variable keeping track of the width of the content I bet you can understand most if not all of the pieces. Feel free to ask if you have questions. I also caught an error so be sure to check the most recent version. Link to comment Share on other sites More sharing options...
kmytor Posted June 26, 2020 Author Share Posted June 26, 2020 15 hours ago, ZachSaucier said: It's mostly just detecting if the images have loaded and making sure to update the variable keeping track of the width of the content I bet you can understand most if not all of the pieces. Feel free to ask if you have questions. I also caught an error so be sure to check the most recent version. I have a question where it comes from or just a name was put here:ScrollTrigger.addEventListener ("refreshInit", () => { //////refreshInit is the name or does it mean something else? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 26, 2020 Share Posted June 26, 2020 refreshInit is the callback that fires before a refresh (when the ScrollTrigger's values are updated) after a resize. See a list of all the events in the docs. 1 Link to comment Share on other sites More sharing options...
kmytor Posted June 26, 2020 Author Share Posted June 26, 2020 Hello, again me, A new question has arisen, I want to put animations on it but the way I approach it because it is not working, can you guide me? I don't know if I should do a foreach or something else 😅 See the Pen morMqa?editors=0011 by kmytor (@kmytor) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 27, 2020 Share Posted June 27, 2020 What's the goal? To fade images in as they come in the screen? I might use an intersection observer. It's possible with just ScrollTrigger but then you'd have to calculate the timings of each animation which might be difficult if you have images of varying width, especially if they are dynamic. See the Pen eYJErXG?editors=0010 by GreenSock (@GreenSock) on CodePen 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