Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kmytor

adjust scroll with respect to the image

Recommended Posts

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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.

 

demo.jpg

Link to comment
Share on other sites

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?

 

image.png.aa0dedc59f3a8d546d3a202c49709529.png

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

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

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

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

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

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

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.

  • Thanks 1
Link to comment
Share on other sites

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

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

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.
×