Jump to content
Search Community

Pinned titles switching > layered section

Mattrudd test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi, struggling to get my head around the best way to do this... what I want to achieve is for the blue top section to cycle through 'one, two, three', then scroll up out of the way to reveal the grey section, which begins to fade only after the top layer is out of view.

 

Essentially it's replacing/removing the second black 'one' layer with the blue above, with the obvious difference that the blue layer unpins and moves up and out only when the titles have finished cycling through.

 

As ever I've tried lots of combinations - pretty sure I've got my end points wrong, maybe even pinning the wrong containers? 

As usual I think the solution is a simple one but I can't quite combine the right settings!

 

Many many thanks in advance!

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

Link to comment
Share on other sites

2 minutes ago, OSUblake said:

Hard to say what you're going for as there is no scrolling in your demo.

Hey @OSUblake - seems to be one of those Codepen instances when you have to open as a page/'edit on Codepen'- I gather like me the pen isn't scrolling as a forum embed...

Link to comment
Share on other sites

@OSUblake Sure - thanks - let me try and explain a bit more clearly...

 

I'm looking to replace the black div (first layer that scroll up) with the blue div that precedes it.

 

That will result in the blue div cycling through the three pinned titles, and as this sequence finishes, it will then be the blue layer that scrolls up to reveal the grey div beneath, with the text fading as it does currently.

 

Current setup:

  1. Blue div at top, pinned titles switch on scroll
  2. Blue div un pins and scrolls up
  3. Black div follows
  4. Black layer scrolls up to reveal grey pinned div
  5. Text in grey div fades out on scroll
  6. Grey div unpins after all text has faded

 

What I'm looking for:

  1. Blue div at top, pinned titles switch on scroll
  2. Blue div un pins and scrolls up - but crucially acts as a layer in the same way black does currently
  3. Grey div revealed underneath
  4. Text in grey div fades out on scroll
  5. Grey div unpins after all text has faded

I've tried a simple swap of black for blue, placing the top blue div within the '#paragraph-container' that's working the layer effect, but this throws everything off.

 

I'm very likely making this more complicated than it actually is, but I think the pinning of titles in the blue section necessitates some more control of the spacing - just not sure of the best method for this.

 

Hope that all makes sense - thanks for your time as ever!

 

 

Link to comment
Share on other sites

If I understand you correctly, I think you can you just make blue and black sections all part of the same timeline, kind of like what I was explain here. I just added in a simple rotation animation in the demo, but that is where you could do your title switch animations.

 

 

 

Link to comment
Share on other sites

The scroll still isn't working in your demo, it's probably best to not include locomotive scroll in demos as it's not relevant to the animation. 

 

But just from glancing at your code, you should never have a trigger nested inside a timeline. See the most common mistakes article.

 

 

Link to comment
Share on other sites

10 minutes ago, OSUblake said:

But just from glancing at your code, you should never have a trigger nested inside a timeline. See the most common mistakes article.

 

 

Great thanks for the lead. 

 

From here it's just getting my head around how to strip things back as per your guidance.

 

If I understand correctly it's a case of calling the ScrollTrigger function at the start of the timeline for the main container, then embed the title switch and text fade tween in the timeline.

 

Link to comment
Share on other sites

Had a good go at it, but I think it's the 

panels.forEach(panel => {
  let content = panel.querySelector("div");

line that's throwing me - not sure what to replace that with - but I know that's a JS issue.

 

So it's a bit broken, and that's before I've got onto the initial title changes! Feel like I'm edging a little closer though...

 

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

 

Link to comment
Share on other sites

  • Solution
5 hours ago, Mattrudd said:

Had a good go at it, but I think it's the 

panels.forEach(panel => {
  let content = panel.querySelector("div");

 

That's why I was saying that you probably don't want to do the forEach thing in that demo as it only makes sense if every panel has a similar animation inside of it.

 

Just write a timeline like you would for a normal animation for everything inside your container.

 

See the Pen qBVQgmM by GreenSock (@GreenSock) on CodePen

 

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

Wheyyyyy thanks so much @OSUblake!

 

Saw your post ping up last night but for some reason missed the pen attached... so had a go myself and got almost as far before double checking your last response... started to overcomplicate a little with a 'gsap.utils.toArray' for the panel animations when it just needed the simple tl.to.

 

Removed the black div, added the text fade and sorted! Even learnt how to add a slight delay on the paragraph fade. Amazing what you can discover actually reading the instructions 😅

 

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

 

Grateful for persevering with me.

 

 

  • Like 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...