Flip reverse, along with timeline

[Mattrudd]

👋 

I'm a bit late to the Flip party... managed to get to a point with it... animating a title from small side menu to larger featured article text.
Learning hat still very much on and down a little over my eyes... as ever though, the super clear docs/videos are helping!

Clicking 'Title one' text flips into a headline and animates the article in.

What I'm a little challenged by is how to make my back arrow reverse the flip and reverse the timeline. Can't quite piece together what I've read in other examples/contexts.

 

Pretty sure it's an if/else to reparent and reset ready for the next title to work (or indeed for the Flip to animate again if title one is pressed again)?

Have commented out my rough attempt at this.

Hope that makes sense?

Eventually I'd like to streamline things so that each title click relies on the same Flip function (likely using an array).
For now I've only got button_1 (Title one) hooked up, with only article_text_1 animating in after the Flip, but I'll later expand it to more titles/articles.

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

[Mattrudd]

Update: I've got a bit closer and since been able to work out the back arrow and the pressing of the Text one button to run the Flip again...

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

 

However - not quite managed to make it so that after the arrow button press:

 

• The article text fades out (initial tl reverses) just before the FlipMove2 function runs, instead of how it is now - tl reversal runs just after the flip
• If possible - for the flipMove2 to be able to be sequenced in relation to the tl reversal tweens, so I can make flipMove2 - the reparenting tween (Title one shrinks back to original size) happen at the same time as title two and three fade in again. I'd ordinarily use position parameters, but here I'm using .add so not sure how to go about this timing.
• The whole cycle works again... currently the original timeline doesn't run again (article text doesn't fade in again) when pressing Text one title for the second go around...? Likely with an onReverseComplete... but not sure how this would cater for my timing requirements above.

 

Only other thing is to try and find out why when Title one is almost back in its original position, it seems to glitch slightly - a slight jump before the end of the Flip sequence... and occasionally a bigger glitch - almost a flash of a line break between words 'Title' and 'one'.

Is there a way of avoiding this jump at the end?

As ever I'm not asking for much 🤭, and hope the above is clear enough!
 

[Rodrigo]

Hi,

 

This should not be that difficult actually. Unfortunately we don't have the time resources to build fully working examples for our users, but I was able to at least create a very simple example for the titles. It doesn't has all the bells and whistles you're aiming for but hopefully it will get you closer to what you're trying to achieve:

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

 

Finally keep in mind that a Flip.from() instance returns a GSAP Timeline, so you can easily tack on to that one or even further add the timeline returned from the Flip.from() method to another timeline in order to sequence things correctly.

 

Hopefully this helps.

Happy Tweening!

[Mattrudd]

Wonderful @Rodrigo thank you! I'm confident I can crack this now. Thanks for showing me the way.

Just a remaining thought... noticing there's still a jump - a  line-break - towards the end of the text flip.
Is there a way to remove this jump so the text stays on one line right through the tween?

Have tried adding the css 'white-space: no-wrap;' in various places but this didn't seem to be the answer.

[Rodrigo]

My goto move would be to set white-space to nowrap in the CSS:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

 

Give that a try and let us know how it goes.

 

Happy Tweening!

[Mattrudd]

@Rodrigo doh for my attempt I'd added a hypen - no-wrap instead of using the correct nowrap 🤦‍♂️

 

That worked a treat.

Thanks again. Que tengas un buen fin de semana!

[Rodrigo]

1 minute ago, Mattrudd said:

I'd added a hypen - no-wrap instead of using the correct nowrap 🤦‍♂️

Happens to the best of us

[Mattrudd]

Hope you don't mind me piping up one more time on this...

Pretty darn pleased with where I've managed to take @Rodrigo 's example to... there's just one thing I'd love to crack to finish things off.

Currently, when the title is pressed, the corresponding article fades in, then fades out on back arrow click.
What I'd like to swap this for is the SplitText effect (currently commented out - lines 52-55) - at least for the article animate IN.

Any nudges/solutions for making this swap would be warmly appreciated!

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

What complicates this (at least for me, late in the day here!) is that I need to deal with hiding the two inactive articles. This was easy with a simple fade as I just set .article-text to opacity: 0.

I tried using gsap.set and a few other ideas to hide the other two inactive articles, but didn't quite get over the line.

I've mentioned already on here, I'm only learning JS because of GSAP... so it's highly likely I need to take a better look at indexing!

Getting there, slowly but surely! 🐢

[Rodrigo]

Hi,

 

I don't have time to go through all your code and create the solution you're looking for, but hopefully this will nudge you in the right direction:

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

 

Hopefully this helps.

Happy Tweening!