j0hannes

Is there a Codesandbox project with React and Scroll Trigger that I can riff of on?

whether I called it inside a setTimeout callback or in different parts of the lifecycle, the start-end markers don't seem to care.

because I forgot adding .current. Now the animation works with Refs. But the start and end values are still relying on where you refresh the page.

yes that's right. I've actually tried to call the ScrollTrigger.refresh() command from multiple locations. It never had any effect. Thanks. It's now registered under imports. I've also changed all the gsap.to() commands to target Refs instead of classnames. Both changes had no impact on the start&end markers unfortunately. And since using Refs the animation doesn't start at all anymore, so I reverted back to the commit I made just before. Speaking of commits - If someone would be kind enough to take a look at the project, I'd happily give a Github invite and a more detailed walkthrough. (And a tip if the issue gets resolved) --- It's something about changing the --scalefactor variable which represents the value of zoom on the root of the landing page that causes this. I've also tried using a styled-component instead of body.style.setProperty Inside of the useLayoutEffect of index.tsx. Changing it from: const scaleFactor = currentBodyWidth / baseWidth body.style.setProperty('--scalefactor', (scaleFactor < 1) ? scaleFactor.toString() : "1") To: setScaleFactor(currentBodyWidth / baseWidth) Which sets: const LandingWrapper = styled.div` zoom: ${scaleFactor} ` Didn't improve the situation ?

React.useLayoutEffect(() => { setTimeout(() => {}, 4000) ScrollTrigger.refresh() }) This is what I was looking for. Thank you however it didn't resolve the issue :/

I'm sorry, but I can't recreate it. I think the best I can do is to iterate the fact, removing the logic that changes the "--scalefactor" that represents the zoom value takes care of the issue (as shown in the video) . ... but I can't get rid of the scale-factor. Otherwise the site wouldn't be responsive. Is there any way to delay GSAP doing its thing? I've tried the useLayoutEffect as seen above. I've also tried conditionalising the useEffect, that houses the GSAP Logic with a pageHeightIsSteady variable, that is set true, right after I call: const scaleFactor = currentBodyWidth / baseWidth body.style.setProperty('--scalefactor', (scaleFactor < 1) ? scaleFactor.toString() : "1") // GSAP Scroll Animation React.useEffect(() => { if (pageHeightIsSteady) { //@ts-ignore gsap.registerPlugin(ScrollTrigger); gsap.to(".contentCardLeft", { x: 500, y: 500, scale: 0.6, // scale of card scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, markers: true, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // Email gsap.to(".sourceIconMail", { x: 580, y: 650, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // YouTube gsap.to(".sourceIconYoutube", { x: 450, y: 650, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // Twitter gsap.to(".sourceIconTwitter", { x: 250, y: 600, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // Wifi gsap.to(".sourceIconRss", { x: 550, y: 400, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // User gsap.to(".sourceIconPodcast", { x: 400, y: 250, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // Pix art gsap.to(".sourceIconPinterest", { x: 250, y: 350, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // right side // cards gsap.to(".contentCardRight", { x: -430, y: 550, scale: 0.6, // scale of card scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // Vimeo gsap.to(".sourceIconVimeo", { x: -450, y: 670, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // Instagram gsap.to(".sourceIconInstagram", { x: -550, y: 650, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // // arrow down gsap.to(".sourceIconPocket", { x: -650, y: 500, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // gsap.to(".sourceIconReddit", { x: -450, y: 200, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); // // stat icon gsap.to(".sourceIconFeedly", { x: -250, y: 450, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); gsap.to(".sourceIconBookmark", { x: -350, y: 280, scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iconAnimationStart}%`, end: `+=${animationEndValues.iconAnimationEnd}%`, scrub: 1, // animation - max speed bound // scrub: true // speed of animation equal to scroll speed }, }); gsap.to(".iPhone", { scale: 0.8, // scale of phone scrollTrigger: { trigger: ".PlasmicBringItAllTogetherSection_root", start: `-=${animationStartValues.iphoneAnimationStart}%`, end: `+=${animationEndValues.iphoneAnimationEnd}%`, scrub: 1, // animation - max speed bound markers: {startColor: "purple", endColor: "fuchsia"} // scrub: true // speed of animation equal to scroll speed }, }); } },[pageHeightIsSteady]); You can also have a look at the live page here: https://www.hubhub.app/ Sth else, that I want to note is that the two cards often have odd positions - but only on the live page ?‍♂️

I have a landing page that utilises the css "zoom" value (to scale it's content based on the screen-size). It takes a brief moment to calculate the correct zoom value. This happens in a useLayoutEffect on the landing page component. So right before it renders. I think a side effect of this is that the hight of the entire page isn't entirely reliable in the first few milliseconds when the page is loaded. This assumption would explain the problem I'm having: The animation starts too early or too late, depending on where I am inside the page when I hit refresh. I have the markers turned on, that signal me the start and the end of the animation. Their position is too far down or too far up. Depending on where I am, when I do the refresh (refreshing when I'm at the top of the page will bring the start and end values too far down) The start and end values rely on the hight of the entire webpage, right? And I think the zooming process changes the hight. An attempt at solving this was to delay the rendering of the component that houses the animation (and thus the gsap code) So maybe then GSAP does its internal calculations later, when the hight of the webpage is reliable. But this didn't solve my problem. Maybe there is another way to delay GSAP doing its thing? Or maybe my assumptions are wrong and something else is causing the problem? You probably want a look at the code of the animation, so here is a snippet: there are may different elements animated this way. (except for the iPhone image), their values are: start: "-=10%" end: "+=60%" (experimenting with the values (eg by using px values) is fruitless) Here is a video, where I show it in action https://www.awesomescreenshot.com/video/9767109?key=36310e15cbe8f26b1514abfc8031bca9