Jump to content
GreenSock

cotton

ShockinglyGreen
  • Posts

    33
  • Joined

  • Last visited

Posts posted by cotton

  1. @Cassie this is brilliant, thank you.

     

    I'm struggling to get it to work on the full site though, the header marker still sits at the top of the header elem on page load (not taking into account the size of the brand__panel). I've tried stripping everything out apart from what's in the Pen too but no luck.

     

    Could I confirm these are the changes you made:

    – Moved whole <header> inside the .brand__panel div

    – Added .last to an element

    – updated the header__wrapper scrollTrigger

    – Added position: absolute and bottom: 0 to the header_wrapper

     

    Did I miss anything?

     

     

  2. Hello

     

    I'm looking for a solution to allow me to pin the vertical bar svg to the top of the page when the .header_wrapper it is inside hits the top of the window. The markers show the function works but it doesn't seem to be taking into account the +=3500 end/pinSpacing of the 'intro' scroll so pins it too early.

     

    I'm currently trying to use a pin to stick the header to the bottom on load and have the end the same as the intro part but then once this is complete it jumps 3500px down.

     

    Essentially, I'm trying to stick the header to the bottom until the intro section has been scrolled through, then the content and header will scroll up until the header bar hits the top of the screen and then the menu icon will stick in place.

     

    I'm sure there is a simple solution or logic that I just need to get my head around but any guidance would be much appreciated.

     

    Thanks

    James

    See the Pen RwVomrW by Cottonltd (@Cottonltd) on CodePen

  3. Hi Shaun

     

    Apologies, the progress bar is probably more key than I had anticipated.

    I've added it's styling etc into the original pen.

     

    Essentially, the text wipes in after the progress bar has completed (on page load) so that is all part of the non-scrollTrigger part. It's only once that TL has played that the copy needs to be controlled by scrollTrigger.

     

    I tried adding the scrollTrigger into the progress_tl but it didn't work.

     

    Thanks

    James

     

    note: I've also changed the y:300 to y:100 to aid the pen being viewed directly in the embed.

  4. Hello all

     

    I've got a bit of an issue that I can't get my head around.

     

    I have some text that, on page load I have animated in (y & autoAlpha). Once completed and the user scrolls I would then like this same text to animate y & autoAlpha of the screen when reaching a certain point.

     

    Currently the intro works fine but then as you scroll off the elements just seem to disappear and don't reappear when you scroll back. Looking at the inspect it would seem the lines are given the initial y:300 transform. It feels like the two gsap animations are competing with each other.

     

    Any ideas?

    James

     

    note: Try the pen on CodePen rather than the embed to see it affecting more than just the top line

     

     

    See the Pen GRWZBJO by Cottonltd (@Cottonltd) on CodePen

  5. Hello

     

    I'm using the horizontal scroll example provided by Jack inside a pinned section which works a treat but I also have elements above and below that have fade/slide animations triggered as they scroll into view. The ones above the pinned section work fine but the ones below trigger early because the height of the pinned section doesn't take into account the width of the elements scrolling horizontally inside it:

     

    <div class="pin-spacer" style="flex-shrink: 1; display: flex; margin: 0px; right: 0px; bottom: 0px; top: 0px; left: 0px; position: relative; overflow: visible; box-sizing: border-box; width: 1632px; height: 2596px; padding: 0px 0px 1632px;">
      <section id="fix-section" style="transform: translate3d(-270px, 0px, 0px); left: 0px; top: -0.40625px; margin: 0px; width: 1632px; height: 964px; padding: 0px; box-sizing: border-box; max-width: 1632px; max-height: 964px; position: fixed;">
        ... ELEMENTS HERE ...
        </section>
    </div>

    The pin-spacer has the calculated full height of all the elements inside it (2596px) but the fixed-section only has the single contained element height (964px) so the animated items below fire once 964px has been reached rather than waiting for 2596px.

     

    I've tried making a pen of this but can't replicate so hope the above generated code is of use.

     

    Can I force the elements below to wait until the pinned section has ended?

     

    Thanks in advance.

  6. Hi @ZachSaucier

     

    Many thanks for that, wonderfully simple with the correct prep.

    Apologies for the dumped CSS/JS, thank you for giving it a neaten.

     

    This is my first big push into animating SVG/Clip-Paths so I'm glad I've got this as a grounding to build on now.

    Are there cases when viewBox isn't recommended and what's a good resource for all these intricacies?

     

    Thanks again
    James

     

     

     

  7. I'm trying to animate a clipPath <rect> width from 0 to 100% using scrollTrigger and scrub and would like it to grow from the centre.

    I've tried using transformOrigin which seems to work because it only fills 50% of the space so presume the other half is off screen and the centre is actually on the left of the window?

     

    I managed to get it working using css transform-origin with toggleClass on click of a button but dropping it into GSAP seems to present a new problem.

     

    I've attached a screen of the transforms applied, I'm wondering does GSAP affect the data-svg-origin attribute see here?

     

    Any help would be greatly appreciated.

     

     

    Screenshot 2020-06-10 00.06.51.png

    See the Pen oNbbxEN by Cottonltd (@Cottonltd) on CodePen

×