Jump to content
Search Community

QuangTran

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by QuangTran

  1. Hi, Is the ".box" element have to be absolute positioned to work? I was having trouble with the carousel and each individual box in my code is relative positioned as there are some absolute positioned texts on it. I noticed that for the same gsap tween, the change in "transform: translate()" property I inspected in devtools is different between relative positioned and absolute positioned elements. EDIT: Okay, I forgot that absolute child element is positioned to the first non-static ancestors so the box can be absolute positioned as well. Still, I don't quite understand the behavior in the relative position case. Here is related pen: https://codepen.io/tranhongquang94/pen/XWpQjJz
  2. Hi, I was also having the same issue with scrollTrigger markers being pushed down after going back to the original page using barba transition, which leads to undesired behaviors on my animation. What I found is that the elements top position in the barba-container (the one barba switch between transitions) is pushed down, you can see that by logging getBoundingClientRect() in barba hooks and thus, leads to the pushed down markers. I guess scrollTrigger calculates the start and end positions based on these values under the hood (correct me if I'm wrong). One of the possible cause I found in barba docs is that during the transition, both containers of the previous and current page will exist at the same time on the DOM, so the elements in the current page may be pushed down by the elements in the previous page. Barba suggest to use data.current.container.remove() to manually remove the previous container and fix this issues. I used it in the afterLeave hook and it works just fine. Basically, I don't need to call kill() or refresh() before re-initialize the scrollTrigger and also I think it can works if you re-initalize it in afterEnter() hook as well and not neccessary have to be beforeEnter(). The relevant section in barba docs can be found here: Barba. P/s: sorry for my bad English, it is not my first language and I'm still learning it.
×
×
  • Create New...