Scaling down an element

[clhomme]

Hello everyone!

 

I'm having issues with scaling. I've looked a lot, but I can't find the answers to my questions.

 

See, I have my header where the dot becomes increasingly larger when you scroll, to the point it takes up the full screen, then the div overlayed on my next section will shrink until it takes the width of about 35% of the page (it will be stuck to the left, and the height will remain 100%. Also, I put the overlay in yellow to differentiate it but it will be pink like the dot, as to give the effect that it's the same div that expand and shrink). I have two issues:

 

1. Is there a way to make the scaling of the dot always take full size of the screen, no matter the device? I'm concerned because with scaling, you can't use units like percentages or viewport, it has to be a fixed number.

 

2. I can't manage to make my overlay scale down. Everything I've seen show how to scale up, but nothing on how to scale down to a certain width. It works if I just set the width to 35%, but then I don't have that effect of the overlay gradually reducing to the desired width. Instead it just jumps to 35%.

 

I would be really grateful if someone could help me! Thanks!

See the Pen MWPBPVZ by Dhandelyon (@Dhandelyon) on CodePen

[Rodrigo]

Hi,

 

First the biggest issue in your setup right now is that you have ScrollTrigger instances on animations that are inside a Timeline. That's a no-no in GSAP Land. The reason is very simple. A timeline, among other things, is a container that controls the playhead of several animations. A ScrollTrigger instance is something that controls the playhead of an animation or timeline based on the scroll position. So when you scroll down: which one has control of the animation ultimately? See the problem? In this cases is better to create a timeline and make ScrollTrigger control that timeline.

 

As for the animation itself the issue here is not completely about the values you pass to the scale property. Scale goes between 0 and 1, that is 0 and 100%, so using values such as width: 100% and height: 100vh should work. The problem you're facing is where the element is positioned, considering that you're animating a transform is about the transform origin property of the element:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

So you have two options. Calculate the transform origin based on the position of the element (a bit complicated), or use the Flip Plugin (super easy).

 

Here is a fork of your codepen using the Flip Plugin:

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

 

Hopefully this helps.

Happy Tweening!

[clhomme]

Thank you for your answer! I'll admit, I have a little trouble understanding everything though. So the problem was that I had scrollTrigger inside my timeline, or that I had two scrollTriggers?

 

Also, is there a way to scale a div down from full screen to a specific width (in this case, this would be .project-overlay)? I've seen tutoriels and answered topics on this forum, but all of them are about how to scale the element up.

 

Thank you again for your answer!

 

 

[Rodrigo]

On 5/20/2023 at 2:03 PM, clhomme said:

So the problem was that I had scrollTrigger inside my timeline, or that I had two scrollTriggers?

ScrollTrigger inside a timeline, like this:

const tl = gsap.timeline();

tl.to(element, {
  /* Animation Config */,
  scrollTrigger: {
    // ScrollTrigger Config
  },
});

Which one ultimately controls the animation's playhead, the Timeline or ScrollTrigger? They both are trying to update the progress of that particular animation (to() instance).

 

For scaling down, just use Flip as well in the reverse order. That is:

1. Have the element in it's initial state, that is full width.
2. Get the current state using Flip.getState().
3. Set the final state of the element to what you want at the end. You can do this changing the styles a class or reparenting the element.
4. Animate using Flip.from().

Here is a super simple example that uses reparenting:

 

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

 

Hopefully this helps.

Happy Tweening!