Jump to content
Search Community

Kovsky

Premium

  • Posts

    30

  • Joined

  • Last visited

 Content Type 

Posts posted by Kovsky

    Animation do not trigger on first render

    in GSAP

    Posted

    thank you for your time.

    It's ok to get the 502 badgateway 

    image.png.ff175db3ee562dbcadd1cc221a00eb5b.png

     

    you need to choose the tab with the 8000 port

    image.thumb.png.19a2e9be795df5eac09f448c3d85d4f1.png

    but the most important part, it's working with this workaround

    Shawshank Redemption GIFs | Tenor  

        setTimeout(() => {
      gsap.to(splitIntroPresentation.lines, {
        scrollTrigger: {
          trigger: refIntroPresentation.current,
          start: " center center",
          markers: true,
          id: "test"
        },
        duration: 2,
        ease: "power4.out",
        y: 400
      });
    }, 10);

     

    Thank you Cassie, Thank you Jack

     

    • Like 1

    Animation do not trigger on first render

    in GSAP

    Posted

    Ok last try for me, it's the smallest demo i can provide --> https://codesandbox.io/s/nifty-waterfall-6ig9mn?file=/src/features/home/components/SectionPresentation/index.tsx

     

    No Redux, no Styled Components, no GraphQl,  just 2 classic components and a layout. I hope it is not too much code.
    Maybe i should stop  try to use Gsap with React ?
     

    Quote

    I'm just curious - if you use a .to() tween instead of a .from() tween (regardless of the values), does it work? Is it ONLY the .from() that won't work? 

    i've tried this 10 times since you first mentionned it few days ago

     

    Quote

     

    Don't forget to register the ScrollSmoother plugin too.

    it's done thank you.

     

    Thank you for the help.

    • Like 1

    Animation do not trigger on first render

    in GSAP

    Posted

    Ok i did some cleaning into those files and let me clarify the organisation.

    1.  ./gatsby-browser.js or ./gatsby-ssr.js setup a provider for Redux
    2. ./pages/index.tsx  display my layout and 2 components
       image.png.1425249b6bca34eeba1ae98dd2016f3f.png
    3. ./components/Layout.tsx setup the css and js style container + add Scroll Smoother
       image.png.cc53e6e6dcb0815035b8380bc68fc7e4.png
    4. ./components/GsapScroll.tsx  is just a wrapper for ScrollSmootherimage.png.c12de80722c22ad7d3f87792decd842d.png
    5. Finally ./features/home/components/SectionPresentation.tsx where the animation is setup  image.thumb.png.2a1a9799802d0920d3d0f9086bfd0a01.png

    Thats all the files used in this demo. I hope it's clearer.

    https://codesandbox.io/s/nifty-waterfall-6ig9mn?file=/src/features/home/components/SectionPresentation/index.tsx

    • Like 1

    Animation do not trigger on first render

    in GSAP

    Posted

    Hi Cassie,

    I've finally found that i can import a project into CodeSandBox 🥳

    I've made a little bit of cleanup, in my index page and kept only 2 sections (to be able to scroll).
    The animation that doesnt work propertly is defined in SectionPresentation.tsxcomponent (https://codesandbox.io/s/intelligent-gates-pqu5jc?file=/src/features/home/components/SectionPresentation/index.tsx)

    I hope this is minimal enough so i can make your whole damn day. 🤗
    Let me know if there is anything else i can do.

    Thanks a lot.

    Animation do not trigger on first render

    in GSAP

    Posted

    Hi,

    I am currently trying to animate text with scroll trigger + gsap scroll smoother on a Gabtsy(React) website.

    My problem, is that on the first render, the animation doesn't work properly, it just goes from 0 to 1 opacity without transition, but if i just had a simple console.log in my code, i got a second render, and then everything is fine. 
    Here an extract of code and a link to my github repo. I am sorry it's hard for me to build a minimal code demo for this proiblem.

    Thank you all, have a great day.

     

    https://drive.google.com/file/d/1FG_d6FBdlIiNnWln9YPY__sCExuO1m51/view

     

     
      useEffect(() => {
        const splitIntroPresentation = new SplitText(refIntroPresentation.current, {
          type: `lines`,
        });
     
        new SplitText(refIntroPresentation.current, {
          type: `lines`,
        });

        gsap.from(splitIntroPresentation.lines, {
          scrollTrigger: {
            trigger: "#wrapper-svg",
            start: ' center center',
            markers: true,
          },
          duration: 2,
          y: 200,
          ease: "power4.out",
          delay: 0,
          skewY: 10,
          stagger: {
            amount: 0.4,
          },
        });
     
        console.log('test')
     
     
      }, [])


    Complete file here : 

    https://github.com/ptrkvsky/drawme-web/blob/main/src/features/home/components/SectionPresentation/index.tsx

    React - Sharing timeline throught multiple components

    in GSAP

    Posted

    Hi,

    Thank you for your answer. Just to be sure to clearly understand you.  I can go in a file and do something like this

    contextTimeline.addlabel("one-animation").to(.....) 
    and in another one

    contextTimeline.from("#anId", {opacity: 0}, "one-animation-=2")

    And another thing i was asking to myself, do i have to update this context timeline with something like this, everytime i add another part of the animation (samet thing if i use redux)

    setContextTimeline(contextTimeline)

     

     

    Last night i went crazy and i splited my timelines, one masterlayout timeline, onemaster tl for index etc....

    Here is an exemple for my layout's animations https://github.com/ptrkvsky/blog-v2/tree/master/src/animation/layout

    and here where i build it. https://github.com/ptrkvsky/blog-v2/blob/master/src/components/Layout.jsx

    Does it seems a good way to do it too ?

    But i will consider using redux for this, i use the old version at work (3.0) it will be a good way to test those new features.

     

    Thank you again.

    PS : It would be so nice to get some github repos with simple websites with good practices for React/Gatsby/Next/Nuxt

    React - Sharing timeline throught multiple components

    in GSAP

    Posted

    Hi guys,
    I am currently rebuilding my website and i am asking myself what is the bestway to share one timeline through multiple components ?
    let's say i have this architecture

    --Layout

    ----Header

    ----Component1

    --------Component2

    --------Component3

    ----Footer

     

    And i want part of my header timeline starting after the one executed in component3 ?

     

    Currently i am using context but it feels a bit strange to me 

    Provider.js

    const [globalTimeline, setGlobalTimeline] = useState(
        gsap.timeline({ paused: true })
    ) // Global Timeline for animation
    <myContext.Provider
    value={{
     
    globalTimeline,
    setGlobalTimeline: tl => setGlobalTimeline(tl),
    }}
    >
    {children}
    </myContext.Provider>

     

    Layout.js

    useEffect(() => {
    globalTimeline.addLabel('start'')
     
    globalTimeline.play()
    }, [])

     

    I call my context in every component and add my animation to the globalTimeline.
    Thank you

     

     

    Super Mario World like animation

    in GSAP

    Posted

    18 hours ago, ZachSaucier said:

    Hey caio1985,

     

    What you're trying to do will be very easy using a new plugin that's introduced in GSAP 3. We're hoping to release GSAP 3 within the next week! If I were you I might just hang on and try using that.

    Can't wait for this ! 

    Thank you guys

    And keep us updated on your APP OP, i would love to see the result

    • Like 1
1
2
Page 1 of 2  
×
×
  • Create New...