Scrolltrigget scale Down section on Scroll down end scale Up on Scroll Up

[Andy777 4 Likes (Newbie)]

Hi there,

 

How i scale down the section element on scrolling down and how i scale up on scrolling up?

 

Please help me letting me know what i miss in the code?

See the Pen JjBVwmR by Andy199807 (@Andy199807) on CodePen

[mvaneijgen 1,524 Likes (Superhero)]

GSAP is build in a way so that you don't have to create multiple timelinesand add delays to those to get the effect you want. If you want to do that, just add a delay to the tween on the main timeline and GSAP will handle the timing for you!

 

Personally I like to add ScrollTrigger directly to the timeline it self, this way I can easily toggle it on/off and then the ScrollTrigger and the timeline directly know what you want to control, so there is not complication in connecting the two.

 

You never want to animate your trigger element when using GSAP, so I've wrapped your section in a .container that way that can be the trigger and then you can add all the animations to your #mySection

 

GSAP can also directly animate all transform properties, so instead of transform: "rotate(180deg) skew(360deg, 0deg) scale(0.5028, 0.5028)", you can write:

 

rotation: 180, 

skewX: 360, 

scale: 0.5028

 

Hope it helps and happy tweening! 

See the Pen OJwGdjG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Andy777 4 Likes (Newbie)]

Really thanks you @mvaneijgen for your suggestions, but i need after the completed of the animation of the tx timelime and tl timeline, in my previous codepen, when it completed each timelines and then the section is scale to 1 i would like that the section on scroll down the section scales down and when scrolling up the section scale up.

 

Could you help me?

 

[mvaneijgen 1,524 Likes (Superhero)]

I'm not completely sure what you mean. If below pen is not what you want, could you try explaining your question in the format below, example:

1. #mySection should animate {property} on page load
2. #mySection should scale to x when the user scrolls
3. Then #mySection should spin around x degrees
4. #mySection should scale to x when the user scrolls back 

See the Pen VwBNNBb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Andy777 4 Likes (Newbie)]

Anyway @mvaneijgen, i fix the problem thanks to your code.

 

Thanks.