Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About AnimatiCSS

Profile Information

  • Gender
  • Location

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

AnimatiCSS's Achievements

  1. Hi, thanks for your response. I imagined that it could not be done, but I wanted you to confirm it, in case there was some kind of hack that I did not know. Thanks!
  2. Hello, first of all congratulations on the great work with this library. When using GSAP + Locomotive Scroll, if I assign the data-scroll-section attribute in the sections to improve performance (as locomotive suggests) then, if we have a Scrolltrigger animation using .pin, it breaks. I imagine because it modifies the DOM by adding a parent above said section. What can we do to solve this problem? Here I leave a codepen with a demonstration of what I say: https://codepen.io/animaticss/pen/wvqGBMM Thank you!
  3. I have gotten it to work through events, this solution should be able to implement it. I just modified in the CSS the selector .expandable> div {} I removed the transition and assigned it by default height: 100px; Then I created a custom event called "recalc" to recalculate the position of the ScrollTrigger when launched. In APP2 I modified the animation (now it is done with GSAP) so that when the animation finishes we can launch what we need (dispatch of the custom event created by us); https://codepen.io/animaticss/pen/ExZrZmQ All the best!
  4. In that case, the approach I mentioned will not work. Maybe in your case you should play with the DOM events. For example, when APP2 is updated, launch the X function that updates your APP3 (i.e., launch ScrollTrigger.refresh ());) Then I try to mount a codepen with this solution in case it works for you. All the best!
  5. Hi! Yes, I mean exactly that, React Context API. Actually the focus of your code should be 1 app that contains components, and not a mix of different Apps. Is for some reason that focus in your code? Look here I have organized your code by components within a general APP. Now it is better focused to add the global context. If you give me more time, then I will add it in another codepen. https://codepen.io/animaticss/pen/PoWVwKm All the best!
  6. Hello! From what I understand, you want your app2 to finish opening or closing, another component (app3) makes a scrolltrigger.refresh() to recalculate its start and end positions. To inform app3 that app2 has finished animating, you can do so in a number of ways. For example, you could add a global context that has a state inside that is: const [changedHeight, setChangedHeight] = useState(false); This state determines a value throughout your website to inform you if the height of the website has changed. In app2, you access that global state and once you click to open that component, once it finishes opening, you could launch something like this: setChangedHeight(!changedHeight); At that moment, that value will change informing that the height has been updated on your website. It does not matter if the value is true or false, what matters is that it has changed. In app3 you should have a useEffect in your code and add the dependency on whether your changedHeight changed. Something like that: useEffect (() => { Scrolltrigger.refresh(); }, [changedHeight]); This useEffect will only be fired when the value of changedHeight changes. Another point, you have to correctly inform when your animation finishes in app2, maybe it would be a better approach with gsap, since when finished you can use a .call() to do: setChangedHeight (!changedHeight); Unfortunately I'm on mobile and I can't write code correctly, but I think this explanation can give you some ideas. All the best!