[Run animation after render and on set scrollTrigger]

I meant more just to check my solution if it makes sense and wont make some problems later on 

[Run animation after render and on set scrollTrigger]

Thank you guys for your help!
 

Jacks solution is working perfectly!  

The issue i had left 😅 was that in my project, after render, animation was almost finished, so I had to put more delay but then it was too much delay for the scrolltrigger.
The Solution I found thanks to Cassie explanation was to pass info into react context when ScrollSmoother  was set and then set scrolltrigger afterwards
I have made a demo here https://codesandbox.io/s/falling-architecture-81tk2n?file=/src/App.js

It seems to work good but it would be nice if somebody could take a look if I am not imagining some stuff which later is gonna create more problems 
Thank you!

[Run animation after render and on set scrollTrigger]

I have managed to recreate it in here https://codesandbox.io/s/cold-glade-pcw2hr

 

adding 

 return () => smoother.kill(); // <- CLEANUP!

did not help 
If I do not use ScrollSmoother everything works perfectly.

 

 

[Run animation after render and on set scrollTrigger]

Thank you Jack again for trying to help!

 

I have disabled the strict mode  and I am having this issue. With strict mode on everything works as intended. 

Now i started disabling parts of the project one by one and I found that when I disable ScrollSmoother all animations are fully functional.

Probably i have something wrong in my ScrollSmoother set up which is misbehaving.

 

this is my set up

 

import "./App.scss";
import Header from "./layouts/Header";
import { Route, Routes } from "react-router-dom";
import AboutUs from "./pages/AboutUs";
import SideNav from "./components/navBars/SideNav";
import { useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { ScrollSmoother } from "gsap/dist/ScrollSmoother";
import Footer from "./layouts/Footer";
import MobileNav from "./components/navBars/MobileNav";

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

function App(): JSX.Element {
  useEffect(() => {
    let smoother: globalThis.ScrollSmoother = ScrollSmoother.create({
      smooth: 2, // seconds it takes to "catch up" to native scroll position
      effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly
      wrapper: "#smooth-wrapper",
      content: "#smooth-content",
      speed: 0.5,
    });
  }, []);

  return (
    <div className="App" id="App">
      <SideNav />
      <MobileNav />
      <div id="smooth-wrapper">
        <div id="smooth-content">
          <Header />
          <Routes>
            <Route path="/" element={<AboutUs />} />
          </Routes>
          <Footer />
        </div>
      </div>
    </div>
  );
}

export default App;

Any ideas ? 
Thank you!

[Run animation after render and on set scrollTrigger]

I can not recreate the issue in the Stackblitz.  have checked the versions of gsap and react and they are the same, even took the code from the working Stackblitz and placed in my project and its not animating after render. 
Can there be something with scrollTrigger? If I remove scrolltrigger the animation runs after render but of course it does not work on scroll.

[Run animation after render and on set scrollTrigger]

Thank you Jack for your help!

 

In your demo everything works perfectly and I have adjusted the code in my project by it, sadly i still can not make the animation run after render. I have no idea why its happening if I enable strict mode everything works perfectly, if I place setTimeout(() => { tl.play()}, 2000) after render and timeout all the elements just appear instantly. 
Any ideas? Thank you!

 

 

[Run animation after render and on set scrollTrigger]

Thx for the answer!

I have added timeline inside the gsap.context and now I am getting the following error  "Element not found:".

Small demo here https://stackblitz.com/edit/react-oflp9n?file=src%2Fstyle.css,src%2FApp.js,src%2FuseAnim.js

The example acts differently than my actual app as in the example the animation works after loading and not triggering when header`s center is in the top of the screen. In my actual app its the opposite the animation is not playing after render but working properly when the screen is scrolled up and down. Both have the same error  "Element not found:"

 

Thank you!

[Run animation after render and on set scrollTrigger]

Hi 

I have an animation set to run on ScrollTriger but I would like it to run when page loaded as well.

It works in strict mode in react but not in production or when strict mode is disabled.  
I would like to start animation after the page has loaded and on set ScrollTrigger.
How can I do that? 
Thank you !

 

useLayoutEffect(() => {

const tl: gsap.core.Timeline = gsap.timeline({

scrollTrigger: {

trigger: props.navbar,

start: "center top",

toggleActions: "reverse none none play",

},

});

let ctx: gsap.Context = gsap.context(() => {

tl.to(props.navLink, {

x: "0",

autoAlpha: 1,

duration: 1,

stagger: 0.2,

delay: 0.2,

});

}, props.navbar);

 

tl.play()

 

 

return () => ctx.revert();

}, []);

[Pin navigation to side of the screen in layered setup]

Thank you for the help akapowl and Rodrigo! Its all working now

[Pin navigation to side of the screen in layered setup]

Thx for the reply Rodrigo!

I have managed to make it work but I want to add a ScrollSmoother as well. As soon as I add ScrollSmoother the navigation is sliding away together with a layer . Is there a way to fix it together with ScrollSmoother? 

Thank you!

[Pin navigation to side of the screen in layered setup]

Hello!

I am making a website like in the codepen. I have the layers functional but I can not figure out how to pin a navigation bar to the side of the screen which would be on top of all the layers sliding on top of each other. So far I have only managed to pin the navigation to the first layer while the second layer is sliding on top of it making it invisible. 
Please let me know if you have any suggestions

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