Jump to content


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

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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?


Link to comment
Share on other sites

  • Solution

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

  • Like 1
Link to comment
Share on other sites

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



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.