gracefulXdegradation

@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 https://codepen.io/gracefulXdegradation/pen/mdVpJKZ. 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

Hi everone, I am new to Greensock and playing around with the recipies I have found in tutorials. I tried adding layered pinning from this example 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