jonofyi

I think what semantically confused me is that there are two ways to make ScrollTrigger tweens. One that is from the ScrollTrigger namespace and one that "overrides" the core methods through the scrollTrigger object. I put that in quotes because it's likely not what happens, but that was my assumption watching the video on ScrollTrigger and perusing the documentation page while I was making my client's project. I respectfully disagree. This is my first time using gsap, so clearly I have a learning curve and my opinion is only from a seasoned developer coming with a fresh set of eyes onto a mature library. But, in react it's memory efficient to declare all of your objects on mount and then to use and modify them as needed. A prime example (in pseudocode) is this: import React, { useEffect, useRef, useState } from 'react'; // Assume gsap is loaded export default function App() { const domElement = useRef(); const refs = useRef({ timeline: null }); const [width, setWidth] = useState(window.innerWidth); const [height, setHeight] = useState(window.innerHeight); useEffect(setup, []); function setup() { refs.current.timeline = gsap.timeline(); window.addEventListener('resize', resize, false); return unmount; function unmount() { window.removeEventListener('resize', resize, false); } function resize() { const w = window.innerWidth; const h = window.innerHeight; setWidth(w); setHeight(h); timeline.clear(); // Change animation logic based // on viewport dimensions (i.e portrait / landscape) if (w > h) { // Move horizontally timeline.to(domElement.current.style, { left: 25 }); } else { // Move vertically timeline.to(domElement.current.style, { top: 25 }); } } } return ( <div ref={ domElement } className="app" /> ); } Perhaps the gsap way is to destroy the timeline and make a new one every time the page resizes? In the project I was working on (which brought me to raise these questions), the eventCallback method added flexibility for this use case. Though, it was unable to handle ScrollTrigger events like onEnter.

I updated the codepen with the correct usage and left commented out the onUpdate code I had originally posted with.

Ahh, got it. Thank you. I need to put the callbacks in the constructor of the timeline under the scrollTrigger options because they are scrollTrigger events, not Timeline events. I hadn't used onEnter in my code because I got it to work with the eventCallback('onUpdate', ...). But, it's redundant because it's being called more than it needs to be. I see now that all plugin related things are scoped to the scrollTrigger options. For some reason, that wasn't clear to me before. Tangentially, it would be great if you could chain events in the eventCallback like so: eventCallback('onStart onComplete', ...); Is the forum the right place to request new features?

I have a demo (attached) that has a series of ScrollTrigger enabled <div />s superimposed on a Three.js scene. I'd like to use a some of the superimposed elements to block the Three.js scene and "cut" to a different set of objects. I was able to achieve this by using timeline.eventCallback('onUpdate', ...), but it runs way more than it needs to. Also, sometimes on first scroll down the cube and sphere do not swap (I believe this is because both sets of timelines have eventCallbacks that are conflicting). Is there a way to target just onEnter and onBackEnter events? I tried passing onEnter as a string to the eventCallback, but I don't think it gets called.