Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About nullhook

  • Rank
    Advanced Member

Recent Profile Visitors

347 profile views
  1. I'm animating a div in a timeline, however i'd like to perform some action in the middle of it. I tried `onComplete` but looks like that only works when timeline ends. Ideally, I'd like to add perfromAction on the second timeline when the div's x value reaches to 100% tl .to(div, 1, { x: 0 }) .to(div, 1, { x: '100%' }) .to(title, 1, { height: 0, opacity: 0, y: -50 }, '<=0.5');
  2. Adding a refreshPriority solved the odd behavior! My ScrollTriggers are in order though so wondering why I need this?
  3. Great explanation! I'm having issues on this on my codebase. I've done some debugging myself and happen to found out these: 1. The start of the first ScrollTrigger of logo starts with the end of the window.innerHeight — For ex, If my window height is 947px the start is 940 and end is 940+logoHeight. This seems weird, no? 2. If set pin: true on logo ScrollTrigger the top and end are correct but the animation doesn't work as expected and original pinning of the container is all screwed. Also, the top now starts with 0.001 and not exactly 0 (this is if I set pin: true). What's with the odd .001 value? 3. If I change the first ScrollTrigger's (the container one) end to "+=400%" or any number, the top and end of logo ScrollTrigger also has a side effect on this — For ex, if my window height is 947px the start is 3788.001 4. I tried setting the start string manual like this: start: () => 'top -0' and still my logo's ScrollTrigger start value is 947 and end is 940+logoHeight Edit: Seems like the second ScrollTrigger picks up the start value of the first ScrollTrigger. If my first ScrollTrigger ends at 947px then my second one `top -0` basically is 947px instead of 0. What's going on? Any help on this would be highly appreciated.
  4. This works, yea! A few questions I have: 1. Why do you need invalidateOnRefresh when ScrollTrigger automatically re-computes on resize? 2. I don't quite understand what the start function is doing. The index is useful in what way here? isn't index the position in the array and not visually. 3. Why do we need another timeline and scrolltrigger? Is it not possible to utilize the previous one?
  5. Looks like the above solution is helpful if you're in the normal document flow My divs are out of the normal document flow and are being translated using timeline so it has to be integrated within the timeline somehow.
  6. Loving gsap so far! I have an absolute position div which has nested svg. I'm trying to animate it's height to 0 simultaneously as I move the panel's Y position up. I had to play around with the duration of this because it needed to end earlier than the panel's Y position. It's not super accurate but you can see it jiggle a bit and if I change height or svgs I have to find the duration sweet spot. The duration seems off on diff screen sizes* Is there a way where I can make this accurate?
  7. Ok so that worked. I don't get why #container doesn't need absolute positions but .panel does.
  8. New pen below: Do you notice the `.content` div is rendered top of the `#container` div. My expectation would be it would render below the .container div. https://codepen.io/nullhoooook/pen/poyLKdP
  9. Hi Zach, When I add elements as an ancestor to the pinned element it gets rendered at top and this make sense because the pinned div is basically a fixed div with computed height. However, I'd expect ancestor elements to be rendered in the normal document flow. How can I go back to normal document flow with ScrollTrigger? Do I have to grab the height of the pinned element and push it down manually? There must be a ScrollTrigger way of doing this. Test case: https://codepen.io/nullhoooook/pen/wvGyRqZ
  10. Where do you go about filing a bug report with Chrome?
  11. I ran into similar issues with static generators and server side frameworks. A few tips: 1. If your start position isn't accurate after refreshes there might be a delay in rendering your full height of the div. Try adding a setTimeout and see if start positions are accurate after sometime. 2. Try adding a fixed height to the div where the start position is being calculated and this can ensure accurate calculations. 3. When you say "refresh" do you mean an actual refresh or hot reload? Hot reloading can be tricky. Not saying the above are solid solutions but just an approach to get to the problem. If you can re-create this problem with a codepen or sandbox that'd be super helpful.
  12. Yep, I saw the demo the other day and created a test case below. I think I almost have it. However, if you notice, all image's div move up at the same time. https://codepen.io/nullhoooook/pen/wvGyRqZ EDIT: new pen link
  13. Yep, I see the text flickr as well while scrolling.