Jump to content
Search Community

Scroll Trigger Pinning Is Breaking On Window Resize or When Page Is Reloaded After The Animation Has Happened

pauljohnknight test
Moderator Tag

Recommended Posts

Hi,


I have a scrollTrigger animation when a section (.pin-section)  hits the middle of the view port. This section is pinned for the same amount of pixels as the section height using end: () => "+=" + document.querySelector('.pin-section').offsetHeight


During this pinning I have a star that basically keeps scrolling so the user knows to still scroll. This is done by using the .pin-section element as the trigger again and using the end: () => "+=" + document.querySelector('.pin-section').offsetHeight as the end value once again.

 

As well as the simplified CodePen demo, I've also uploaded the page to a subdomain here: https://ia.inset.agency/production/

 

The issue I have is if I re-size or refresh the window after the animation has been triggered it breaks the animation.

 

Note: The problem on the simplified CodePen version seems to happen if you resize the window when the animation is in-between the 'start' and 'end' markers, on the actual site link it seems to happen after the 'end' marker, but it's essentially the same thing happening each time. Also on the CodePen example it only happens on resize because when you refresh CodePen it seems to reset all of the positioning.

 

Any help would be really awesome.
 

// pin section in middle of screen
var pinMiddle = gsap.timeline({scrollTrigger: {
    trigger: ".pin-section",
    start: "50% 50%",
    toggleActions: "restart pause reverse pause",
    end: () => "+=" + document.querySelector('.pin-section').offsetHeight,
    pin: true,
    markers: true
}})

// parallax star
var prodStar = gsap.timeline({
    scrollTrigger: {
        trigger: '.pin-section',
        toggleActions: "restart pause reverse pause",
        start: '50% 50%',
        end: () => "+=" + document.querySelector('.pin-section').offsetHeight,
        scrub: true,
        markers: true
    }
})

prodStar.to('.parallax-star', {y: -250})

 

See the Pen vYKXaMq by pauljohnknight (@pauljohnknight) on CodePen

Link to comment
Share on other sites

  • 3 months later...
On 1/30/2021 at 8:04 PM, RobbieC said:

Can I ask if there was a particular reason why you used the backtick template literal on the scrolltrigger end property in your codepen above?

It's easier and I would argue more easy to read than 

'+=' + document.querySelector(".pin-section").offsetHeight

Especially if you have more complicated string templating.

Link to comment
Share on other sites

  • 3 years later...

I was having a similar problem, tried invalidateOnRefresh and scrollTrigger.refresh(). Nothing worked. On page reload the entire section was staying fixed even when I scrolled into other section.

 

To solve this change:

start: 'top top'

to

start: '50% 50%'
Link to comment
Share on other sites

20 minutes ago, steve-quadrant said:

I was having a similar problem, tried invalidateOnRefresh and scrollTrigger.refresh(). Nothing worked. On page reload the entire section was staying fixed even when I scrolled into other section.

Hi @steve-quadrant. What problem did you have exactly? This thread is 3 years old; I'd strongly recommend creating a new topic/thread and post a minimal demo that clearly illustrates the problem and we'd be happy to take a look. I have a strong feeling that the solution you suggested there (changing the start value) isn't really getting at the heart of the issue. It's hard for me to know for sure, though, because I can't see a minimal demo that illustrates the problem. One of those would be super helpful. 👍

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