Jump to content
Search Community

A tricky one - animation in pinned panel

Mattrudd test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi folks.


I'd like an animation to run in the final pinned panel of this header, before the third and final panel scrolls up to reveal the paragraph of text.


I've tried adding a second timeline and attaching to a Scrolltrigger, but of course, due to the nature of the panels, the third panel 'appears' rather than scroll into view, so setting start/end trigger points doesn't work.

Wondering if there's some GSAP-based logic to trigger this 'slice' animation (thanks @PointC😬) when the last panel of the three-panel sequence is in place, and not before?


Hope my description makes sense.

Next on the list is matching the svg text ('noise') with the responsive font size and centred positioning of the proceeding 'cut' and 'through' text - but that's one for Stack Overflow I feel 🤭



See the Pen VwxZpNJ by matt-rudd (@matt-rudd) on CodePen

Link to comment
Share on other sites

Hey @Mattrudd,


I'm not sure I understood correctly, but your goal is something like this?:


See the Pen MWGgOEW?editors=0010 by rhernando (@rhernando) on CodePen


If so just add this in the first timeline after the animation of the first panel:

tl.from(".panel.second", {
  yPercent: 100
}, "<");

If not, please be more specific about it, perhaps with a simple example of the animation you want to replicate.


Happy Tweening!!!

Link to comment
Share on other sites

Hey @Rodrigo! Thanks for your response.

Sorry if I wasn't too clear... it's not the panels I want to adjust - really happy with how those work. 

It's that I want Craig's slice animation (isolated in this pen here) to begin when the last panel displays and not before or after.

See the Pen yLjBaEo by matt-rudd (@matt-rudd) on CodePen


This way the user won't 'miss' the tween if it plays while 'beneath' the first two panels.


Here's the sequence as I see it:


-Page load - panel one 'cut' shows

-User begins scrolling - panel two 'through' displays,

-User continues scrolling - panel three 'noise' displays and the slice animation is triggered (it's just this triggered animation I can't do!)

-User continues to scroll - panel section scrolls up to reveal the white div and black text once the slice animation has completed


Everything else (as in, the way the panels switch the three white-on-black words and then scroll up to reveal the fade-in black-on-white text) is great as it is. So the changes you made above aren't needed.

The way I see it, the animation should be triggered at a specific point along the panel Scrolltrigger - the point that the last word 'noise' comes into view.


It's this triggering/sequencing logic that I've been unable to get right.

It's likely just a simple bit of tweaking to incorporate this animation into the first Scrolltrigger... but my sleep-deprived brain can't fathom it 🤭 I've still a lot to learn but getting there.

Hope that's a bit clearer?




Link to comment
Share on other sites

  • Solution

Hey, it seems that using a fixed value in pixels for the start parameter does what you need. You'll have to play with it, the duration of the slice animation and see what works better for your needs:


  trigger: ".text-container",
  start:document.documentElement.clientHeight * 1.55,
  toggleActions:"play none none reverse",

I updated the codepen so you can see it in action:

See the Pen MWGgOEW by rhernando (@rhernando) on CodePen


Happy Tweening!!!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...