Jump to content
GreenSock

pauljohnknight

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

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

Thanks Zach that works a treat. 

 

Can I ask how that manages to pin the section as well? That looks super useful, but I can't quite get my head around it

Link to comment
Share on other sites

pin: true will pin the trigger for the distance of the ScrollTrigger :) 

Link to comment
Share on other sites

Thank you. I thought it was because you'd written the end value is a slightly different manner and it might have been an inbuilt method that was acting accordingly.

 

Thanks for clarifying and for the original answer. 

Link to comment
Share on other sites

  • 3 months later...

@ZachSaucier 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?

Link to comment
Share on other sites

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

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