scrolltrigger in a div

[Lovestoned]

I used container div for my scroller...but I am having problems...if you check my pen you can see it...there is a space between gray and orange sections...I couldn't find example about that...I am missing something but need help...

 

thanks...

 

See the Pen ExNeGWJ by ersenturgut (@ersenturgut) on CodePen

[tailbreezy]

Hello there,

 

This space between the gray and orange panel is caused by pinSpacing. It is an option for the scrollTrigger that adds space in order to space elements in the DOM quickly.

 

 

If you remove it, you will have to push your remaining content by the same value you use in scrollTrigger.

 

Other than this, your rule tl.to('.text', {...}) will tween all your text classes at the same time (e.g when you reach your orange panel the text will be in its completed state).

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".gray",
    scrub: true,
    pin: true,
    pinSpacing:false,
    start: "top top",
    end:"500%",
    markers:true
  }
});

gsap.set('.orange', {yPercent:500})

 

[Lovestoned]

thanks for your reply tailbreezy but it is not working or I couldn't ...I want to make : when I click .text => #cont must animate to left:120px...because I want to make website menu under all content div...I want to slide #cont to left...thats all...

[tailbreezy]

Your #cont doesn't move because it has position:static (default).

If you want to move it on click you have to set it absolute, relative, etc.

 

It seems you are after a sidebar that translates the page content to the right.

 

var tl = gsap.timeline({paused:true, reversed:true})
.to("#cont", {
    duration:1,
    left:120
  });


window.addEventListener('click', () => {
 tl.reversed() ? tl.play() : tl.reverse()
})

 

[Lovestoned]

Ok I found solution with your help...thank you...but I have a little problem again...when I scroll on mobile there is kind of flickering if I call scrolltrigger...but if I remove scrolltrigger function there is no problem...what do you think...

 

here is my link:

https://elbielectric.com/yeni/budur.php

 

if you browse this link with mobile browser, you can see my problem...on desktop everything is ok...

 

 

[Lovestoned]

ok I found solution about flickering...I changed overflow property to : overflow-x:hidden overflow-y:auto

 

it is working...

 

 

[Lovestoned]

sorry problem still persists but with a small difference. when I scroll in first section there is no problem...addressbar not hiding but when I scroll second section addressbar hiding and when I scroll back to first section there is flickering at the top of the viewport...

 

I tried pinType fixed and transform, anticipatePin but nothing changed...

[Lovestoned]

Now I tried my link in iphone and there is so much flickering...there must be a solution about that issue...gsap team is professional and I am sure they've noticed this before...

 

mobile browsers addressbars drives people crazy...I changed css of html and body to overflow:hidden position:fixed but not changed... I couldn't find solution about scrolltrigger vs mobile...

[ZachSaucier]

@Lovestoned Please use the "fork" button on CodePen to create a new version of your demo, share it with us, and clearly explain the issue if you'd like our help debugging.

 

Apparently you made a new thread. 

 

[Lovestoned]

yes dear Zach...I asked with a new thread...because my problem has changed...