A tricky one - animation in pinned panel

[Mattrudd 38 Likes (Newbie)]

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

[Rodrigo 5,055 Likes (Superhero)]

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!!!

[Mattrudd 38 Likes (Newbie)]

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?

 

 

 

[Rodrigo 5,055 Likes (Superhero)]

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:

 

ScrollTrigger.create({
  trigger: ".text-container",
  start:document.documentElement.clientHeight * 1.55,
  toggleActions:"play none none reverse",
  animation:tl2,
})

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

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

 

Happy Tweening!!!

[Mattrudd 38 Likes (Newbie)]

@Rodrigo you are the man. Thank you!

That start value is exactly the kind of thing I was thinking was possible - just formulating it was beyond my reach. I'll go away and learn about that now.

Thanks again!