Jump to content
Search Community

Cassie last won the day on April 16

Cassie had the most liked content!

Cassie

Administrators

  • Posts

    4,944

  • Joined

  • Last visited

  • Days Won

    174

 Content Type 

Posts posted by Cassie

    Layered pinning from bottom (variation) with pinned video scrub

    in GSAP

    Posted

    Hi there! There are a lot of questions here and your demo is very involved.

    The best way to approach stuff like this is to strip things right back, remove react and tailwind and anything that could be causing confusion. Get the basics right, then build it up gradually again.

     

    Lets start here.

    Quote

    Dynamic height calculation. As you can tell I've hardcoded the heights in order to get a decent understanding of what is happening.
    This should be functions and calculated on dynamic height changes (as assets would need to be loaded in). Where should I start on this?

    Can you explain what you mean by this? What should be functions? I don't see any hard coded height, other than in the CSS. Your GSAP code is already nice and flexible. You can see that if we add some content into the orange panel rather than a fixed height, the pinning works as expected.

    If you're adding content in via JS, then it will behave exactly the same, with the small caveat that you'll need to let ScrollTrigger *know* that you've just changed the height. You can do this by calling ScrollTrigger.refresh()
     

    I've made a codepen demo as a starting point for you. If you're happy with this part of the question we can look at the video's. It would be very helpful if you could add the videos into this demo for me to show the issue.

     

    See the Pen QWPxBxX?editors=1000 by GreenSock (@GreenSock) on CodePen



    This feels like it's likely an issue with the order the ScrollTriggers are being created or called. Which is probably down to React, but let's get this working in codepen first, then when we know that it works and have surfaced any GSAP specific issues or confusion, we can sort it into components and pop it back into react-land. 

     

    Starry night landscape with meteor shower animation causing too much CPU usage

    in GSAP

    Posted

    Hi there!

     

    Thanks for the kind words.

     

    Yeah, canvas is usually better for stuff with lots of elements. Pixi is a library that uses canvas so it makes stuff a little easier than using the browser API directly. Your example is pretty simple though so maybe you could just skip pixi and use canvas?

     

    Here's a canvas demo that may help

    See the Pen abMMOar?editors=1010 by ninja1pro (@ninja1pro) on CodePen



    And a pixi demo (this is using old GSAP syntax - but it's using pixi to add images so that's helpful)

    See the Pen qBEJVeN by Koenie (@Koenie) on CodePen



    The pixi docs are good too
    https://pixijs.com/8.x/guides/components/sprites

    • Like 3

    Animating a SVG Mind Map (Nested Timelines?)

    in GSAP

    Posted

    Quote

    I've also just tested the position parameter from your link. It's working nice for each item animation. But I have failed to achieve to start the whole animation of the second category item earlier. It is always waiting for the previous item. Do I need something else here?

    I don't know what you've tried, sorry.

    If you show me what you've done (fork the demo above with new code) then I can take a look.

    Scrollproblem

    in GSAP

    Posted

    Hi there, thanks for your support and sorry to hear you've run into an issue. 💜

     

    I opened this site in safari and used the bookmarks and couldn't recreate this issue at all. It's also very hard (near impossible) for us to debug live sites.  

    Are you using ScrollSmoother? If so, maybe you could find out the exact steps to replicate the issue from the client, then try and see if you can replicate the issue on this codepen?
    https://cdpn.io/pen/debug/KKXZOyZ

    If you can we'll look into it. If not then I recommend layering in potentially problematic bits of your code until the issue surfaces so that you can give us a demo and a starting point to work from.

    ScrollTrigger Not firing

    in GSAP

    Posted

    Hey, I'm not really sure why this would make a difference unless either the text coming from the backend is dynamically injected later than page load or the class itself is added later?

    My guess would be that the fonts are loading later and causing a layout shift?

    maybe... 

    document.fonts.ready.then(function () {
  ScrollTrigger.refresh()
});


    If this doesn't help please give us a demo showing the issue. Thanks

2
3
4
...
189
Page 3 of 189  
×
×
  • Create New...