Jump to content


  • Posts

  • Joined

  • Last visited


  • Birthday 02/19/1987

Contact Methods

Profile Information

  • Gender
  • Interests
    Web-design, Interactive design, photography, music

Recent Profile Visitors

2,257 profile views

DMIND's Achievements

  1. It seems that the correct solution is really using setTimeout or gsap delay call because of call order inside React hooks. I found a good article about hooks which says that "useEffect is called in a bottom-up fashion, so the effects resolve first in the children, and then in the parent." Asynced setTimeout called after all calls executed in stack that's why this solution is fine. We simply change order of effects execution and effect with scrollTrigger inside child component executes after initializing of scrollerProxy in parent - that's our goal! Thank again Zach. I love GSAP and this forum!
  2. Wow. Thanks a lot Zach for such fast answer! This little trick fixes everything. I've also tried to use setTimeout with 0ms delay and it also works fine. I spent about 8 hours fixing it... Damn (. I thought that something is wrong with call order inside React's parent-child relations. Maybe there are React fans on board who know how to provide React'ish solution.
  3. Hello guys. Please help me with some strange behavior. I have parent component (React) where i initialize ScrollTrigger.scrollerProxy with Locomotive Scroll as you recommended in docs (scrollerProxy). If i try to use scrollTrigger inside that parent component (using useEffect) - everything works fine. But if i use scrollTrigger inside child component and provide the same scroller element (with id #smooth-scroll) then i have an issue. I've already tried: to call ScrollTrigger.refresh() inside child component; make reference (useRef) to locomotive instance in parent component and pass it to child via props; make reference to scroller element using useRef inside parent and pass it to child via props; to initialize ScrollTrigger.scrollerProxy with Locomotive Scroll inside child component - this works, but if i have bunch of elements which calling this initialization - i have terrible performance issue. So i think the best way is to provide only one initialization inside parent (i.e. page) and pass it somehow to child components. Link to Codesandbox (to see smooth scrolling click "Open in new window" icon at top right in browser panel). Maybe someone else have the same problem? What i do wrong in this case?
  4. This is exactly right solution which i try to find. Really simple way! Now animation works awesome & superfast! Thank you very very much Carl!
  5. Ok. Now i see what's wrong in my code logic. But i don't know how to write my functions for proper work. Should i use IF conditions or pass parameters into my functions or something else to animate worklmgContainer to className "expanded" & then select this className & animate back to original class? Any ideas?
  6. Hello Carl, Jonathan & all GSAP crew. First of all I wanna tell you HUGE THANKS for your awesome library. GSAP is the best one for web animation. W3C should add it for standarts of HTML5 or HTML6 =) Now about my strange issue. For my project i used scrollTo plugin & TweenMax.to className. Animation works fine when you click once or twice on image. But if you click a few more times animation starts glitching. And few more times & browser hangs off. I have 10 images on page & when you click on every image to expand it animation starts glitching too. Maybe it's problem with logic of my code or something else. I created a small codepen demo to show you my problem. Please help me to solve it.