Jump to content
Search Community

ScrollTrigger bug on reload or resize + possible bug with pinReparent: true + unable to do a horizontal scroll.

romain.gr test
Moderator Tag

Recommended Posts

Hi, I'm currently working on a website using SrollTrigger and I'm having a couple of issues.

 

Here is the website https://www.16saintgeorges.ch/demo/

 

Problem 1 :

 

At some point I'd like to scroll horizontally some kind of slider using scrub, what I'm trying to do is to calculate the hidden part of the slider and on scroll change the x value, here is the code :

 

$('.slider').each(function(){

	var $thisSlider = $(this);
	var $thisSliderTrigger = $thisSlider.parents('.section--slider');

	gsap.to($thisSlider, {
		scrollTrigger : {
			trigger: $thisSliderTrigger,
			//markers: true,
			start: 'bottom bottom',
			end: '500vh',
			scrub: .5,
			pin: true,
			pinReparent: true,
			invalidateOnRefresh: true,
			onEnter: function(){
				setHeight();
			},
			onLeave: function(){
				setHeight();
			}
		},
		x: function(){
			var sliderW = $('.slider').outerWidth(true) - $('.slider-wrapper').outerWidth(true);
			return '-' + sliderW + 'px'
		},
		
	});
});

As you can see I use a function to get the hidden part of the slider, it seems to be pretty logic to me but for some reasons, it doesn't calculate properly the hidden part of the slider. It's always different, you'll see if you resize the page, there is something wrong going on and I can't figure out what.

 

Problem 2:

I've been using scrollTrigger to do multiple parallax effects on images, it seems to work properly on most of them but on one of them the triggers are not where they should be, don't know why , I assume it's because up in the page there is a "pinReparent: true", and I have the feeling it's breaking slightly anything below that.

To see the problem you need to click on the switch button (scroll a bit in the page then on the left), If you click on the switch button, you'll end up on the other side of the website (the light side), scroll to the bottom and just before the footer there is a section with just one image, I've added the markers so you can see that it's not well placed. The code says : when  the top of .split-img hits the bottom of the viewport then move the img inside to 10vw (with scrub). I've been using that trick for other part of the website and it works perfectly.

 

here is the code for that part:

 

gsap.to('.split-img .img-cover', {
	scrollTrigger : {
		trigger: '.split-img',
		markers: true,
		start: 'top bottom',
		// endTrigger: '.slider',
		// end: 'top top',
		scrub: .1,
		//pin: '.section--2'
		//invalidateOnRefresh: true
	},
	y: '10vw',
	// duration: 3
	
});

 and the area :

821332785_Screenshot2021-03-30at16_57_05.png.8f92767496d589cc4f8f12de752027e4.png

 

Problem 3:

 

On reloading the page (by clicking on the reload icon in the browser), all the scrollTrigger are broken, but when I reload the page by reentering the url and hitting enter, it's working. Not sure what's going on.

 

Hope everything is clear. Thank you

 

 

 

Link to comment
Share on other sites

 

Hey @romain.gr

 

The issues you mentioned can have several different problem-sources.

Debugging a live website with possibly thousands of lines of code is quite a bit out of scope for what can be offered for free as support in this forum.

 

It is much more likely for you to get help with your issues if you try to isolate them, break them down to the minimal required code and for each create a minimal demo for us to work with. In many cases, breaking things down will also help finding the core of the issue yourself.

 

If you explicitely want someone to help fix that live-website though, one option could be to look for someone to help you in the Jobs & Freelance forum.

 

Edit:

With regard to the 'fake'-horizontal scrolling;

There are a couple of demos on the ScrollTrigger demos-page for something like that, which could serve as inspiration.

 

 

  • Like 4
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.
×
×
  • Create New...