Jump to content
Search Community

Pinned element jumps (watch video)

Jo Mourad test
Moderator Tag

Recommended Posts

Hey guys, 

 

i've been wondering why this happens... And only in a smaller resolution (i was able to reproduce with: 1070 x 635 px - have to refresh when scroll is PAST the trigger)

 

Here is the url: https://idylliq.ca/services/

 

 

My pinned element jumps to the left when i scroll. Any idea why?

 

 

Here is my code:

 

servicesTl = gsap.timeline({
			scrollTrigger: {
				trigger:".section-services",
				markers:true,
				start:"10% 50%",
				end:"bottom 70%",
				pin:".left-quote",
				onComplete: () => ScrollTrigger.refresh(),
				anticipatePin: 1
			}
		})
	}
	servicesTl.from(".left-quote span", 1, {opacity:0, ease: Power3.easeInOut})

	.to(".left-quote span", 0.5, {backgroundSize:"100% 100%", ease: Power3.easeInOut},"=-0.5")
	.to(".left-quote span", 0.5, {color:"#fff", ease: Power3.easeInOut}, "=-0.4")

edit: seems that my .left-quote starts with left:0; and then jumps to something like left: 167.875px; (depending on the size of the window i guess)

 

i know this is probably very broad, but thanks anyways!!

 

 

 

Edited by Jo Mourad
fixed video link!
Link to comment
Share on other sites

Hi Jo,

 

Your video isn't available, and I'm not sure what I'm supposed to be looking at on the URL, so a minimal demo would definitely help in figuring the issue out.

 

But if something is jumping, my initial though would be that you don't have some elements positioned correctly. I like to always to do this in my projects to avoid weird positioning issues.

 

* {
  position: relative;
}

 

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