Jump to content
Search Community

Snapping doesn't work when GSAP and ScrollTrigger installed as module

gracefulXdegradation test
Moderator Tag

Recommended Posts

Hi everone,

 

I am new to Greensock and playing around with the recipies I have found in tutorials. I tried adding layered pinning from

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

 into React app. Pinning does work, but I have an issue with snapping. I am importing gsap and ScrollTrigger as module. Below is a simplified (no css classes) code

 

// src/index.js
import React from 'react'
import { render } from 'react-dom'
import { App } from './components/app'
import { gsap, ScrollTrigger } from 'gsap/all'

gsap.registerPlugin(ScrollTrigger)

render(
  <App />,
  document.getElementById('root')
)

// src/components/app/index.js
import React, { useEffect, useRef } from 'react'
import { ScrollTrigger } from 'gsap/all'

export const App = () => {
  const refSlide1 = useRef(null)
  const refSlide2 = useRef(null)
  const refSlide3 = useRef(null)
  const refSlide4 = useRef(null)
  const refSlide5 = useRef(null)

  useEffect(() => {
    const sections = [refSlide1, refSlide2, refSlide3, refSlide4, refSlide5].map(ref => ref.current);
    sections.forEach((panel, i) => {
      ScrollTrigger.create({
        trigger: panel,
        start: "top top", 
        pin: true, 
        pinSpacing: false
      });
    });

    ScrollTrigger.create({
      snap: 1 / (sections.length - 1)
    });
  }, [refSlide1, refSlide2, refSlide3, refSlide4, refSlide5])

  return (
    <div className={style.app}>
      <section ref={refSlide1} />
      <section ref={refSlide2} />
      <section ref={refSlide3} />
      <section ref={refSlide4} />
      <section ref={refSlide5} />
    </div>
  )
}

Full code can be found in the repo. npm install && npm run start would run it on localhost:3000.

 

I am working it around by installing GSAP and ScrollTrigger via script tag (see master and diff), and then it works. But I'd like to eventually figure out how to make it work with imports. Any tips on how what to look at?

 

Thanks,

Sasha

See the Pen mdVpJKZ by gracefulXdegradation (@gracefulXdegradation) on CodePen

Edited by gracefulXdegradation
updated codepen
Link to comment
Share on other sites

Hey Sasha. I just ran your project and it seemed to work perfectly. Am I missing something? I wonder if maybe you had an old/outdated version of ScrollTrigger cached? Can you please reinstall and see if it works? Use at least version 3.3.4 please. 

 

Again, I followed your instructions and I see that it's NOT loading GSAP/ScrollTrigger via a <script> tag (it's using imports) and the snap works great. I may be missing something obvious.

  • Like 1
Link to comment
Share on other sites

@ZachSaucier @GreenSock thanks guys. I have figured out that it's not an issue with modules or React.

I managed to reproduce it by just replacing scripts

 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js

with these

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js

in the example codepen. The rest of the code left intact.

Here's the updated codepen .

 

It reproduces on my oldish Windows 10 machine in latest Chrome and Firefox. However, when tested on iPhone, everything works as expected. So I guess it's machine specific issue and OS update would fix it.

 

Thanks

 

Link to comment
Share on other sites

I think I've found a similar issue, or at least, what seems to be a nasty bug on my setup.

 

As a test, I'm using my own codepen. 

See the Pen QWyNeXb by urbgimtam (@urbgimtam) on CodePen

 

If the system resolution is unchanged (100% resolution), the above codepen works.

However, if the system resolution is changed (for instance, 125% resolution - common for people with large/hires screens like mine) the pinning breaks completely. Even if the browser is refreshed, closed and reopened. Even after rebooting the machine already at 125%, the behavior was the same.

 

Also, even at 100%, if the browser's zoom is not 100%, it also stops working. 

Both Firefox and Chrome displayed the same issues.

 

Anyone has seen this behaviour?  Could this be from my code? Should I report this?

 

 

PS: I was actually losing my hair why it wasn't working in my main screen, and when moved to a smaller screen (with 100% resolution), noticed that it actually worked as it should.  This may be a somewhat big problem - you never know if your visitor has a hires screen...

 

  • Thanks 1
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...