scrolling is not working properly

[Aman14800]

I am creating a smooth scroll section, but I'm facing an issue where the content and image are not changing together smoothly, and the scroll is not happening smoothly. Additionally, sometimes there is extra white space at the bottom. Please help me.
 

See the Pen jOjVogX by voksayxe-the-vuer (@voksayxe-the-vuer) on CodePen.

[mvaneijgen]

Hi @Aman14800 welcome to the forum! 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Seen that you have an animation in mind that can only advance to the next slide if the previous one has finished playing I would build one timeline (with one ScrollTrigger). 

 

Loops are great! But you first have to know what and how you have to loop your elements before you can implement them. Personally I like to write out my animation by hand, eg item #1 moves out then #2 moves in at the same time with image #2, ect when that animation if fully working I copy my work and then I start to look for patterns which I then can add in to loops. I've restructured your pen and removed ScrollTrigger and created one timeline with GSDevTools (a premium plugin you can use for free on Codepen 🎉). My advise write out your animation like this and then come back here when you're happy with it. 

 

If you want some tips check out a post I wrote why working like this is important

 

Also check outer getting started guide https://gsap.com/resources/get-started/ it walks you through the most important tools of GSAP 

 

See the Pen QWXdWaR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

[Aman14800]

Hi @mvaneijgen , thank you for your response. I have put the code into a loop, but it is not working correctly yet. The animations are not happening one after the other. I am new to GSAP; please help me with this. 

See the Pen jOjVogX by voksayxe-the-vuer (@voksayxe-the-vuer) on CodePen.

See the Pen jOjVogX by voksayxe-the-vuer (@voksayxe-the-vuer) on CodePen.

please help 

[mvaneijgen]

You should NOT put them in a loop! First focus on just the animation, remove ScrollTrigger, remove loops. Focus on what you need to happen and worry about the rest later. When you got that ready, click the fork button and try to see if there is a pattern in your code, but you can only do that if you have a working version and you use that as a reference. 

 

See the Pen KKjawXN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Aman14800]

Hi @mvaneijgen, I have updated the code. Please check it.

See the Pen jOjVogX by voksayxe-the-vuer (@voksayxe-the-vuer) on CodePen.

[mvaneijgen]

Works great right! Now you can see line 20 - 23 are the same as 26 - 29, so if you were to build a loop, that is where you would build it. But before you do this COPY you work! (you can click the "Fork" button in the lower right corner and Codepen will create a copy) Then you can compare the two then start adding the loop and see if something breaks, if it does you can do look at your working version what is going on. I would highly recommend enabling GSDevTools, such a handy tool when debugging animations. Hope it helps and happy tweening! 

[Aman14800]

@mvaneijgen - I have updated the code and made it according to how the animation should work, but now it needs to be adjusted for scrolling. Please help me.

[mvaneijgen]

That is the best part! Just add ScrollTrigger and everything just works!

 

See the Pen vYqgOYE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Aman14800]

hi @mvaneijgen -  I am using this code along with ScrollSmoother, but the content part is overlapping. That's why I used visibility, but when I scroll, the page changes suddenly. Can you please help me?

See the Pen PorWQZN?editors=0010 by voksayxe-the-vuer (@voksayxe-the-vuer) on CodePen.

[mvaneijgen]

I would start by updating all plugins to their latest versions, you're loading versions 3.12.2 and we're currently at version 3.12.5. When you have any issues with your ScrollTrigger remove all reference to it and inspect your animation with GSDevTools to check if it is doing what you want to happen on scroll. 

 

The below code seems weird to me. Why would your animate .from() and .to() the same values?, also you tell the second tween to start - 1 second before the previous tween, but the tween before it is the start of the of the timeline, so you tell it to start at - 1, but a timeline always starts at 0, so what you tell it to do is impossible. 

tl.fromTo(
      ".tc-media-split__right-image[data-index='1']",
      { opacity: 1, visibility: "visible" },
      { opacity: 1, visibility: "visible" }
    );
    tl.fromTo(
      ".tc-media-split__left-content_wrap[data-index='1']",
      { opacity: 1, yPercent: 0, visibility: "visible" },
      { opacity: 1, yPercent: 0, visibility: "visible" },
      "-=1"
    );

 

Personally I would remove all opacity:0 from your CSS and just ALL the items visible by default instead of doing all .fromTo() animation, just use .from(). GSAP is smart and will just animate to opacity: 1 if you tell it to animate .from() opacity: 0, because 1 is the browsers default. If you then find that you see a flash of your content before GSAP has loaded check out our FOUC post https://gsap.com/resources/fouc/

 

Hope it helps and happy tweening! 

[Aman14800]

I used this property because we need to show one as active by default, and I removed opacity from all of them.

[Rodrigo]

Hi,

 

I'm not 100% of what you're trying to do, but maybe these demos can provide some inspiration and a good starting point:

See the Pen jOjMmjj by GreenSock (@GreenSock) on CodePen.

 

See the Pen gONMJPG by GreenSock (@GreenSock) on CodePen.

 

See the Pen wvYVjvb by GreenSock (@GreenSock) on CodePen.

 

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

 

See the Pen pomvabo by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[Aman14800]

Hi @Rodrigo  - I want the illustration and the text to change together, but it's not working. When we scroll, both are not changing together. Please help me with this.
When I scroll once, it should change. 

See the Pen jOjVvKm by voksayxe-the-vuer (@voksayxe-the-vuer) on CodePen.

[Aman14800]

anyone please help on this

[mvaneijgen]

That requires a whole different tools. ScrollTrigger is build to hook an animation to the visitors scroll bar, so the scroll bar in a way becomes like the progress bar of a video on YouTube. What you want is watch for scroll events and then do an animation, that is where Observer plugin comes in with it you can watch for scroll events and then do logic based on that https://gsap.com/docs/v3/Plugins/Observer/

 

I've written a whole post how to work with that and do exactly what you want, check it out. Hope it helps and happy tweening! 

 

 

[Aman14800]

I want both the image and content to change together, but I've applied the same animation to both. When I use the Observer plugin, it doesn't work properly. When I'm using it, both aren't changing together.

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Aman14800]

See the Pen jOjVvKm?editors=1000 by voksayxe-the-vuer (@voksayxe-the-vuer) on CodePen.

I have only added the demo code.

[mvaneijgen]

This still uses ScrollTrigger which does not reflect the resources we've shared with you to use the Observer plugin. Please share your latest attempt at using the Observer plugin. 

 

If you're just looking for someone to build it for you, I'll refer you to our Jobs & Freelance forum https://gsap.com/community/forums/forum/15-jobs-freelance/ there someone will happy to build this logic for you! Hope it helps and happy tweening!