Flip issue

[TrulyNewbie 14 Likes (Newbie)]

Hi,

I have an issue where I the container holding the flip changes height on flip change. Is there a way I can have the div not change height?

My other issue is that when you click the button the flip happens, the height changes (which I dont want to happen) and then when you click the button again its like theres a delay in undoing the flip

 

Thak you for your help

See the Pen eYPyEJw by NewbieRuby (@NewbieRuby) on CodePen

[Rodrigo 5,907 Likes (Superhero)]

Hi,

 

Your content is shifting because of the justify-content property you're giving to your flex element:

.header {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* <- THIS ONE */
  min-height: 100vh;
  padding-top: 7.5em;
  height: 100%;
  background: #ffab91;
}

Also the delay comes from here:

Flip.from(state, {
  absolute: true, // uses position: absolute during the flip to work around flexbox challenges
  duration: 0.5, 
  stagger: 0.1,
  ease: "power1.inOut",
  delay:3 // <- Delay here!!
  // you can use any other tweening properties here too, like onComplete, onUpdate, delay, etc. 
});

Maybe you're looking for something like this:

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

 

Hopefully this helps.

Happy Twening!

[TrulyNewbie 14 Likes (Newbie)]

Thank you so much for pointing that out!

 

My idea was that the two words are stacked, and as you scroll they scale down ad go side by side. So I've tried to code it myself, and i removed the button and I think I'm close. But somethings not right. The triggers dont work correctly. 

Sorry to pester you with questions

 

See the Pen poxpxMw by NewbieRuby (@NewbieRuby) on CodePen

 

[Rodrigo 5,907 Likes (Superhero)]

Hi,

 

You are using an onComplete callback in order to do the Flip.from method. Is better to use ScrollTrigger's callbacks instead. In this case onEnter and onLeaveBack:

 

onEnter    Function - A callback for when the scroll position moves forward past the "start" (typically when the trigger is scrolled into view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity(). onEnterBack    Function - A callback for when the scroll position moves backward past the "end" (typically when the trigger is scrolled back into view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity().
onLeave    Function - A callback for when the scroll position moves forward past the "end" (typically when the trigger is scrolled out of view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity().
onLeaveBack    Function - A callback for when the scroll position moves backward past the "start" (typically when the trigger is scrolled all the way backward past the start). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity().

 

Here is a fork of your codepen example:

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

 

Is worth noticing that in this example I'm wiring the scale animations to the Flip.from() instance, because that actually returns a GSAP Timeline.

 

Hopefully this helps.

Happy Tweening!

[TrulyNewbie 14 Likes (Newbie)]

Thank you!