Jump to content
Search Community

Hugo Priet

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by Hugo Priet

    ScrollTrigger instance in React Component doesn't recognize the scroller and needs window resizing to fire.

    in GSAP

    Posted

    Hi @OSUblake, thank you for your quick answer! Here you go , I updated the minimal one and here's the issue : when you add an element to the collection, it doesn't toggle the "active" class based on the trigger when rendered, only if I resize the window. It works perfectly with a static array.

    Here it is:

    See the Pen VwMNweb?editors=0100 by smoothdev35 (@smoothdev35) on CodePen

    ScrollTrigger instance in React Component doesn't recognize the scroller and needs window resizing to fire.

    in GSAP

    Posted

    Good morning (or whatever), mighty wizards! I'm trying to reproduce a UI animation I found on Dribble with React & Greensock (as per it is my hobby), and I'm using FLIP and ScrollTrigger. So far so good on the FLIP part because it is properly amazing, but I'm having a bit of a struggle with a specific ScrollTrigger instance.

    Let me explain: I have a collection of (selected) items in my app state, and I render them starting with a FLIP animation inside a scrolling container. I have state values linked to css custom properties to update things like opacity, pointer-events, and in this case the overflow property of the container.

    This way, the element can FLIP into its container, and then revert to overflow : scroll because obviously.

    Inside my selected item component, I set up a ScrollTrigger instance with ScrollTrigger.create in order to have only the three items in view to toggle "active" class during scroll. Here's the main issue: I struggle to understand why, and I've been on it for a while, the main idea works flawlessly because I tried to minimally reproduce it here:

    See the Pen VwMNweb by smoothdev35 (@smoothdev35) on CodePen

     

    But! In my complete demo, the trigger only seems to fire if I resize my codepen window! Going through the forum, I figured it meant the trigger is reacting to the body rather than the selected scroller. I'm not sure if it has to do with forwarding refs, memoizing something, persist something through re-render,  some obscure hook I'm unaware of, my styling changes based on state, or if it is simply a blatant beginner mistake I'm not able to see! Either way, I would be extremely thankful if someone could help me on this one!

    See the Pen BawJgWe by smoothdev35 (@smoothdev35) on CodePen

    Keep position/progress of scrub animation on resize

    in GSAP

    Posted

    Hi, I'm trying to animate cards on horizontal scroll inside a dom element (not the viewport):

     

    I have a single timeline and a scrolltrigger with a dom element (container) as scroller.

    The animation of the cards works with the scrubbing perfectly, but when I resize the screen, the start position for the animation

    seems to shift and offsets the whole thing. I tried setting a function for the start value, and tried with the infos on the following thread,

    but I can't seem to resolve the issue.

    Any help greatly appreciated!

    Cheers.

    See the Pen QWKvyeB?editors=0010 by smoothdev35 (@smoothdev35) on CodePen

    Pinned layers in both directions

    in GSAP

    Posted

    Hi @ZachSaucier!

     

    As simple as the underlying logic might seem in the end, it took me some time to understand how to animate clipping with the hidden overflow containers and translations! 

    Here's the finished demo pen (second image and polishing coming later in prod), let me know if there are apparent issues in my implementation:

     

    Thanks again for helping me get there!

     

    Cheers,

    Hugo.

    • Like 3

    Pinned layers in both directions

    in GSAP

    Posted

    19 hours ago, ZachSaucier said:

    Ah, I see from your Twitter post that you're trying to recreate this website. I'd set that up a good bit differently than the demo above.

     

    I'd create one big timeline that does all of the image transitions (i.e. clipping) one after another. Then I'd hook that timeline up to a single ScrollTrigger that goes for the duration of the sections. In their case they just fixed the position of the image container but if you need "regular" content above or below you could just pin it instead.

     

    Hi! This is obviously a little more complex than what I can do so far, so could you enlighten me just a little bit? 

    What exactly do you mean by 'clipping'?

    Are you referring to the sequencing of transitions in the timeline, or to the the image transitions themselves?

    As for hooking the tl up to a single ScrollTrigger, I'm a bit confused about how to use a single scrolltrigger for all the sections, and how to pass the duration of the sections as a parameter for my tl.

    I'm trying to wrap my head around the whole thing because I want to achieve it, thank you very much for your help!

    Pinned layers in both directions

    in GSAP

    Posted

    Hi fantastic people of Greensock! I'm a big fan, and a shockingly green member.

    I'm wrapping my head around ScrollTrigger, and I'm trying to achieve an effect like the one here: https://www.easytigerfilms.fr/en/actualites

    My codepen demo only deals with one image for now. I've pinned the images so the basic overlay effect works when scrolling down, but when I scroll up (logically), the translation occurs backwards.

    I'm stuck there: I don't know if I should use disable()/enable(), create two triggers, toggle classes..

    I would like the active image to stay fixed in the frame while the following image translates on top, no matter if it comes from above or below.

     

    If you have any idea of how I could get there and what I'm missing, that would be highly appreciated!

     

    Kindly,

    Hugo.

    See the Pen abNMeYp by smoothdev35 (@smoothdev35) on CodePen

×
×
  • Create New...