Gsap pin non working if there is another timeline applied to #brx-content

Bug Reports
1

Hi there,

Not pretty sure if it’s a real bug but I’ve found that adding a simple timeline with trigger #brx-content breaks other timelines if they have gsap pin.

Steps to reproduce:

  • simple gsap timeline running on pageload with trigger #brx-content
  • simple timeline with a pinned element of course with anoter trigger.
  • the pinned element in the second timeline is invisible durung the transition.

Any idea or workaround?

Thanks!

2

Why would you choose the entire page wrapper as trigger? If you work with PIN elements within a trigger, problems are inevitable. Do you have the option of simply using the top element as a trigger within your wrapper? Does that solve the problems?

3

Hi Daniele. Thank you for your time.

I try to clarify better the whole thing:

  1. reference site is this one: https://analoguefoundation.com/

    I’ve replicated that page transition logic (preloader and page
    transition) without any major problem: an “in” and an “out” gsap
    timelines Not running on page load for the page transition and
    anoter timeline this time running on page load for the preloader.

  2. #brx-content was chosen as selector for another animation
    occurring between page transition. Think Like the one for the
    default page transition with css. Basically with gsap is a simple
    translate from 40px for example in order to make the content
    between header and footer slightly move.
    That’s the point when some issues arise. Setting it as a custom
    timeline and adding as another timeline in the page transition
    doesn’t Work. It only work as normal timeline on pageload.

  3. then was playing with some basic pin and scrub animation in
    the page environment not in pagetransitionn and I have noticed
    the strange behaviour with pin enabled. The trigger for that
    animation of course is not bricks content wrapper. Disbling the
    timeline triggering #brx-content fixes the timeline with pin.

I’ll have to debug it deeper step by step. Have a fine day!